Preview
Video Player
00:00
00:00
Weather Icon
4:36We 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