An interactive indicator to navigate between the different pages of a ViewPager

by androidexample

Android PagerSlidingTabStrip (default Material Design)

Interactive paging indicator widget, compatible with the ViewPager from the Android Support Library.

Usage

For a working implementation of this project see the sample/ folder.

  1. Include the following dependency in your build.gradle file.
compile 'com.jpardogo.materialtabstrip:library:1.1.1'

Or add the library as a project. I tried to send a pull request, but looks like the original developer doesn't maintain it anymore.

  1. Include the PagerSlidingTabStrip widget in your layout. This should usually be placed above the ViewPager it represents.
<com.astuetz.PagerSlidingTabStrip
    android:id="@+id/tabs"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary" />
  1. In your onCreate method (or onCreateView for a fragment), bind the widget to the ViewPager:
// Initialize the ViewPager and set an adapter
ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new TestAdapter(getSupportFragmentManager()));

// Bind the tabs to the ViewPager
PagerSlidingTabStrip tabs = (PagerSlidingTabStrip) findViewById(R.id.tabs);
tabs.setViewPager(pager);

That's all you need to do, but if you want to use your own tabs, then...

  1. If your adapter implements the interface CustomTabProvider you can paste your custom tab view/s.

    • In case the the view returned contains the id R.id.psts_tab_title, this view should be a TextView and
      will be used to placed the title and set the view state (pressed/selected/default).

    • If you don't want the library manage your TextView title for the tab, use a different id than R.id.psts_tab_title in your tab layout.

    • The interface provide callbacks for selection and unselection of tabs as well.

    • If your adapter doesn't implement the interface CustomTabProvider the default tab will be used, which is a TextView with id R.id.psts_tab_title).

  2. (Optional) If you use an OnPageChangeListener with your view pager
    you should set it in the widget rather than on the pager directly.

// continued from above
tabs.setOnPageChangeListener(mPageChangeListener);

GitHub