We're off to an excellent start on our app layout.

We'll finish up the top portion here shortly, but

next, let's tackle the lower half of the layout.

Okay, Foggy Bottom, typically refers to an area of Washington, DC, and

not of the San Francisco Bay, and where Alcatraz island is.

But, they can both be pretty foggy.

And we're working on the bottom portion of our layout.

So we'll call this, the foggy bottom portion of our layout.

There's several things going on down here in the bottom of our layout,

the humidity and rain values, being the largest portion of our work ahead here.

We want the labels for these fields to be centered together,

in the middle of the screen, and the values to be centered on the labels.

Since we have two fields here, we're going to want to split this into three parts,

and center each field at 33 and 66%, making them evenly spaced.

Okay, it looks like I've forgotten to get rid of the text view with

hello world in it.

We can delete that now.

All right, constraint layout has a useful feature to specify exactly where we want

to constrain something to.

Guidelines, let's add two guidelines to our layout

that we can use to center our humidity, and precipitation information to.

Well, add a vertical guideline?

Once we add the guideline,

we can click at the top to cycle through the different modes.

Here's percent.

We want 33, and we'll do the same at line two.

We want 66.

Sometimes this can be touchy.

If you can't get your guidelines to be set right at these numbers,

head into the xml editor, and look at the guideline elements.

There is an app layout constraint guide percent property,

and you can manually enter the value there.

Okay, back to the graphical layout.

We'll need to add a few more text views in here.

Let's add them to the layout, and come back, and

deal with all of the constraints.

First, let's add one for the humidity label.

Change the ID to humidity label.

Our text will be humidity.

Our text color, We'll set that to half white.

And we can keep the text size as the default 14sp,

we'll add one here for our humidity value.

While we're here, we'll set the text color to be full white,

full Android color white.

We'll set the text size to be 24sp.

Let's go up.

Our default text, it'll be 0.88, which will be nice and wide.

This will be humidity value for the ID.

We follow a similar pattern for our precipitation values.

We'll drag a text view down here.

We'll call it precipLabel.

Our text will be rain snow, with a question mark.

Our text color, again, will be the half white.

And we can use the default, size, put one in here.

Text color for this one, is the Android white.

24sp, For

our default text, let's use 70%.

And our ID will be PrecipValue.

With those in place, let's set our constraint.

As a reminder, our goal here is to have our labels centered on our guidelines, and

the values, centered on their respective labels.

Our labels should be constrained to our temperature value, as well.

So that we can set some margin on them to match our market.

Let us start here with our humidity label.

Let's create a top connection and attach it to the bottom of the temperature value.

The left and right connections will constrain to our 33% guidelines.

The humidity value is similar, and actually, let's zoom in a little bit here.

Humidity value, we want the top connection here

to be connected to the bottom of the humidity label.

Now, to center the value with the label, we connect the right and left with, yep,

you guessed it, the right and left.

Fantastic, let's do the same thing for the preset value and

preset label views, but on the 66% guideline.

Let's add a little bit more padding to our value labels.

Like I mentioned earlier, to get it more in line with our mock up,

15dp for each should do it.

Put here, padding, top padding, 15dp,

And RAINSNOW, top, 15dp.

And zoom out a little bit.

This is looking great.

Let's add in another text view for our summary.

Summary will go down here.

We'll give it an ID of summary value.

We'll constrain in to the bottom of the precipValue text view.

The humidity value would work as well, I just chose precipValue,

because that's what I chose, left and right, we want it centered so

we can constrained it to the left and right edges.

We'll set the text color to white.

Text color, we'll choose the Android white.

Text size, we'll do 18 dp.

And we'll set the default text, To

stormy with a chance, Of meatballs.

All right, there is just one more piece to add to the bottom part of our layout, and

it's an important one.

Let's add that in when we get back together.