The Foggy Bottom

We're off to an excellent start on our app layout. 0:00 We'll finish up the top portion here shortly, but 0:03 next, let's tackle the lower half of the layout. 0:06 Okay, Foggy Bottom, typically refers to an area of Washington, DC, and 0:09 not of the San Francisco Bay, and where Alcatraz island is. 0:14 But, they can both be pretty foggy. 0:18 And we're working on the bottom portion of our layout. 0:20 So we'll call this, the foggy bottom portion of our layout. 0:23 There's several things going on down here in the bottom of our layout, 0:27 the humidity and rain values, being the largest portion of our work ahead here. 0:30 We want the labels for these fields to be centered together, 0:35 in the middle of the screen, and the values to be centered on the labels. 0:39 Since we have two fields here, we're going to want to split this into three parts, 0:43 and center each field at 33 and 66%, making them evenly spaced. 0:48 Okay, it looks like I've forgotten to get rid of the text view with 0:56 hello world in it. 1:00 We can delete that now. 1:01 All right, constraint layout has a useful feature to specify exactly where we want 1:06 to constrain something to. 1:10 Guidelines, let's add two guidelines to our layout 1:13 that we can use to center our humidity, and precipitation information to. 1:16 Well, add a vertical guideline? 1:21 Once we add the guideline, 1:25 we can click at the top to cycle through the different modes. 1:26 Here's percent. 1:30 We want 33, and we'll do the same at line two. 1:35 We want 66. 1:45 Sometimes this can be touchy. 1:48 If you can't get your guidelines to be set right at these numbers, 1:50 head into the xml editor, and look at the guideline elements. 1:53 There is an app layout constraint guide percent property, 1:59 and you can manually enter the value there. 2:02 Okay, back to the graphical layout. 2:05 We'll need to add a few more text views in here. 2:09 Let's add them to the layout, and come back, and 2:11 deal with all of the constraints. 2:14 First, let's add one for the humidity label. 2:16 Change the ID to humidity label. 2:22 Our text will be humidity. 2:28 Our text color, We'll set that to half white. 2:34 And we can keep the text size as the default 14sp, 2:47 we'll add one here for our humidity value. 2:52 While we're here, we'll set the text color to be full white, 2:56 full Android color white. 3:00 We'll set the text size to be 24sp. 3:06 Let's go up. 3:15 Our default text, it'll be 0.88, which will be nice and wide. 3:19 This will be humidity value for the ID. 3:26 We follow a similar pattern for our precipitation values. 3:29 We'll drag a text view down here. 3:33 We'll call it precipLabel. 3:38 Our text will be rain snow, with a question mark. 3:43 Our text color, again, will be the half white. 3:51 And we can use the default, size, put one in here. 4:01 Text color for this one, is the Android white. 4:08 24sp, For 4:17 our default text, let's use 70%. 4:25 And our ID will be PrecipValue. 4:31 With those in place, let's set our constraint. 4:36 As a reminder, our goal here is to have our labels centered on our guidelines, and 4:40 the values, centered on their respective labels. 4:44 Our labels should be constrained to our temperature value, as well. 4:48 So that we can set some margin on them to match our market. 4:51 Let us start here with our humidity label. 4:55 Let's create a top connection and attach it to the bottom of the temperature value. 4:58 The left and right connections will constrain to our 33% guidelines. 5:06 The humidity value is similar, and actually, let's zoom in a little bit here. 5:19 Humidity value, we want the top connection here 5:25 to be connected to the bottom of the humidity label. 5:29 Now, to center the value with the label, we connect the right and left with, yep, 5:34 you guessed it, the right and left. 5:39 Fantastic, let's do the same thing for the preset value and 5:47 preset label views, but on the 66% guideline. 5:51 Let's add a little bit more padding to our value labels. 6:09 Like I mentioned earlier, to get it more in line with our mock up, 6:12 15dp for each should do it. 6:16 Put here, padding, top padding, 15dp, 6:20 And RAINSNOW, top, 15dp. 6:28 And zoom out a little bit. 6:35 This is looking great. 6:39 Let's add in another text view for our summary. 6:41 Summary will go down here. 6:45 We'll give it an ID of summary value. 6:49 We'll constrain in to the bottom of the precipValue text view. 6:56 The humidity value would work as well, I just chose precipValue, 7:03 because that's what I chose, left and right, we want it centered so 7:07 we can constrained it to the left and right edges. 7:11 We'll set the text color to white. 7:19 Text color, we'll choose the Android white. 7:30 Text size, we'll do 18 dp. 7:36 And we'll set the default text, To 7:42 stormy with a chance, Of meatballs. 7:48 All right, there is just one more piece to add to the bottom part of our layout, and 7:58 it's an important one. 8:02 Let's add that in when we get back together. 8:04