Creating a Custom Layout12:47 with Ken Alger
Creating the layout for the new Activity.
Let's get our hourly forecast activity set up with the RecyclerView. 0:00 First, we can remove these default things that Android Studio provided us. 0:04 We can delete the app bar layout. 0:08 Our floating action button. 0:13 This CoordinatorLayout, we need to convert to a constraint layout. 0:15 Fortunately, Android Studio makes that easy. 0:18 We right click on CoordinatorLayout, 0:21 there is a Convert CoordinatorLayout to ConstraintLayout. 0:23 Accept the defaults and hit OK. 0:28 Great. 0:33 Now we need to add a RecyclerView, we'll grab a RecyclerView, pull it in here. 0:33 And we want to constrain it to the left, right, 0:38 top, and bottom so that it fills our entire view. 0:44 With our RecyclerView defined, 0:50 we need to create another layout that defines the single row layout. 0:52 The single row will then be referenced inside our adapter. 0:56 We go to res and layout. 1:00 Right click, New, XML, Layout File. 1:02 We'll call it hourly_list_item. 1:09 We want this to be a RelativeLayout. 1:13 And hit finish. 1:19 In the text view, we need to add the layout tags and 1:24 move the XML doc information to utilize Android's data binding library. 1:27 Go over to the text view. 1:32 We want layout. 1:35 Cut and paste that closing tag. 1:43 Let's indent RelativeLayout to make it a little bit easier to read and 1:46 we'll grab this xml name space tag, cut that and move it up here to layout. 1:51 And our closing tag. 1:59 And we need another tag in here. 2:02 Namespace, we want our app one, we want the res-auto. 2:07 Let's update our relative layout setting while we're here, as well, 2:15 to define what we need here inside the XML. 2:19 Now, we could do it in the design view, as well, but since we're here it 2:22 will save us some scrolling around inside the design interface. 2:26 So RelativeLayout, we want it to give it an id. 2:32 Give it an id of hourlyListView. 2:38 We want the height to be wrap_content. 2:47 We'll add some padding to the bottom and top, as well. 2:53 Padding top We'll be 8dp. 3:01 And we'll do 8dp on the bottom. 3:11 Here are some tools available for Android for building the design of our project, 3:19 that allows us to better see how things are going to be displayed. 3:23 We can add this to the xml name space. 3:27 So xmlns: tools, 3:33 schema tools. 3:38 And down here we do tools background, we can assign a background color. 3:45 And if we look over in the design, 3:51 we see that a relative layout has a little bit of our background color. 3:54 Alright, let's update our XML here to use the Android Data Binding Library. 3:59 So up here we need some data tags. 4:06 We want a variable. 4:12 We'll call it hour and it will be in stormy weather. 4:14 And we're using hour and our closing tag. 4:21 Now we can add some items for our custom data. 4:26 We're going to show the hour and icon image, the summary and 4:29 the hourly temperature, nice and simple. 4:34 But it's still a good representation of custom data. 4:36 Over in the design view, we can set up how we'll want this to look. 4:40 But we'll come back here to the XML to configure each item. 4:44 Again, just to save some scrolling in the design interface and allow us to cut and 4:48 paste some configurations. 4:52 We'll use the design view quite a bit though 4:55 just to make sure things are looking correct. 4:58 Let's go over to design, we'll add a text view. 5:01 We'll call this time label. 5:08 We'll add an icon ImageView. 5:13 We'll choose partly_cloudy. 5:20 And we'll rename the id iconImageView. 5:26 We want a temperatureLabel, which will be a text view. 5:33 Again, that's temperatureLabel. 5:39 And we'll want a text view for a summary. 5:46 SummaryLabel. 5:53 All right. Let's head back over to the XML. 5:54 Go to text. 5:57 So our layout width for our text view for 6:03 the time label we wanna manually set that to be 80dp. 6:06 Layout_height, wrap_content is fine. 6:13 We wanna set the layout_alignment for 6:16 the ParentLeft to be true, the ParentStart to be true. 6:18 And we want it to center vertically. 6:21 So we have the ParentStart true already. 6:24 Let's change this to ParentLeft. 6:29 We'll add the layout_centerVertical 6:35 To be true, great. 6:41 For our text, we want to use the android data binding library 6:44 syntax here to get our string. 6:49 The value of our hour.time. 6:55 We want our text color, To be our Android system white. 7:01 Forgot the android up here. 7:12 And we want the size here to be 24 SP. 7:19 Now we can also utilize our tools here that we installed. 7:31 Do tools:text="12 PM"/>. 7:34 And we go back over to the design view. 7:43 We see that we have 12 PM as our placeholder. 7:46 This will show up here in our design view, but won't show up in the final app. 7:49 It's very helpful for doing our design work. 7:52 So let's head back over to our XML. 7:57 We'll set up our iconImageView. 8:00 Here for the icon image view, we want the layout width and height to wrap content, 8:07 which they already are. 8:11 That's great. 8:13 We want to center it vertically and to be laid out to the right of and 8:14 end of our time label. 8:18 So we can get rid of these. 8:22 So we want layout_centerVertical to be true. 8:27 Layout_toRightOf, we want the time label. 8:37 And EndOf to be the timeLabel as well. 8:48 And our drawable is partly_cloudy. 8:59 Let's take a look at the design view. 9:01 And that's looking pretty nice, all lined up. 9:07 Head back over here to the XML. 9:11 For the temperature, 9:14 we want to make sure it is aligned on the right side of the relative layout. 9:15 The layout width and height we want wrap_content, that's great. 9:22 We are going to want alignParentEnd to be true. 9:25 Center vertical to be true. 9:29 Aligned parent top to be false. 9:30 And align parent right to be true. 9:33 We'll do align parent top. 9:39 We want that false and alignParentRight to be true. 9:49 For our text we can get rid of our marginEnd. 10:00 Our text, we wanna grab from our android data binding again. 10:06 Which will be the (String.valueOf(hour.temperature). 10:13 And, our color and size are gonna be the same as our time labels, so 10:21 we can cut and paste those. 10:25 Or copy and paste, I mean. 10:28 And let's utilize our tools again. 10:35 And we'll give it a temperature of 100, 10:37 just to make sure everything's lining up inside our design view. 10:41 Let's go take a look. 10:44 And there it is, looking nice. 10:46 Let's go back and finish up our summary. 10:49 For the summary, we want it to be to the right of the icon image view, but 10:53 to the left of the temperature label. 10:57 We'll also want some padding in there, 10:58 we'll change centerInParent to centerVertical. 11:01 We want layout to the right of. 11:11 We want that to be to the right of the icon image view. 11:15 It to be the end of Our iconImageView. 11:23 We'll add our padding, left and right of about 15dp. 11:36 PaddingLeft. 11:43 15 DP. 11:46 PaddingRight. 11:52 15 DP. 11:54 Our text will grab from our summary. 12:00 So it will be the string valueOf hour.summary. 12:04 Our color and size again we can grab, copy and paste. 12:14 And we'll use our tools to define some default text. 12:25 And since we're using the Partly cloudy icon, we'll say that it is Partly cloudy. 12:29 Let's go back over to do the design view. 12:38 And there it is. 12:40 Nice. 12:41 Let's take a short break and come back and talk about the concept of adapters and 12:42 view holders. 12:47
You need to sign up for Treehouse in order to download course files.Sign up