Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Using the Android Data Binding Library to connect our data to our user interface.
[MUSIC]
0:00
[SOUND] Welcome back.
0:01
When we last visited Stormy, it was
looking great with its amazing interface.
0:05
But behind the scenes, I think it was
still feeling a bit under the weather.
0:11
Because it still can't
use the data we worked so
0:15
hard to get from the Dark Sky API.
0:18
Thinking back to our MVC design,
where should we wire all of this together?
0:21
That's right, the controller, which for
this project is our main activity.
0:26
Let's use Android's data binding library
to help us connect our data to our view,
0:32
and do so in an efficient manner.
0:37
This library allows us to reduce
the boilerplate code we have seen in other
0:41
projects with member variable,
decorations, and using find view by ID.
0:46
We can bind our layout, and
logic together in a flexible manner.
0:51
There's one thing I definitely like
to mention here before we see this in
0:55
action though.
1:00
While using the data binding
library is efficient,
1:01
it is just one approach to connect
data from a model to a view.
1:04
Please don't think of this as
the way to do these tasks, but
1:09
simply a way to do them.
1:12
With that in mind, let's get started.
1:15
As I mentioned, with the Android data
binding library, we don't need to go
1:18
through the member variable creation,
and find view by ID process.
1:22
Let's have a look at the documentation to
see what it says about how to get set up.
1:27
Looks like we need to enable data
binding in our build environment.
1:31
And then we need to make some changes
to our layout file a little bit.
1:39
And then we can bind our data to our view.
1:48
Should be relatively straightforward.
1:51
Let's head into Android Studio,
and make these changes.
1:53
First, we need to head into our
apps build.gradle་file, and
1:59
enable data binding.
2:03
So here in the Android section,
2:09
we need to add dataBinding,
2:14
enabled = true.
2:21
Since we made a change to the gradle file,
we need to re-sync.
2:26
The next step is to go into the XML file
for the activity, and make a few changes.
2:32
We'll go here into our text.
2:40
Go back up to the top.
2:44
We'll need to add a new level to
our XML hierarchy called layout.
2:46
And we'll add a new data element.
2:50
Android uses this layout
to generate a binding class
2:52
where all the bindings from
the layout properties are held.
2:56
Let's get our XML set up, and
then we'll talk about what's going on.
2:59
So we'll need to add a new tag, Of layout.
3:02
Up here at the top.
3:10
We'll cut and paste the closing one.
3:13
And put it down at the bottom.
3:19
And then we need to cut and
3:22
paste our XML namespace information
into the opening layout tag.
3:23
So we go back up here to the top.
3:29
We want cut that.
3:34
And paste it in there.
3:41
Great, now we're back to
a valid XML document.
3:43
One other area needs to be added
here to allow us access to our data.
3:47
It's actually called a data element,
and that's easy to remember.
3:51
So we'll add a data element.
3:55
Inside our data tags,
we want to define a variable.
4:00
Which, according to the documentation,
4:02
describes a property that may
be used within this layout.
4:05
So we'll do variable.
4:08
Since we're working with weather,
let's name it weather.
4:12
And we want to assign it a type
of our current weather, and
4:19
we use the package name to get to that.
4:22
So type
com.teamtreehouse.stormy.CurrentWeather.
4:25
Terrific.
4:36
So what's going on here?
4:38
Well, the Android data binding library
is going to generate a binding class for
4:40
us based on this information.
4:45
The name of the generated class is
based on the name of the layout file.
4:48
The name is then converted to Pascal case.
4:52
Meaning the first letter of all
the words are uppercased, and
4:54
adding the word binding as a suffix.
4:58
In our case here,
our layout is called activity_main.xml.
5:01
So the class generated by data
binding is called ActivityMainBinding.
5:07
We can use this over a main activity
to connect our data to our view.
5:13
Before we do that, let's use our newly
bound data to set one value in the layout.
5:18
Let's look for our summary text view.
5:23
timeValue, locationValue.
5:24
SummaryValue.
5:32
Here it is with our default value of
Stormy with a chance of meatballs.
5:35
We want to update that to use our data.
5:40
To access our data, we use the @ symbol,
followed by a pair of curly braces.
5:42
Inside the curly braces,
5:48
we use the variable name we assigned
in the data element up at the top.
5:50
Then a period, and
then the data point we want to use.
5:55
So in this case, here for
Android text, we would type @,
5:58
the curly braces,
our variable name was weather,
6:04
and our element is summary.
6:09
Okay, I don't want to
leave you in a bind but
6:12
before we change all of these values,
we need to update our data model slightly.
6:15
And then we need to go into main activity
to set all this up programmatically.
6:22
We'll do that next.
6:26
You need to sign up for Treehouse in order to download course files.
Sign up