Android:ViewPager - PagerSlidingTabStrip, Custom Tab Background on state_selected

SimplyFarzad picture SimplyFarzad · Jun 28, 2014 · Viewed 9.7k times · Source

I need to use a custom background for each tab when each one of them is in state_selected mode. But still nothing happens when I select a tab.

I used selector like this: (tab_selector.xml)

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_selected="true"
         android:drawable="@drawable/gradient_tab" />
    <item android:state_selected="false" 
        android:drawable="@drawable/tab_unselected" />
    <item android:drawable="@drawable/tab_unselected"/>
</selector>

And this is the activity_main.xml:

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/tab_back"
    app1:pstsTabBackground="@drawable/tab_selector"
    app1:pstsIndicatorColor="#00FFFFFF"
    app1:pstsShouldExpand="true" />

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/tabs"
    tools:context=".MainActivity" />

As obvious I'm using PagerSlidingTabStrip by astuetz. And here is how I'm using ViewPager and PagerSlidingTabStrip:

final PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
viewPager = (ViewPager) findViewById(R.id.pager);
viewPager.setAdapter(mainPagerAdapter);
tabs.setTextColor(Color.WHITE);
tabs.setViewPager(viewPager);

    viewPager.setOnPageChangeListener(new OnPageChangeListener() {
    @Override
    public void onPageSelected(int position) {
        tabs.setViewPager(viewPager);
    }

I tried mixing different states and re-positioning them, but still not working. I tried to put an specific tab on a selected mode but I could not figure it out.

Answer

SimplyFarzad picture SimplyFarzad · Jun 30, 2014

I figured it out myself, but not in a standard way! Since I needed a gradient like background on my selected tab, I used indicator and underline like this:

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:background="@drawable/tab_back"
    app1:pstsUnderlineHeight="24dip"
    app1:pstsIndicatorHeight="48dip"
    app1:pstsIndicatorColor="#e7e7e7"
    app1:pstsShouldExpand="true" />