在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，

我使用的 android studio进行开发的，所以引用TabLayout很简单，只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。

例如：慕课网中节日短信例子中，主界面即是TabLayout + viewPager实现

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity">

<android.support.design.widget.TabLayout
    android:id="@+id/id_tablayout"
    android:layout_width= "match_parent"
    android:layout_height="wrap_content"
    android:background="#ffffff"
    app:tabGravity="fill"
    app:tabMode="fixed"
    app:tabTextColor="#000000"
    app:tabIndicatorColor="@color/main_color"
    app:tabSelectedTextColor="@color/main_color"/>

<android.support.v4.view.ViewPager
    android:id="@+id/id_viewpager"
    android:layout_width="wrap_content"
    android:layout_height="0dp"
    android:layout_weight="1"></android.support.v4.view.ViewPager>

</LinearLayout>

这里面没有什么特别的，就是添加了一个TabLayout和Viewpager作为上下的布局。其中

app:tabIndicatorColor="@color/white" // 下方滚动的下划线颜色
app:tabSelectedTextColor="@color/gray" // tab被选中后，文字的颜色
app:tabTextColor="@color/white" // tab默认的文字颜色

代码中将TabLayout和ViewPager关联非常简单
mTabLayout.setupWithViewPager(mViewPager); //建立tablayout和viewpager的关联

viewpager和adapter的关联

    mViewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            if (position == 1)
                return new SmsHistoryFragment();
            return new FestivalCategoryFragment();
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return mTitles[position];
        }

        @Override
        public int getCount() {
            return mTitles.length;
        }
    });