Clicking a List Item4:19 with Ben Deitch
In this video we'll see what it takes to click an individual list item in a widget!
We just left off with seeing our list on the widget for the very first time, but 0:00 somehow we've lost the ability to change colors along the way. 0:05 Let's get back to our widgetProvider and see what we can do about it. 0:08 The first thing we need to realize is that now, when we tap on our widget, 0:12 we're tapping on one of the list items, not on our frame layout. 0:16 So it kinda makes sense that we wouldn't be getting on click events from our 0:20 frame layout. 0:24 To fix this instead of adding an on click listener to our frame layout, 0:25 we just need to add a click listener to each of our list items. 0:29 How this works is that instead of setting a pending intent, 0:33 we set a pending intent template. 0:37 Then when we create each individual list item, 0:39 we fill in the template to have the right information. 0:42 So, let's replace setOnClickPendingIntent with setPendingIntentTemplate. 0:46 And then, instead of passing in our frameLayout, 0:53 let's pass in our list view, which is R.id.listView. 0:57 Nice, now over in WidgetAdapter we just need to fill in the template 1:01 with an intent containing the information we'd like to pass along. 1:06 Down in the getViewAt method, let's add some space above the return statement and 1:11 then we need to call the setOnClickFillInIntent method on our 1:16 remote view. 1:20 So let's type remoteViews.setOnClickFillInIntent, and 1:20 then we need to pass in the viewId of our list item and 1:25 an intent containing any data we'd like to pass along. 1:29 So, for our list item, let's pass in R.id.list_item and 1:34 then let's just pass in an empty intent for now, new Intent and that should do it. 1:39 Let's run the app and see if we've got our colors back. 1:47 And again we might need to drag out some new instances of our widget. 1:51 Nice, let me get out a second one, though. 2:06 Okay, so now when I click on the widget, they change colors. 2:15 We've got blue and pink and blue again and red and they still scroll. 2:19 How nice of them all to show up but it's a bit early to start partying. 2:25 We still can't tell which list item was clicked, and that's kind of important for 2:30 a list widget. 2:35 To do that, we're going to make it so that when we click on an item, not only does 2:35 the background change, but it will also show a toast containing a list item. 2:40 Let's start back in the WidgetAdapter and 2:44 this time, instead of passing in an empty intent, 2:47 let's pass in an intent which contains the list item we put in the text view. 2:50 First, let's pull out new Intent into a variable. 2:55 Intent, which we'll call intent and set it equal to what we just pulled out. 3:01 And now we just need to add our list item to our intent as an extra, but 3:06 before we do that, we're going to need a key to represent our list item. 3:10 Over in WidgetProvider, at the top of the class, 3:14 let's create a new public static final string 3:20 which is psfs and let's call it KEY_ITEM. 3:25 And let's set it equal to your package name, for 3:29 me it's com.teamtreehouse.listwidget followed by a KEY_ITEM. 3:34 And back in WidgetAdapter, let's add our list item to our intent. 3:42 So intent.putExtra and for 3:48 the name let's pass in our key WidgetProvider.KEY_ITEM and 3:50 then pass in the value, which is our list at index position. 3:56 Last but not least, 4:05 we just need to pass back in our intent to the setOnClickFillInIntent method. 4:06 That takes care of sending out the data, now we just need to receive it and 4:12 send out our toast, which we'll handle and the next video. 4:16
You need to sign up for Treehouse in order to download course files.Sign up