Weather Icon4:36 with Ken Alger
We have a little more clean-up to do to finish displaying all the data, including resetting those placeholder values we used when designing our interface.
We've seen how useful the data binding library can be 0:00 with connecting our data with our views. 0:03 There's a little bit of work involved, but nothing too horrible. 0:05 Let's take a look at getting the weather icon to change as well. 0:09 For this, I wanna go back to the find view by id method for a couple of reasons. 0:13 One, as a reminder of another way to achieve data binding. 0:18 Second, to show a bit of a gotcha 0:22 that you might run into if you're using that method. 0:25 Let's start with the declaring a new variable. 0:28 We'll call it icon image view. 0:30 Come in here. 0:33 Image view, icon image view. 0:38 Accept our imports. 0:43 Then down in on create we can initialize it. 0:46 IconImageView, find view by ID, and it is the icon image view. 0:52 This should look pretty familiar from previous projects. 1:02 Now in on response, after we get our data, 1:05 we want to set our icon. 1:11 We can do that with the set image drawable method. 1:14 Icon image view. 1:19 Set image drawable. 1:20 This takes a drawable object as an argument. 1:24 So let's pass that in and then we'll define it on the line above. 1:28 We'll call it drawable. 1:31 Above here then let's define and set this new variable. 1:35 So I've typed drawable. 1:39 We called it drawable. 1:41 What do we want to set this too? 1:45 Since we have a drawable resource id in our data model, 1:47 we can get to it like this. 1:50 Get resources, get drawable, 1:52 display weather and to get icon id. 1:56 I'm using display weather here, 2:03 just in case we decide somewhere along the line to do something to current weather. 2:05 We want our weather icon to match what is being displayed. 2:09 It's all we need for our icon to be updated. 2:13 Let's run it and try it out. 2:15 And just like I thought, we hit the gotcha that I mentioned earlier. 2:21 Let's go look in Logcat. 2:25 We get a CalledFromWrongThreadException error. 2:33 It says, 2:37 only the original thread that created a view hierarchy can touch its views. 2:38 Sure enough, the air says that our call to set image drawable is the culprit. 2:43 So what's going on? 2:48 Remember from a while back we talked about how running a background process needs to 2:50 communicate back to the main UI thread? 2:55 Well, we're almost there. 2:58 But we need to do one more thing to merge back into the main flow. 3:00 It may seem like we're back to normal because we're currently logging 3:04 the weather data. 3:07 But that's still happening in the background. 3:08 Background threads are allowed to write to the log. 3:10 But as we keep seeing, 3:13 only the main thread is allowed to update the user interface. 3:15 What we need to do is send a message to the main UI thread 3:19 that we have code ready for it. 3:22 We can do this a few ways. 3:24 But we'll use a simple one using a special helper method called runOnUIThread(). 3:26 Notice as well that when we used the data binding library this wasn't an issue. 3:33 That's because of the thread safety built into data binding. 3:38 For now though, let's update our call to set the icon image 3:41 to be inside the run on UI thread method. 3:45 That comes from the activity class. 3:48 Android Studio even has an auto complete help here. 3:51 Reset this. 3:56 Run on UI thread. 4:01 And we can cut and paste this. 4:07 Looks like we need to declare displayWeather as final, 4:15 before we can try it again. 4:17 So we can do final, our errors go away. 4:21 And let's run it and try it again. 4:25 Very nice. 4:31 Our weather icon updates along with the rest of the data, fantastic. 4:32
You need to sign up for Treehouse in order to download course files.Sign up