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