This is a sample from the book.

Sample 1 Sample 2 Sample 3 Sample 4 Sample 5

The GridViewPager Layout

As the name suggests, GridViewPager gives you a two-dimensional scrolling grid of items to choose from. It is a layout manager that allows users to scroll vertically and horizontally through pages of data. You can combine different types of pages such as a CardFragment, an ImageView, action icons and custom layouts depending on your use cases. The number of rows and columns can be asymmetric; not all rows needs to have the same number of pages. As such, you can implement a one-dimensional layout with only one row or only one column. Furthermore, implementing a dots indicator will give users a visual cue as to the number of pages in the context stream. For added visual appeal, each page may have a background image that will automatically perform parallax effects when scrolling between pages. Otherwise, the GridViewPager works much like any other selection widget — use setAdapter() to provide the data and child views, invoke setOnPageChangeListener() to register a page change listener, and so on.

 bg_red_focus  bg_blue_focus  bg_white_focus
 bg_red_fusion  bg_blue_fusion  bg_white_fusion
 bg_red_mustang  bg_blue_mustang  bg_white_mustang
In the context of Android Wear, each row represents a single piece of content. When moving between rows, GridViewPager will by default navigate back to the first column. This behaviour is seamless and expected. For example, if you are viewing the details of a stock index or the weather forecast, it would be out of context and outright confusing to land on an action button for a different item. However, depending on your use cases, you can change this behavior by overriding getCurrentColumnForRow. This will be demonstrated in this chapter’s exercise.

There are two ways to implement a GridViewPager:

  • By assigning a fragment such as a CardFragment for each page by extending FragmentGridPagerAdapter. (Click here to view this exercise)
  • Without fragment by extending GridPagerAdapter and by providing a custom View object

In the following exercise, I will show you how to implement a GridViewPager without fragment. That is, we will create a 3 by 3 car gallery using the GridViewPager, GridPagerAdapter, ImageView and dots indicator as shown in the picture above.

Let’s get started!

1. Using Android Studio, create a new Android project for the Wear platform and name it SimpleGridView.

2. Next, we need to import the following images into the  res/drawable folder.

Follow these instructions:

2.1 Download Car Images and unzip the file into a temporary folder.

2.2 Go to your temporary folder. Perform a select all (Ctrl-A) followed by a copy (Ctrl-C).

2.3 In your Android Studio project pane, go to the res folder and select drawable as shown below. Right-click on drawable then choose paste.






2.4 Right-click on the drawable folder then click on Paste.

2.5 Click OK when the following copy dialog appears.







3. Now that we have imported our car images, we will add a new XML file in the res/layout folder in the Wear branch and name it activity_main. Key in FrameLayout in the Root Tag field. Populate it as follows:

3. Under the package name of your wear branch, add a new class file and name it SimpleGridActivity and populate it with the content below. Make sure to use your Java package name instead of com.learnandroidwear.

6. In the AndroidManifest.xml file in the Wear branch, add the content that is enclosed in the <activity></activity> XML nodes:

7. That’s it! Now press Shift+F9 to debug the project.

Understanding the Code

You first added the GridViewPager and DotsPageIndicator views to activity_main.xml.

As mentioned earlier, the GridViewPager is used to display content data in a horizontal and/or vertical scrolling list. The DotsPageIndicator is used to display a visual cue as to the number of pages in the context stream.

The list of images to be displayed is stored in the carImageIDs 2D array:

You create the ImageAdapter class (which extends the GridPagerAdapter class) so that it can bind to the GridViewPager view with a series of ImageView views. The GridPagerAdapter class acts as a bridge between the GridViewPager and the data source that feeds data into it.

For the ImageAdapter class, you implemented the following methods:

In particular, the instantiateItem() method returns an ImageView object by referencing the carImageIDs array by its row and column.

In our example, we are using a GridViewPager with nine pages (3 columns and 3 rows) therefore getRowCount() and getColumnCount() both returns 3 respectively.

Finally, getCurrentColumnForRow is an interesting method. Recall earlier that the default behavior of the GridViewPager is to go back to the first column whenever you scroll up or down from a page. However, in our example we want to remain in the same column when moving between rows. This makes sense in the context of our use case because if the user is looking at a blue Ford Focus, scrolling down will display a blue Ford Fusion and so forth. Overriding the getCurrentColumnForRow method and simply returning the currentColumn is all that are required to achieve this.

That’s it! I hope you enjoyed this sample tutorial. The source code for this tutorial will be posted shortly.

Alex Ho • Email Me ©2014-2015

Go to next sample


Enjoyed the samples?


Signup to receive additional content for free.

(Don't forget to check your email and confirm your subscription)

We won't send you spam. Unsubscribe at any time.