2.5 GridViewPager: Part 2

Hey, everyone. This is Paul with tuts+ and you're watching the Developing for Android Wear course. In the last lesson, we started creating a grid view pager as well as the adapter so that we can display in multiple card fragments, so in this lesson we're going to create a custom fragment so that we can display that as well within our grid and then we will also add backgrounds to each of the fragments just so that the cards that are on them will pop out a little bit more rather than blending in to a white background. So before we begin putting in the backgrounds, let's go ahead and create a custom fragment. So let's go back to our project where, source, main, java, our package, and we need to actually create a fragments folder just to keep everything fairly organized. So go ahead and go to new package. And we'll type in fragments. And within that, let's create a new Java Class. And we'll just go ahead and all this custom fragment. Extends fragment. And we will use the android.app version of this. And in the body of the custom fragment, let's go ahead and override uncreate view. And then instead of returning super.onCreate view, we'll return inflator.inflate, and we'll pass in the layout file. R.layout.fragment underscore custom, which is a layout file that we will need to create next. We'll also pass in container and false. Let's go ahead and import r. And it will tell us that it can't find the fragment_custom. So let's go back to the where module source main res layout. We'll create a new layout resource file and we'll just call this fragment_custom. We'll hit okay and let's go ahead and use a box inset layout for this as well instead of the linear layout. So, this would be android.support.wearable.view.BoxInsetLay- out. Let's go ahead and give everything its own line. We no longer need this orientation property because that is specific to the linear layout. However we will need a res auto property for xm lms. So we'll use xm lns. We'll call it app is equal to http and then it'll auto provide an option for us. Which is the res dash auto option. So we'll just go ahead and select that. And then with the nr box inset layout, let's create a frame layout with a match parent and match parent height and width and let's also go ahead and give this app:layout_box, and we'll just say all. Then this, let's actually give it a text view, and we'll give this a match parent width and height, and we'll give it some text. And we'll just say this is a custom fragment, just so we can see it when we actually create it within our grid view pager. And once we have that let's just go ahead and throw a background onto this box and set layout and this is gonna be separate from the background that we would assign through our actual adapter. So let's go ahead and say background is equal to drawable. And we'll say it is background1. So I've already put in some drawables into the res drawable folder for backgrounds one through five, which we will be using in this course. So, you can find these, as well as the information on where they came from, inside of the courses source. So we'll go ahead and save and close this file. We can go ahead and close the custom fragment Java file. So, within our adapter, let's go ahead and add a new row. So we'll say row is equal to new row. And we'll say new custom fragments. And then mrows.addrow. So this will add our custom fragment into our adapter with the other card fragments that we have. So the next thing we will want to do is start adding in some backgrounds. So because the backgrounds that we will use are stored in our drawables folder, we will need to get a context indoor adapter so that we can get to R.drawable. So, if we go back to our GridViewPager activity, under wear, source, main, java, our package, and activities, let's go ahead and go to where the adapter is created, which is this line right here where it says GridViewPagerAdapter adapter is equal to new GridViewPagerAdapter. Let's just go ahead and pass in a context. So, we'll say this, because the activity itself is a context and then we will need to go into our adapter, and update the constructor. So, if we come back to the GridView page or adapter, we can change this constructor here to expect a context context, as well as the fragment manager. And we'll just go ahead and import context. And then let's go back to wear, source, main, our package and models. And let's update the row to expect to hold a set of dropples for that row. So if we go to the top, just under the columns list, and we create a private list drawable. We'll import drawable. And we'll call this fragment background. And we'll make this equal to a new array list of drawable. And let's just go ahead and add a couple different methods here. So at the very bottom. Let's add public ListDrawable getBackgrounds. And we'll just return the fragment backgrounds list. So return FragmentBackgrounds and we'll also add a couple methods for add in these backgrounds. So I'll say public void addBackground. We'll expect a drawable, and we'll just call this background. And then we will use this.fragmentbackground.add background and if we wanna add a list of backgrounds into this, we can use public void add backgrounds with an s at the end. And we'll say drawable, dot dot dot, backgrounds. And for drawable background within the backgrounds list. We'll use fragment backgrounds, dot. add background and this will just take a background from this list of backgrounds and add it to our overall list. And the last thing we will want to do is add in one more method here which is public drawable getbackground. We'll pass in an index so that we can retrieve a specific background from our list of backgrounds. So we'll use return fragmentbackgrounds.get from index. And we should probably throw in a check here. So see if index is less than fragment backgrounds.size minus one, then we'll return this. Else, return, null, just so that we don't get a out of bounds exception when we're trying to call git on our fragment backgrounds. So let's go ahead and close the row model and let's start adding some background to our rows. So, the first row, let's just go ahead and say, row.addBackground, context.getResources.getDrawable(R.drawab- le.bg1) and we'll import R. And that will put the background one onto row one. For the second set, we have three items here. So let's go ahead and add two backgrounds here just so you can see what happens when you don't have enough backgrounds associated with your row to fit the amount of items that are there. So we will use row.addBackgrounds with an s at the end. context.getResources.getDrawable. R.drawable.bg2. And then we'll also throw in a comma and context.getResources.getDrawable. R.drawable.bg3. And then we will not put in a third one for this row. You'll notice that this says that getDrawable is deprecated, I think that's because we can actually can get rid off the getResources here. Let me double check that. Oh, there we go. It's because it requires API level 21 and we aren't supporting 21 yet, we're supporting back to 20 so we'll just save it as is. So we come down to the next row. Let's go ahead and use row.addbackgrounds. context.getresources.getdrawable, r.drawable.bg4. And finally we'll use context.getresources .getDrawable( R.drawable.bg5) and you'll notice that all of the text that we have here is roughly the same size, it just says page one or page two. Now we have enough content to actually make our card larger. Let's go ahead and see that that will look like. So we'll add a fifth row here. A row = new row CardFragment.create "Row 5", and then let's just add in various text to make this fairly long, I'll just throw in some gibberish. So once we have that, we can close that off with a semicolon. We'll say row.addBackground, without the s, context.getResources.getDrawable, r.drawable.bg1. And then mRows.add, and we'll throw in our row. So now we will have five rows with varying columns, as well as one custom fragment within our grid view pager. So we actually need to override a couple of other methods here in the adapter, so that we can display these different background images. So if we scroll down to the bottom we already have getRowCount and getColumnCount. But there's two more methods that we can override. So the first one is getBackgroundForRow. And the second one is getBackgroundForPage. So in getBackgroundForRow, this is the overall background that would be used for the row if nothing else is applied. So we will say if mRows.get row.getBackgrounds = null or mRows.get row .getbackgrounds.isempty. So basically there is no background set up at all for this item. Then we're just going to go ahead and return super.getbackgroundsforrow. And we'll pass in the row. And we'll let the OS handle what should be displayed which in general is just a transparent background. So nothing comes up. Otherwise we will return m rows.getrow.get background for an index of zero. So we'll just return the first straw poll that is associated with that row as the default for the entire row. Now if we come down to get background for page this will actually take precedence over get background for row. So if they can find an item, it'll use that, otherwise it will fall back to the row background. So lets go ahead and get rid of that. And we will use if m rows.getrow.get background is null [SOUND] or column is greater than MRows.get, and we'll pass in row as the index, .getBackrounds with an s, .size. And then we'll minus one because it is a zero indexed item. Then we will return super.getBackgroundForPage and we'll pass in row and column. And this will default to either the get background for row item if that's been set or it will just be transparent. And if there is an item there that we can use, then we will return mrows.getrow.get background for column. So let's go ahead and go to run. It looks like I actually have a typo in here. So let's see. It should be getbackground, not getbackround. So we'll go ahead and fix that, and we'll go back and run this again. And we'll go ahead and install this on our emulator, so we'll hit okay and we'll come back to our emulator And it looks like we have a crash here so let's actually look at the log and it doesn't really say, it just says that it is trying to call a drawable method on a null object. So if we go back to our row object, there's probably something that I missed here. Let's see. More than likely it is getBackground. So I have index is less than fragmentBackground.size minus one. This'll probably need to be less than or equal to, or if we can get rid of the minus one. So let's go ahead and hit run again. We'll hit okay. We'll go back to our emulator. We'll go to Grid View Pager Activity. We'll click on that. And it's no longer crashing on us, so that's good. And we do see our backgrounds, which as we swipe through our cards these do change. However, we do have this extra padding on the side. So my guess is because our activity underscore grid view pager, which if we go to layout under our resource file, it's the activity underscore grid underscore pager. We'll go to text and we have a frame layout that is putting a box layout on left, right, and bottom, so let's just go ahead and get rid of that. So we'll wipe out this line. And we'll go ahead and hit run again. And this basically will make our box inset layout kind of useless. But if I remember correctly, the card fragment itself will already handle this for us. And since our custom fragment is inside of a box layout, we shouldn't need to worry about it. So if we come back to our emulator, we can go to the Grid View Pager Activity and now you can see that the background is full width on our screen. So as we slide through here we can see that it's there and if we scroll to the next page we have the different items that are available. And you'll remember that Row 2 Page 3 did not have a background set, so it is using the first background that was set for this row. So we have the images of the mountains here for Page 3, stars for Page 2 and we should have the mountains again for Page 1. If we scroll down, we now have the hot air balloon, and item two is a set of the sky with more mountains and the lake. Go back to Page 1, I'll scroll down again and this is our custom fragment, with the background set for it as well as our custom text. So in this lesson you have learned how to create a custom fragment and display that within the grid view pager as well as how to assign background for rows and pages within those rows using that grid view pager. So in the next lesson we'll actually look at something that came out fairly recently, just before IO in 2015. That goes over setting an ambient mode for activities, so that when you click on the power button it doesn't just go back to the main screen of your watch, but it'll actually leave your activity up so your user can look at the face of your watch and see the content from your application rather than having to reopen it every time their watch goes back into ambient mode. So I will see you in the next lesson.