ViewPager + TabLayout でタブの見た目をカスタマイズする

普通の使い方

ViewPagerとTabLayoutは最初から組み合わせて使うことを考えられているので、デフォルトで使うのは楽チン。

ViewPagerとの併用のあたりを参照してください
http://androhi.hatenablog.com/entry/2015/06/17/083000

ただ、その場合見た目はこうなります。

ダメだ！こんな殺風景じゃなくもっとバッチとか付けてリッチにしたいんだ！

といった場合

カスタマイズ版

Activity.java

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

        TabLayout tabLayout = (TabLayout) findViewById(R.id.tab_layout);
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);

        FragmentPagerAdapter adapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
            @Override
            public Fragment getItem(int position) {
                return TestFragment.newInstance(position + 1);
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return null;    // 後からセットするためにnullを返しておく
            }

            @Override
            public int getCount() {
                return 3;
            }
        };


        viewPager.setAdapter(adapter);
        viewPager.addOnPageChangeListener(this);

        tabLayout.setupWithViewPager(viewPager);
        .
        .
        .

        LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

        Tab tab1 = tabLayout.getTabAt(0);
        tab1.setText("Home");
        tab1.setIcon(R.drawable.tab1);

        View tab1View = inflater.inflate(R.layout.tab1_tab, null);
        tab1.setCustomView(tab1View);
        tab1Badge = (TextView) findViewById(R.id.tab1_badge);
        .
        .
        .

tab1_tab.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="0dip"
android:layout_height="64dip"
android:layout_weight="1"
android:layout_marginLeft="-3dip"
android:layout_marginRight="-3dip"
android:orientation="vertical"
    >

<ImageView
    android:id="@+id/tab1_icon"
    android:layout_marginTop="8dp"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:src="@drawable/tab1"
    android:layout_centerHorizontal="true"/>

<TextView
    android:id="@+id/tab1_badge"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@+id/tab1_icon"
    android:layout_toRightOf="@+id/tab1_icon"
    android:layout_marginLeft="-3dp"
    android:layout_marginTop="0dp"
    android:paddingTop="2dp"
    android:paddingLeft="5dp"
    android:paddingRight="5dp"
    android:paddingBottom="2dp"
    android:textSize="10sp"
    android:textStyle="bold"
    android:textColor="@android:color/white"
    android:background="@drawable/badge"
    android:visibility="gone"/>

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textSize="9dp"
    android:text="Home"
    android:textColor="@drawable/tab_indicator_text"
    android:paddingBottom="6dp"
    android:layout_centerHorizontal="true"
    android:layout_alignParentBottom="true"/>


</RelativeLayout>

無事カスタマイズできました。