Preview
Video Player
00:00
00:00
The Foggy Bottom
8:06We can now customize the lower half of our screen to match our mockups.
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 precipValue and
5:47
precipLabel 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