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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up