ViewPagerを使用している時にActionBarで用意されているタブを使用せずにViewPagerのタブを作る必要がありました。 加えて、インジケータに画像を使用したいということもあり、既存のライブラリでぴったりはまるものが見つからなかったので自作してみました。
実装方法はこちら(JakeWharton/Android-ViewPagerIndicator)を大いに参考にさせてもらいました。

できたもの

Layoutの任意に位置に配置して使用できるViewPager用のタブウィジェット。インジケータには任意の画像を指定。

screenshot1

このスクリーンショットだけだと、ActionBarのタブでいいじゃないかって話になりますが、Layoutの中に自分で配置できるので画面の下部にタブを配置したり

screenshot2

ActionBarとタブの間に別のViewを差し込むことも可能です。

screenshot3

使い方

1. githubにライブラリプロジェクトとして登録しているので、cloneするなりZIPダウンロードするなりしてご自身のプロジェクトから参照できるようにしてください。(chibatching/ImageIndicatorTab

2. ActivtyやFragmentのレイアウトXMLの中に下記のように記述してViewを配置します。

	<com.chibatching.imgindicatortab.ImgIndicatorTab
    	xmlns:imgtab="http://schemas.android.com/apk/res-auto"
    	android:id="@+id/indicatorTab"
    	android:layout_width="match_parent"
    	android:layout_height="50dp"
    	android:background="#ffffff"
    	imgtab:selectedTextColor="#3333aa"
    	imgtab:deselectedTextColor="#888888"
    	imgtab:indicatorDrawable="@drawable/rect"
    	imgtab:fitIndicatorWithTabWidth="true" />

3. ActivityのonCreateやFragmentのonCreateViewで、AdapterのセットされているViewPagerをセットします。

	@Override
	protected void onCreate(Bundle savedInstanceState) {
    	super.onCreate(savedInstanceState);
    	setContentView(R.layout.activity_sample_tab);

    	// Create the adapter that will return a fragment for each of the three
    	// primary sections of the activity.
    	mSectionsPagerAdapter = new SectionsPagerAdapter(getSupportFragmentManager());

    	// Set up the ViewPager with the sections adapter.
    	mViewPager = (ViewPager) findViewById(R.id.pager);
    	mViewPager.setAdapter(mSectionsPagerAdapter);

    	// Set up the ImgIndicatorTab with ViewPager
    	ImgIndicatorTab imgIndicatorTab = (ImgIndicatorTab) findViewById(R.id.indicatorTab);
    	imgIndicatorTab.setViewPager(mViewPager);
	}

これで、任意の画像をインジケータに使ったViewPager用のタブが表示されます。
レイアウトXML内のパラメータの意味は下記の通り。

パラメータ名 意味
selectedTextColor 選択されているタブ名の文字色
deselectedTextColor 選択されていないタブ名の文字色
indicatorDrawable インジケータに使用するDrawable
fitIndicatorWithTabWidth  インジケータをタブ幅に合わせて拡大する(タブ高を超えない範囲で)

これから

とりあえず使えるようにと作ってみたので、今後時間を見つけて改良していきたい。
今考えているのは

  • インジケータ画像の配置をカスタマイズできるようにする(上下左右寄せ等)
  • インジケータ画像のスケールオプションを追加する(現状は幅合わせ or 何もしない)
  • 文字列がタブ幅より大きくなる場合の処理を追加する
  • エラー処理をちゃんと作る