2.2 WearableListViews

Hey everyone. This is Paul with Tuts+, and you're watching the developing for Android Wear course. In the previous lesson, we went over some new views that you could use so you can support both round and squared devices. So in this lesson, we're actually going to introduce the wearable list view which is a new kind of list view that extends the recycler view. And it's made specifically for use with Android Wear with some functionalities such as snapping items to the center of the screen, so the user can just hit the center of their watch to use that item. And it also provides things such as a minimum hype for items, so that it's easy enough for your user to actually hit the items without hitting the wrong item above or below whichever on they're trying to select. So if we go to our browser, we can actually see the documentation for the wearable list view, here on the developer.android.com site. And as you can see here, it does extend the recycler view and since this is a part of Wearable Support Library, we will need to take the full class name here. So I'll just go ahead and copy that. And we're gonna use that within our layout in place of the textview that is currently on our main activity layout file. If you do read through the documentation you will see that there's some things in there such as the view holder and the adapter, which we will be implementing in this lesson and the on center proximity listener, which we will also be implementing. So, if we go back to Android Studio, we can go ahead and change out the activity underscore main XML file, which is under the wear module under src > main > res > and layout, we can go in here and remove this text view. And instead we're gonna make this the android.support.wearable.view.wearablelis- tview, which is available through the Wearable support library, which you'll find in build.gradle under the wear module. As the support wearable in current version is 1.2.0, there will be other versions down the line, so this is what we're using as of right now simply because this is the latest at the time of this video. If you go back to activity_main, we'll go ahead and get rid of this text within the wearable list view, cuz it is no longer a text view. And we're gonna go ahead and give this an ID, and we'll just call it list. Once that's done, we can go ahead and close this. And here in main activity let's go ahead and get rid of this text view, and we'll call this private WearableListView and list view. And then right after set content view and onCreate, we'll say that m less view is equal to wearable list view and we'll say find view by ID. R.ID.list and it looks like I forgot a semi colon here at the top of wearable list view, so you'll notice that I have a tiny red squiggly mark right here. So just go ahead and add our semicolon. And now that we have a reference for our listView, we're going to need to implement an adapter for it. So what we're gonna do here in MainActivity is we're gonna scroll to the bottom and we're gonna add in a new WearableListAdapter. So we'll say private static final class WearableListAdapter extends WearableListView.Adapter, which you'll remember that in the documentation, I pointed to that earlier, we have a wearableList adapter. So we'll click on that, and you can get some information about what this class will actually do and some of the things that are associated with it. So if we go back to Android Studio, let's go ahead and implement this. It has the red squiggly, so let's find the label, and let's implement the methods here. So we're gonna use oncreateviewholder, onbindviewholder and getitemcount. Now, something to be aware of, the recycler view doesn't implement it's own data structure like the array adapter does, so we will need to add that in here as well. So let's go ahead and add private list and we'll just use the string item type for this. And we'll call it items is equal to new ArrayList String. And we'll import ArrayList, and we'll import List. And then let's go ahead and click on items so that we get the yellow lightbulb up here. And we'll create a getter and setter for items. And on that same note, let's go ahead and add a new method here. So public void add item, and let's see string item. And we'll use this.items.add, and we'll pass in item. That way we can just add items to our list individually rather than having to set the entire list later. Now that we have our data structure set in, we can go ahead and change getItemCount to return Items.Size. We normally would have to check to see if Items is null or not, but in this case we've actually already set it up to be equal to a new array list. So we don't need to worry about it being null. The next thing we're gonna need to do is implement our view holder. So let's go to the very bottom of our adapter. And let's just type in, public, static, class. View holder, extends, wearablelistview.viewholder. And we're gonna use the wearable list view version of it, not the recycler view version of it. So go ahead and add our brackets, we'll click on the red portion here. And we'll just go ahead and create a constructor and then we are only going to have a text view for this view, which we will create that later. So you'll see as that goes along why we are just using a text view and how we're using it. But we'll say private Textview, and we'll just call it textView. And we'll say textView is equal to a casted Textview with itemView.findViewByID R.ID.text. The next method that we need to implement here is onCreateViewHolder. So what we're going to do here is instead of returning null we will return newViewHolder from our own wearable list adapter. And we're gonna use a layout inflator from, and we need to pass a context to this. And sense this is an inner class, we don't have a context directly from the activity. But there is a view group passed into here, and view groups themselves have a context associated with them. So we'll just use parent.getContext(). And then we can use .inflate and then we'll an r.layout and we're going to need to use a layout name. We've not created an item yet but we're going to call this one view_list_item which I created earlier which is why it pretty populated. But we're gonna create it from scratch ourselves here. And we're just gonna pass in null, because we're not gonna associate it with another view. And we will need to import our LayoutInflater, and then that should be all set for onCreateViewHolder. And then down here at onBindViewHolder, which is what's called as the ListItem is first created so that it can be recycled properly, we're just gonna go ahead and say ViewHolder from our own view holder here, And we'll call it viewHolder is equal to, we'll cast over to viewHolder, and we'll pass and holder, which is the holder that's passed into it, but as you can see, it is just a wearable list view holder. And we wanna cast it over to the new view holder type that we've made that extends that. And we're just going to say Holder.TextView.setText, and we're going to make this equal to the items.get and we'll pass in the position. So it'll just take the text from our data and bind that to the view that we're going to use for our list. Finally we're just going to say ViewHolder.ItemView.setTag and then we're gonna pass in the position. So we'll save that and this is pretty much all done here. Just go ahead and close this. We do need to create that layout file. So we'll go to the wear module, source, main, res, and layout. We'll go to New, we'll create a new layout resource file, and we'll call this view_list_item, and this will create a generic type forcer right now. We're also gonna wanna create a new java layout file here. So, back in the wear module, source, main, java, and our package. Let's create a new package, and we'll just call it views. And within that, let's create a new class and we'll call this wearable list item layout and it'll extend a linear layout. You can use any view group. I'm just gonna use linear layout cuz it's pretty straightforward. Let's go ahead and click on the red light bulb and create our constructors. So let's bring in the top three and let's go ahead and add in a text view here, so we'll say private TextView mText. We'll import TextView, and we're gonna override one more method here. We'll go with on finishInflate. mText is equal to (TextView) findViewById( R.id.text ). Now, let's go ahead and import R. When this is inflated in an XML layout file, it'll look for the first child object that it has with the id of text, and cast it to a TextView and save a reference to it. So earlier I mentioned that there's the OnCenterProximityListener associated with the WearableListView. We're gonna listen for those callbacks in this class. So let's go ahead and just go up to the top here where it says extends LinearLayout and we'll use Implements, OnCenterProximityListener, and we'll go ahead and hit the red lightbulb. We'll implement those methods, and we're going to use OnCenterPosition and OnNonCenterPosition. So OnCenterPosition is called on this layout as soon as it becomes the center item on the screen. And OnNonCenterPosition is called as it leaves the center position. So what we're going to do here is we're gonna say if mText is not equal to null, we'll say m text dot set text color. Will be get resources dot get color and we'll go with android.r.color.black. So, as soon as the item becomes the center item, we'll change the text code to black. And then on the non-position callback, we'll say if mText is not equal to null. mText.setTextColor Getresources.getcolor and we'll say android.r.color.darkergrey. So all the items will be grey unless they are in the very middle of the screen and then they'll actually have black text. So let's go ahead and close this and then for our view_list_item.xml file Instead of using a linear layout, we're going to us our item that extended the linear layout. So we'll have calm.testplus.helloworld, or which ever packaging that you end up using for your projects, .views.wearablelistitemlayout. And then within that, we're gonna add in a new text view. With a match parent width, a wrap content height, we'll give this an id of tet. So we'll be found by our wearable list item layout as well as our wearable list view. And let's just go ahead and give this a tet size of 16 sp. And while we are in this file, let's just go ahead and also add in a Gravity of center vertical. So now that we have that all set, let's go ahead and close view list item. Let's go ahead and close our cradle file. We'll come back to main activity. And what we're gonna do is uncrate. We're gonna say WearableListAdapter. We'll just call it adapter is equal to new WearableListAdapter from our main activity version of it. And then we'll say adapter.addItem, we'll just say item 1. And we'll do the same thing for a few items to add content here. So we'll say 4, 3, and 2. So there will be four items in here, and we'll have mListView.setAdapter. We'll add an adapter, and then we should be all set. So let's go ahead and run this. You can launch your emulator, if it's not already started up. So we'll just go ahead and launch our round emulator. Hit OK, and we'll wait for this to boot up. And now you can see that we have our Item 2 here, Item 3, Item 4. And as it centers on these items, it's actually turning the text black on a black background. So let's go back to activity_main.xml. And let's just set this so that the box inset layout here has a background of @android:color/white. So we'll hit run again, we'll hit OK, we'll come back to our emulator, and you'll notice the center item is now black with the items below it set to gray and the color does change as you scroll through this list. So, now if we click on these items nothing actually happens yet. So lets come back to main activity and next to where it says extend activity we're going to implement a wearablelistview.clicklistener. And we're gonna go ahead and click on the the red light bulb. We'll implement methods. And let's just go ahead and bring in onClick and ontopemptyregionClick. We're gonna not do anything in ontopemptyregionClick, so we'll just say no op with a little comment there for ourselves in the future. So if we forget why that's there, and then in OnClick, we're going to say, toast.maketext, pass in the 'this' keyword, to get the context in there, and then we're going to use textview.viewholder.itemview. FindViewByID R.OD.text. And we'll use .gettext, and we're gonna say Toast.LENGTH.SHORT and show. And then here in create, we just need to say mLISTview, setClickListener. To this so that this onClickListener will be registered with the list view. And then since we're adding in our items like this, let's actually change it over so that we're using a string resource file. So let's come back down to our module package. src > main > res > values. Let's add a new file in here. And we'll call this one string arrays. And in string arrays we're going to go ahead and expand this resources area and we're going to make a new string array, and we'll call it list items. And we're going to add new set of items. So use item, let's say item one. And we'll do the same thing with 2, 3, 4, 5 and 6. 6, 5, 4, 3 and 2. And if you come back to main activity, in the onCreate area, we're going to expand out this string array and add all of those items to our adapter. So we'll get rid of these add item lines. And we're gonna use string[] items = getresources.getstringarray r.array.listitems. And then we will use adapter.setItems which we created earlier, and it's expecting a list of string items. So we're gonna use new ArrayList arrays.asList and then we're gonna pass in items. Let's go ahead and import Arrays, and that should take our items from one to six, and place them into our adapter. So if we go ahead and hit Run, we'll hit OK, and we'll come back to our emulator. We have our items and you'll see that we actually have five and six, which, when we were manually adding them in, these didn't exist. This is only a part of our string array. And if we click on these, we'll see a toast that says item five, because we clicked on item five, whereas if we scroll up to item one and we click, we'll see item one. So yeah, that is it for the wearable list for now. In the next lesson, we will start getting into some more native components for Android Ware and the different views you can use for the applications that will run directly from the watch. So I will see you in the next lesson.