Introduction

Paging indicator widgets compatible with the ViewPager from the Android Support Library and ActionBarSherlock. Originally based on Patrik Åkerfeldt's ViewFlow.

When using the ViewPager widget it is not always obvious to the user that there are adjacent views they can navigate to. By implementing this widget you provide a clear indicator that there exists additional content which they can click or swipe to see.

Download

Version 2.4.1 — 2012-09-11

Download ZIP Download TGZ

Change Log

  • New IconPageIndicator! Uses state-list images to represent pages.
  • TabPageIndicator now supports icons via IconPagerAdapter interface.
  • Support android:background attribute on Canvas-based views.
  • Title indicator allows for drawing its line, underline, and/or triangle on top of the titles for placement underneath a ViewPager.
  • Tab indicator now supports ICS-style dividers (see styled sample).
  • Fix: Do not attempt to change the ViewPager page when a motion is cancelled.
  • Fix: Long titles no longer overlap when swiping to the right.

Looking for an older version? Check here.

Try out the sample application: Download from the Android Market

Usage

  1. Include one of the widgets in your view. This should usually be placed adjacent to the ViewPager it represents.
    <com.viewpagerindicator.TitlePageIndicator
    	android:id="@+id/titles"
    	android:layout_height="wrap_content"
    	android:layout_width="fill_parent" />
  2. In your onCreate method (or onCreateView for a fragment), bind the indicator to the ViewPager.
    //Set the pager with an adapter
    ViewPager pager = (ViewPager)findViewById(R.id.pager);
    pager.setAdapter(new TestAdapter(getSupportFragmentManager()));
    
    //Bind the title indicator to the adapter
    TitlePageIndicator titleIndicator = (TitlePageIndicator)findViewById(R.id.titles);
    titleIndicator.setViewPager(pager);
  3. (Optional) If you use an OnPageChangeListener with your view pager you should set it in the indicator rather than on the pager directly.
    //continued from above
    titleIndicator.setOnPageChangeListener(mPageChangeListener);

For more examples please take a look at the source code to the samples.

Implementations

Is your app missing?

Contact Jake Wharton or fork the project, update this page, and send a pull request!

Hint: It's in the gh-pages branch.

Credits

© 2012 Jake Wharton — @JakeWharton · +JakeWharton

Developed and distributed under the Apache License, Version 2.0.

Originally based on widgets developed by Patrik Åkerfeldt.

Fork this project on GitHub