How to add page points for 2D sorters in Android Wear?

Question

Several stock apps use these “page points” to guide the user. When I implemented the 2D assembler, I found out that the points on the page are not part of it. I tried using images to simulate the effect, but my ImageView moves with the page when the user iterates through the pages from the page.

How can I implement such "page points" that do not move when the user tries? In addition, can I control whether / when these points appear and disappear?

Answer 1

Now you can (starting with version 1.1) use the DotsPageIndicator class as follows:

 <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 prevent points from moving with the page, place them in the action layout instead of individual fragments of the page. For instance:

 <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 particular application, you can either fill out the page_dots_container layout in XML, or program it programmatically using small ImageViews. Then set OnPageChangeListener to the GridViewPager - when the selected page changes, refresh the ImageViews point to display which page is selected.

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