Android PagerSlidingTabStrip

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 library as local library project or add the dependency in your build.gradle.

    dependencies {
    compile 'com.astuetz:pagerslidingtabstrip:1.0.1'
    }

  2. 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="48dip" />

  3. 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);

  4. (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);

Customization

To not just look like another Play Store styled app, go and adjust these values to match
your brand:

  • pstsIndicatorColor Color of the sliding indicator
  • pstsUnderlineColor Color of the full-width line on the bottom of the view
  • pstsDividerColor Color of the dividers between tabs
  • pstsIndicatorHeightHeight of the sliding indicator
  • pstsUnderlineHeight Height of the full-width line on the bottom of the view
  • pstsDividerPadding Top and bottom padding of the dividers
  • pstsTabPaddingLeftRight Left and right padding of each tab
  • pstsScrollOffset Scroll offset of the selected tab
  • pstsTabBackground Background drawable of each tab, should be a StateListDrawable
  • pstsShouldExpand If set to true, each tab is given the same weight, default false
  • pstsTextAllCaps If true, all tab titles will be upper case, default true

All attributes have their respective getters and setters to change them at runtime

GitHub