PagerSlidingTabStripのタブにMaterialデザインを適用する方法

PagerSlidingTabStripを使うとMaterialデザイン対応したタブを実装できます。いくつか設定しなければいけない属性があるのでメモ。

Before

特に設定していない場合はこんな感じ。

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tab_strip"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_below="@id/toolbar"
    app:pstsShouldExpand="true" />

After

属性を設定するとこんな感じ。

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tab_strip"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_below="@id/toolbar"
    android:background="?attr/colorPrimary"
    android:textColor="@color/white"
    android:textSize="14sp"
    app:pstsDividerColor="@android:color/transparent"
    app:pstsIndicatorColor="@color/white"
    app:pstsIndicatorHeight="2dp"
    app:pstsShouldExpand="true"
    app:pstsTabBackground="@drawable/bg_feedback"
    app:pstsUnderlineColor="@android:color/transparent" />

説明

• backgroundに?attr/colorPrimaryをセットすることで、Toolbarと同じ色に。
• textColorで文字色を設定。
• textSizeは14spに。ちなみにYouTube、Playニュースだと14sp、Playストアだと16spのようです。(2015/01/16時点）
• pstsDividerColorは表示しないので@android:color/transparentをセット。
• pstsIndicatorColorは白にする。ここはテーマカラーによって調整。
• pstsIndicatorHeightは2dp。ちなみにYouTubeは4dp、Playニュース、Playストアだと2dpのようです。(2015/01/16時点）
• pstsTabBackgroundには、タップフィードバック用のdrawableをセット。
• pstsUnderlineColorを透明にして、タブ下のバーを非表示に。

その他Tips

影をつけたい

ViewPagerにbackgroundをセットしたらつきます。影のつけ方はToolbarに影をつける方法まとめてみたが非常にわかりやすいです。

<android.support.v4.view.ViewPager
    android:id="@+id/view_pager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/tab_strip"
    android:background="?android:windowContentOverlay" />

タブテキストのTextStyleのboldを取りたい

PlayニュースやPlayストアはboldですが、YouTubeだとnormalなんですよね。これ実はxmlだと設定できなくて、コードでセットしてあげる必要があります。

mTabStrip.setTypeface(null, Typeface.NORMAL);

いちいち設定するのめんどくさい

デフォルトがMaterialデザインっぽくなるforkリポジトリもあるようです。
https://github.com/jpardogo/PagerSlidingTabStrip