Android Implement a page counter like the one on the home screen

Question

Does anyone know of an example of how to do the page/view counter (little dots) like the one on home screen?

Like this example:

Thanks

Answer 1

PagerTitleStrip is what you use with ViewPager to indicate what page you're on. It's something you add to your XML.

Layout XML:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center" >

    <android.support.v4.view.PagerTitleStrip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="top" />
</android.support.v4.view.ViewPager>

</LinearLayout>

And in your PagerAdapter:

@Override
    public CharSequence getPageTitle (int position) {
        return "Your static title";
    }

However, PagerTitleStrip isn't very customizable, but ViewPagerIndicator is very customizable and includes the dotted indicator that you're looking for. You'll need to theme it to recreate the picture in your OP.

Circle indicator with ViewPagerIndicator:

<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.viewpagerindicator.sample"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<android.support.v4.view.ViewPager
    android:id="@+id/pager"
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:layout_weight="1"
    />
<com.viewpagerindicator.CirclePageIndicator
    android:id="@+id/indicator"
    android:padding="10dip"
    android:layout_height="wrap_content"
    android:layout_width="fill_parent"
    />

</LinearLayout>

Then in your code:

CirclePageIndicator mIndicator = (CirclePageIndicator)findViewById(R.id.indicator);
        mIndicator.setViewPager(mPager);

ViewPagerExtensions is another open source library that offers custom views for ViewPager you might be interested in.