androidtabspagerslidingtabstrip

Astuetz's PagerSlidingTabStrip library still doesn't slide the tabStrip


I've added the PagerSlidingTabStrip library to my project, following the guide but the strip under the tabs doesn't slide (I'm referring to have something like what you can see in the Google Play app). Here is my MainActivity:

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mCollectionPagerAdapter);

    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setViewPager(mViewPager);
    mViewPager.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {

        @Override

        public void onPageSelected(int position) {
            actionBar.setSelectedNavigationItem(position);
        }

    });
    for (int i = 0; i < mCollectionPagerAdapter.getCount(); i++) {
        actionBar.addTab(actionBar.newTab()
                .setText(mCollectionPagerAdapter.getPageTitle(i))
                .setTabListener(this));

    }

EDIT:

activity_main.xml:

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

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"/>

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

</RelativeLayout>

MainActivity:

public class MainActivity extends FragmentActivity implements
    ActionBar.TabListener, android.app.ActionBar.TabListener {
CollectionPagerAdapter mCollectionPagerAdapter;
ViewPager mViewPager;
SharedPreferences mPrefs;
final String welcomeScreenShownPref = "welcomeScreenShown";


public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_INDETERMINATE_PROGRESS);
    setProgressBarIndeterminateVisibility(true);
    setProgressBarIndeterminateVisibility(false);
    setContentView(R.layout.activity_main);


    mCollectionPagerAdapter = new CollectionPagerAdapter(
            getSupportFragmentManager());

    final android.app.ActionBar actionBar = getActionBar();
    assert actionBar != null;
    actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setDisplayUseLogoEnabled(false);
    actionBar.setHomeButtonEnabled(false);
    actionBar.setIcon(R.drawable.ic_action_icon3);
    actionBar.setTitle(R.string.app_name2);
    actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mCollectionPagerAdapter);

    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setViewPager(mViewPager);


}

EDIT2 tabs_background.xml:

<item android:state_pressed="true" android:drawable="@drawable/tab_selected_pressed_example" />
<item android:state_focused="true" android:drawable="@drawable/tab_selected_focused_example"/>
<item android:drawable="@color/tab_color"/>

MainActivity:

actionBar.setDisplayShowTitleEnabled(true);
    actionBar.setDisplayUseLogoEnabled(false);
    actionBar.setHomeButtonEnabled(false);
    actionBar.setIcon(R.drawable.ic_action_icon3);
    actionBar.setTitle(R.string.app_name2);

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mCollectionPagerAdapter);

    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setViewPager(mViewPager);
    tabs.setIndicatorColor(android.R.color.white);

activity_main.xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="48dip"
    app:pstsIndicatorColor="@android:color/white"
    app:pstsUnderlineColor="@color/tab_color"
    app:pstsDividerColor="@color/tab_color"
    app:pstsTabBackground="@drawable/tabs_background"/>

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

</RelativeLayout>

Solution

  • If you want to use PagerSlidingTabStrip you don't need to add tabs to the actionBar. Just cut your code to:

    mViewPager = (ViewPager) findViewById(R.id.pager);
    mViewPager.setAdapter(mCollectionPagerAdapter);
    
    PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
    tabs.setViewPager(mViewPager);
    

    The library automatically adds tabs to the actionbar, gets tabs texts from this method:

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

    EDIT:

    Add the android:layout_below property to the ViewPager and it should work:

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    
        <com.astuetz.PagerSlidingTabStrip
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="48dip"/>
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_below="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            tools:context=".MainActivity" />
    
    </RelativeLayout>
    

    EDIT2:

    Firstly, create a selector in your drawable folder, called tabs_background.xml for tabs background:

    <?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
    
        <item android:state_pressed="true" android:drawable="@color/your_pressed_red_color" />
        <item android:state_focused="true" android:drawable="@color/your_focused_red_color"/>
        <item android:drawable="@color/your_red_color"/>
    
    </selector>
    

    Then you can customize tabs, by setting properties, you can see it here, as for your customization:

    <com.astuetz.PagerSlidingTabStrip
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dip"
        app:pstsIndicatorColor="@android:color/white"
        app:pstsUnderlineColor="@color/your_red_color"
        app:pstsDividerColor="@color/your_red_color"
        app:pstsTabBackground="@drawable/tabs_background">
    

    Don't forget to add this line to the parent RelativeLayout xmlns:app="http://schemas.android.com/apk/res-auto"

    And finally, to set text color, do it programmatically:

    tabs.setTextColor(android.R.color.white);