Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
We 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 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
You need to sign up for Treehouse in order to download course files.
Sign up