android twitter app, custom viewpager tabs how

Question

The twitter app for android has customized viewpager tabs, how is this done? The Text sits above a small center dotthat appears when there is something new in each respective tab.

I know how one might do this with ACTION BAR tabs, but the problem with action bar tabs is that in landscape mode they move to the actual action bar. Viewpager tabs do not do this.

I have dealt with some Viewpager titling libraries, but I'm unclear how this would be done

Answer 1

One answer is to use a third party library like PagerSlidingTabStrip , or a fork of that which allows putting any drawable in the tab

Answer 2

You can set your own views to every tab, you should create a layout xml (custom_tab_icon.xml) with a TextView and a blue dot below the TextView

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">

<TextView
    android:id="@+id/tab_name"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="TITLE"/>
<ImageView
    android:id="@+id/dot"
    android:layout_width="5dp"
    android:layout_height="5dp"
    android:layout_below="@id/tab_name"
    android:layout_centerHorizontal="true"
    android:background="@drawable/notifiercircle"
    android:visibility="visible"/>

And then, everytime you change the tab, call this refreshTabIcon method:

private void refreshTabIcons() {
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(null); //if view is not first nullyfied, it's added to the previous one, not replaced
        tab.setCustomView(R.layout.custom_tab_icon);
        ImageView dot = ((ImageView) tab.getCustomView().findViewById(R.id.dot));
        if (viewPagerAdapter.getItem(viewPager.getCurrentItem()) == viewPagerAdapter.getItem(i)) {//This if determines if this is the selected tab
            dot.setVisibility(View.VISIBLE);
        } else {
            dot.setVisibility(View.INVISIBLE);
        }
        ((TextView) tab.getCustomView().findViewById(R.id.tab_name)).setText("tab title");
    }
}