Some issues and difficulties in PagerTabStrip

Question

I have implemented a scrollable tab + swipe, everything works fine. However I have some issues related to the current PagerTabStrip :

1. I can't make the current title Bold

2. Can't choose the default tab I want to display (e.g : the tab with position 2) when rendering the view, like the tabs in the Google Play app

3. The first and last tab have respectively a margin on the left and the right, can I set it to 0dp ?

This is what I could do for styling the tabs :

Java :

strip = (PagerTabStrip) findViewById(R.id.pager_tab_strip);
strip.setTabIndicatorColorResource(R.color.light_blue);
strip.setDrawFullUnderline(true);

Layout :

<android.support.v4.view.PagerTabStrip
    android:id="@+id/pager_tab_strip"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:background="@drawable/pagertitle_border_bottom"
    android:paddingBottom="15dp"
    android:paddingTop="15dp"
    android:textColor="@color/light_blue" />

Can anyone help me with the 3 points ? Thank you.

Answer 1

Well, I actually found a proper solution for that. Forget about PagerTabStrip ;)

Apparently, Google released a sample app that features the exact source code they used in Google Play app. It's super easy to use. Download the sample app and copy two files from there: SlidingTabLayout.java and SlidingTabStrip.java.

Then in your layout XML, add the following above the ViewPager (change com.example to your package name):

<com.example.SlidingTabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

<android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_marginTop="5dp"
        android:layout_weight="1.5"
        android:layout_width="match_parent"
        android:background="@android:color/white"
        android:layout_height="0dp"/>

And add the following to the activity after you initialize the ViewPager:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mViewPager = (ViewPager) findViewById(R.id.pager);
        mViewPager.setAdapter(new GridPagerAdapter(getSupportFragmentManager()));
        // Initialize the SlidingTabLayout. Note that the order is important. First init ViewPager and Adapter and only then init SlidingTabLayout
        mSlidingTabLayout = (SlidingTabLayout) findViewById(R.id.sliding_tabs);
        mSlidingTabLayout.setViewPager(mViewPager);
    }

SlidingTabLayout's API allows you to easily do basic styling such as, changing the tab color, the divider color, the indicator color, etc.

One more important thing, the SlidingTabLayout that Google provided works well when you have many tabs. But, if you have, for example, three tabs, you'll see that all the tabs are aligned to the left and there's a big gap between the last tab and the width of the view.

To overcome this, modify SlidingTabLayout.java after line 173 just below TextView textView = new TextView(context); add the following line:

textView.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1f));

Now the space among the tabs will be divided correctly:

Answer 2

Have a look at this. This guy explains very clearly how to use Sliding Tab Layout

Understanding Sliding Tab Layout

For any customization

Change the code in the class SlidingTabLayout.java