Page Layout for GridViewPager

Question

I would like to add small page location indicators (small circles at the bottom of the screen), similar to those used for Android Wear notifications for the 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 it can be understood.

Do I have to do this completely manually or are there any controls that will help?

Edit: Added image of what I need for clarity.

Answer 1

A new version of Wearable comes with this feature.

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

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

and follow these steps:

 <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 as follows:

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

Answer 2

This is how I solved it. This may not be the best way, but it works. If anyone has a better solution, edit this post or create 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 created the following structure in my case, I needed to have points vertically. But you can also create a horizontal version.

 <?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 close as possible to the version of Google. And I got it pretty close, but not perfect, since the distance between the points is a pixel or two. I used buttons at the moment, but it could be any representation you could make, perhaps images would be better:

I added points 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 start 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 onPageChangeListener , where I reconfigured 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) {} }); 

It looks like this:

Answer 3

You have the right idea.

Check the sdk/samples/android-20/wearable/JumpingJack project.

Here is their layout for the indicator:

 <LinearLayout android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="10dp" android:layout_width="wrap_content" android:layout_height="wrap_content"> <ImageView android:id="@+id/indicator_0" android:layout_marginRight="5dp" android:src="@drawable/full_10" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <ImageView android:id="@+id/indicator_1" android:src="@drawable/empty_10" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> 

Then in the Office:

 mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int i) { setIndicator(i); } ... } private void setIndicator(int i) { switch (i) { case 0: mFirstIndicator.setImageResource(R.drawable.full_10); mSecondIndicator.setImageResource(R.drawable.empty_10); break; case 1: mFirstIndicator.setImageResource(R.drawable.empty_10); mSecondIndicator.setImageResource(R.drawable.full_10); break; } } 

Answer 4

To use GridViewPager effectively, you need to implement the GridPagerAdapter (which you may have already done). In the adapter, in instantiateItem , make some changes based on the row or column number, depending on your layout. It could be something like this:

  @Override protected Object instantiateItem(ViewGroup viewGroup, int row, int col) { Log.d("test", "instantiateItem: row=" + row + " col=" + col); View v; // row == 0 for col scroll if(col == 0){ v = View.inflate(mContext, R.layout.your_view, null); TextView textView = (TextView) v.findViewById(R.id.your_text_view); // Change the textView text based on the row or column number } else { v = View.inflate(mContext, R.layout.your_other_view, null); } viewGroup.addView(v); return v; } 

Note: if you want the layouts on different pages to be the same, but each, to show the correct page number, you can do this too. Just inflate the same layout, but change the corresponding textView to the corresponding text.

Edit (in response to the image and explanation) Perhaps you may have a resource with a small white dot. In your views, you add an array of the specified points using LinearLayout or ListView and based on the column you are in, you scale the corresponding point using something like

 // Read your drawable from somewhere Drawable dr = getResources().getDrawable(R.drawable.somedrawable); Bitmap bitmap = ((BitmapDrawable) dr).getBitmap(); // Scale it to 50 x 50 Drawable d = new BitmapDrawable(getResources(), Bitmap.createScaledBitmap(bitmap, 50, 50, true)); // Set your new, scaled drawable "d"