We're in a Bind

[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