How to add Page Dots for 2D Pickers in Android Wear?

Question

Several stock apps use this kind of "page dots" to guide the user. When I implemented 2D picker, I found out page dots are not part of it. I tried to use images to simulate the effect, but my ImageView moves with the page when user swipes from page to page.

How can I implement this kind of "page dots" that do not move when user swipes? Furthermore, can I control whether/when these dots would appear and fade?

Answer 1

You can now (as of v1.1) use the DotsPageIndicator class like so:

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

    <android.support.wearable.view.GridViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:keepScreenOn="true" />

    <android.support.wearable.view.DotsPageIndicator
        android:id="@+id/indicator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal|bottom"/>
</FrameLayout>

Then in your Activity class:

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.my_gridview);

    final GridViewPager pager = (GridViewPager) findViewById(R.id.pager);
    DotsPageIndicator dots = (DotsPageIndicator) findViewById(R.id.indicator);
    dots.setPager(pager);
}

Answer 2

To make the dots not move with the page, put them in the Activity layout instead of the individual page fragments. For example:

<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">

    <android.support.wearable.view.GridViewPager
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/page_dots_container"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true" />

</RelativeLayout>

Depending on your specific application, you can either fill the page_dots_container layout in the XML or fill it programmatically with small dot ImageViews. Then set an OnPageChangeListener on the GridViewPager - when the selected page changes, update the dot ImageViews to reflect which page is selected.

See the JumpingJack Wear sample (under sdk/samples/android-20/wearable/JumpingJack) for a complete example.