2.4 GridViewPager: Part 1

Hey everyone. This is Paul with Tots plus and you're watching the developing for Android wear course. In this lesson, we're gonna go over the grid view pager and the adapter that goes with it and then we're also going to add a dots page indicator so that you can see how many pages are available within your grid. So, the way the grid view pager works is in Android wear, generally on the main screen you'll see a set of cards that you can scroll up or down with. And then you can also scroll to the right so that you can see more options that are available. So, the grid view pager allows you to use that same kind of interaction with fragments. And then there's also a card fragment that we will use for this example so you can emulate that setup within your application. So to start, let's actually go to our web browser. And we'll just grab the documentation for the GridViewPager just so you can see what methods are available and what else you can do with it on top of what we will do in this lesson. You can also see that there is the GridPagerAdapter. Which we'll just go ahead and open that as well. So you can see how this will work and it works generally like any other adapter would where it has a set of content that is used to generate views that are returned to our view pager. And then the other thing that we're gonna look at is the DotsPageIndicator, which, all it does is add a set of dots to the bottom of our GridViewPager so that you can see how many pages are available within that screen. So let's go back to Android Studio, and let's go ahead and create a new activity that will contain our GridViewPager. So, let's go to wear, source, main, java, our package, activities. Let's right click and go to new, Java Class. We'll create a GridViewPagerActivity. And this will just extend activity. And let's go ahead and make sure that we add this to our manifest. So we'll scroll down to AndroidManifest.xml. Let's just add a new note in here. So activity with the name of GridViewPagerActivity. Close that off and we can close our manifest. And in our GridViewPagerActivity, we'll need to overwrite onCreate. We'll leave the super part there. setContentView R.layout.activity_grid_pager. Let's import R and then we're going to need to create a layout for activity_grid_pager. So, let's go to wear, source, main, res, layout. I'll right click and create a new layout resource file. Let's put in the name of activity_grid_pager. And instead of using a linear layout, let's go ahead and use Android.support.wearable.view.boxinsetlay- out. We'll hit okay, and we'll go to our text tab. Now let's just go ahead and clean this up a little bit, so that every item is on it's own line. Let's give this a background color. At Android colon color white It already matches parent so that's good. Now we're going to add in a frame layout also say match parent and match parent. And let's go ahead and make sure this has a layout box associated with it aswell. So let's say app:layout_box="left". Bottom and right. We're going to need to add in the declaration for app. So if we come back here to where we have this xmlms, we can just go ahead an auto import this, so it is the res auto version. We'll import, and then within our frame layout, we will need to add in two things here. The first will be our actual grid view pager. So we'll say, Android.support.wearable.view.grid view pager. We'll give this an ID of pager. A layout width and height, both of these will have match parent. And finally we'll add a property called keep screen on and we'll set it to true. So this will just keep the screen on while the application is in the foreground. So we'll go ahead and close this off. And underneath it let's go ahead and add android.support.wearable.view.DotsPageInd- icator. And we'll give this an id of page_indicator. This will also have a layout width of wrap content, a height of wrap content, and we're gonna give this a layout gravity of center horizontal. And we'll order this flag with another one called bottom. So what this will do is it will place the dots for the indicator at the bottom of the screen and then center it as well. So they'll always go to the bottom middle. Once that's done we're actually done with our layout so we'll go ahead and close this file, and back in grid few pager activity we're going to need to create references to the view pager, as well as the indicator. So, above on create let's create some member variables here private gridViewPager. mGridViewPager. And then we'll also go with private.pageIndicator and we'll call that mPageIndicator. And let's just go ahead and find these references from our layout. So MGridViewPager = (GridViewPager) findViewByID R.ID.pager. And then we will need to use MPageIndicator = (DotsPageIndicator) findViewById R.ID. Pager indicator. Next, let's go ahead and associate our indicator with our view pager, so we will use M page indicator dot set pager to M grid view pager. So now when there's content within our grid view, our dots will show up or not show up depending on whether there is content or not. As with any view pager or list and so forth, we will need to create an adapter. So, let's go ahead and go to wear, source, main, java. And we will need to create a new package here to keep everything organized. So we will go to new, package. And we'll just call this adapters. And within Adapters, let's go ahead and create a new Java class, called GridViewPagerAdapter. So what this will do, is it will extend FragmentGridPagerAdapter let's go ahead and import our missing methods. So we will need to add getFragment, getRowCount and getColumnCount. Because our adapter has to let our view pager know how many rows and columns within those rows are available. So import those, and before we start, let's actually create a model to contain all of our information for our rows. So lets go back to wear, source, main, java and our package. Let's create another new package, and we'll call this one models. And within that, let's create another new Java class called row. And this will contain a private final list of fragment, and we'll just go ahead and call that columns. We'll import fragment. We'll also import list. We'll say this is equal to a new array list of type fragment. Let's go ahead and add a constructor now, so public row, and we'll just say fragment and then dot, dot, dot fragments so that we can have any number of fragments added into our row constructor. And then we'll say for Fragment Fragment from all of our fragments. columns.add and we'll pass in fragment. Let's go ahead and add some helper methods here as well. So under our constructor, let's add public fragment getColumn. And we'll pass in int i. So whenever the ith column is needed, we'll return that from our list of fragments. So we'll just use return columns.get(i). Let's go ahead and also say public int get column count and then this will return columns that size and then we will come back to this later because we will want to add some backgrounds but let's not deal with that right now so let's go back to our adapter. And let's create a collection here so private listofRow MRows because we could have multiple rows we'll have a list of rows and each of those rows themselves can contain multiple columns. So you'll see a little bit more of what I mean as we build out this example. So we'll import row. We'll Import list and we'll say this is equal to a new array list of type row and lets go ahead and see why there's a red squiggly under this class name. So we'll go to the red light bulb, and it looks like we just need to have a constructor. So we'll add that. And within our constructor, let's start adding some data. We'll say Row row = new Row. And then we're gonna use a CardFragment.create. We'll give it a title of Row 1. And a content of Page 1. We'll import card fragment and let's go ahead and look at what a card fragment is as well. So we'll go to our web browser and let's just go ahead and type in Android card fragment, and you'll see the first item here is the card fragment documentation, and as you can see it actually extends a fragment. And what this does is it essentially gives you a view similar to a card, which is what you see on the main screen of the Android Wear app when you get your notifications. And we'll go through notifications later, so you'll get a better idea of what that looks like as well if you're not a Android Wear user. But for now, let's just go back to Android Studio. And let's add in a couple more rows. So we'll say mrows.add, and we'll put in row, and we'll close that off. And then let's go ahead and add a couple more. So we'll say row = new Row( CardFragment.create "Row 2" ), and we'll say this one is Page one. And let's go ahead and add three pages for this one. So let's copy this CardFragment create line. And we'll just throw in a comment at the end here before the last parenthesis, and we'll just past that in. And let's just change this page number to be two and three. And then we'll just add this row to our m rows collection. And then we'll create another row that's equal to new row. Cardfragment.create. We'll just say row 3, page 1. Then we'll add this in again. Say this is page 2 for row 3. We'll end that so there will be two pages on this one. And mRows.add[row]. And then after we've actually made the simple example, we'll come back and we'll add backgrounds for each of these items, as well as add in a custom fragment rather than just the card fragment, just so you can see that you can mix and match your fragments. So next let's go down to gif fragment, and what this does is it passes in a row index and a column index, so they can return the proper fragment for our grid. So we'll go ahead and just say row row is equal to mrows.get row index. Return row.getcolumn, we'll pass in column index so that we can get the proper fragment and under getrowCount we will return mrows.size. And for getcolumnCount we will return mrows.get for i, which is the row index, and we'll use getcolumnCount Which is a method that we added to our row's model object. So now we'll able to properly display a couple of our card fragments within our view pager. So if we go back to GridViewPagerActivity, we can create a new adapter. So GridViewPagerAdapter, we'll call it adapter is equal to new GridViewPagerAdapter. And we will need to pass in our fragment manager. So we can use getfragmentmanager and then we will set this adapter with out view pager. So we will use mreviewpager.setAdapter and we'll pass in the adapter. So next we're gonna need to go to main activity and actually open up this activity. So if we come back to wear, source, main, java, our package and activities. We'll go to main activity. And you'll notice that we have an if statement here that checks to see if the item is within our list. Currently it says Item 2, so we will need to go back to wear, source, main, res and come down to values. And let's create a new string. So we'll say string name is equal to grid underscore view underscore pager underscore activity. And we'll just say it's called a grid view page activity. And let's go ahead and add this over to our strings array. So we'll go down to item two, and we'll point this to at string, and we'll use our name of grid view page activity. We can save that and close both of these XML files. In the main activity we'll say, else, if, get string, r.string.gridviewpageractivity.equalsigno- recasetitle. Intent, intent, is equal to new Intent. This GridViewPagerActivity.class. And startActivity for this intent. Let's go ahead and get rid of this toast message too, cuz we no longer really need that. So we'll save that, and let's go ahead and hit run. We'll go ahead and hit okay. We'll go back to our emulator. We'll click on the grid view pager activity item. And now you can see that we have a set of cards in here. And you'll notice that on page two three little dots popped up as we move around on our card. So that just indicates that we have other pages available as well. So you'll notice it kind of looks plain because there's no background and it's hard to tell that there is a card here. So what we're going to do in the next video is we're going to set up images for the different pages as well as the. Different rows within the screen view pager, and we will also create a custom fragment that is not a card fragment, just so that you can see that we can mix and match these fragments. So I will see you in the next lesson.