Page location for GridViewPager

Question

I would like to add small page location indicators (the small circles at the bottom of the screen) like the ones that is used for notifications in on the Android Wear for a GridViewPager.

What is the best way to do this? One small problem for me is that I use my GridViewPager in the vertical direction but I think that could be figured out.

Do I have to do this completely manually or is there any controls that would help?

Edit: Added image of what I need for clarity.

Answer 1

The new version of Wearable comes with this feature.

All you have to do is update your dependency on build.gradle to:

 compile "com.google.android.support:wearable:1.1.+"

and do the following:

<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/page_indicator"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal|bottom" />

</FrameLayout>

and in your activity declare it like this:

 DotsPageIndicator dotsIndicator = (DotsPageIndicator)findViewById(R.id.page_indicator);

 dotsIndicator.setPager(mViewPager);

Answer 2

This is how I solved it. It might not be the best way but it works. If anyone have a better solution please edit this post or make a new post.

First I have a drawable that creates a round object.

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#eeffffff"  />
    <corners android:bottomRightRadius="200dip"
        android:bottomLeftRadius="200dip"
        android:topRightRadius="200dip"
        android:topLeftRadius="200dip"/>
</shape>

Then in my layout I have created the following structure in my case I needed to have the dots vertically. But it's possible to create a horizontal version as well.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal">
    <RelativeLayout
        android:layout_alignParentRight="true"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical">
        <LinearLayout
             android:layout_width="15dp"
             android:layout_height="wrap_content"
             android:layout_centerVertical="true"
             android:id="@+id/dotlayout"
             android:orientation="vertical">
         </LinearLayout>
     </RelativeLayout>
     <android.support.wearable.view.GridViewPager
          android:layout_width="match_parent"
          android:layout_height="match_parent"
          android:id="@+id/pager">
     </android.support.wearable.view.GridViewPager>
</RelativeLayout>

I tried to make the dots as similar as possible to the Google version. And I got it pretty close but not perfect since the distance between the dots are of by a pixel or two. I used buttons at the moment but it could be any view that you could make round perhaps images would be better:

I added the dots to my dotlayout

for(int i = 0; i < numberOfDots; i++){
     Button b = new Button(this);
     configDot(b, 4, 2);
     dotLayout.addView(b);
}

Remember to make the starting button large:

configDot((Button) dotLayout.getChildAt(0), 6, 1);

And the Config method:

private void configDot(Button b, int size, int margin){
    b.setBackground(getResources().getDrawable(R.drawable.roundbutton));
    LinearLayout.LayoutParams p = new LinearLayout.LayoutParams(getPxFromDp(size), getPxFromDp(size));
    p.gravity = Gravity.CENTER_HORIZONTAL;
    p.setMargins(0, margin, 0, margin);
    b.setLayoutParams(p);
}
private int getPxFromDp(int dp){
    return (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, getResources().getDisplayMetrics());
}

On my pager i added a onPageChangeListener Where i reconfigure all the views to have the correct size.

pager.setOnPageChangeListener(new GridViewPager.OnPageChangeListener() {
      @Override
      public void onPageScrolled(int i, int i2, float v, float v2, int i3, int i4) {}

      @Override
      public void onPageSelected(int i, int i2) {
           for(int j = 0; j < dotLayout.getChildCount(); j++){
               configDot((Button) dotLayout.getChildAt(j), 4, 2);
           }
           if(dotLayout.getChildCount() > i) {
                configDot((Button) dotLayout.getChildAt(i), 6, 1);
           }
      }

      @Override
            public void onPageScrollStateChanged(int i) {}
 });

This is what it looks like: