Preview
Video Player
00:00
00:00
Start at the Center
7:08We are ready to display our data! Using the mockup as our guide, we will start designing the layout for Stormy by anchoring the temperature in the center of the Activity.
[MUSIC]
0:00
We've come a long way
thus far in the course.
0:04
We've seen how to connect our app to
the Internet, handled different network
0:07
errors, and we've learned about,
and how to process JSON data.
0:10
That's a lot.
0:15
You should be proud of
the work you've done so far.
0:16
Next, we need to create our layout and
0:19
connect it to the data we just
created in the current weather class.
0:21
Let's get started with the layout
based on the mock ups provided
0:26
by the amazing Treehouse design team.
0:29
Let's take another look at the mock up for
our app, and
0:33
think about how we should get started.
0:35
First off, we'll set the background color,
then we can start adding additional views.
0:37
Android Studio has provided
us with a constraint layout.
0:42
As you learned in other courses,
constraint layout
0:46
allows you to create large and complex
layouts with a flat view hierarchy.
0:49
We'll start here in the center
with the temperature,
0:55
and work our way around the layout.
0:58
Since the temperature
value is the main feature,
1:01
we want to make sure it's
always in the same place.
1:04
One thing I'd like to stress here,
1:07
laying out views in Android could
be more of an art than a science.
1:09
There are many different ways to lay
out things, some better than others.
1:12
The solution and method we use here
will be helpful in many cases.
1:18
But by no means is it the only
way to complete the layout.
1:23
I highly recommend creating your
own sample layouts for practice.
1:27
So let's get started with
changing the background color.
1:34
If we select a constraint layout,
look at all the attributes,
1:38
Find the background attribute here.
1:45
Here we get the resources
window to open up.
1:49
We want to set a color here
on the left hand side and
1:52
since the color of our
mock-up isn't in here.
1:55
We need to add a new resource,
and new color value.
1:58
Unfortunately, since our mock-up
doesn't live inside Android Studio,
2:05
we can't use this color picker here.
2:09
I'll use an external app
that will allow us to select
2:13
the background color from the mock-up.
2:16
I'll put links to a couple of color picker
options in the teacher's notes as well.
2:19
Okay, so we found our color value and
can now add it to our color resources.
2:23
So, here it is 0073d2.
2:28
So, we come over here,
let's name it appbackground.
2:29
And our hex value is 0073D2.
2:44
Now recall that these
first two characters,
2:50
the FF here adjust
the opacity of the color.
2:53
Since we want this to be the full color,
2:57
we just want to keep
those the way they are.
2:59
So with our color and
our app color name, we can hit OK.
3:02
Great, our app color is in place.
3:08
Let's add a new view for
the temperature to our layout.
3:11
So we'll select Text, in TextView, drag it
down here to put it in about the center.
3:14
Let's change the ID.
3:21
We'll call it temperature value.
3:25
Change the placeholder text to 100.
3:29
We'll just do that for now since it
will give us a nice size to work from.
3:35
Let's go back to all attributes.
3:42
We want to go down to text color.
3:46
Text color.
3:55
We want to color,
we want to choose Android white.
3:57
And we'll change the text size to 150 sp.
4:03
And whoa, our preview really changed.
4:09
I thought we've lined it up
pretty close to the center.
4:12
Yes, we forgot to add
constraints to our text view.
4:15
Let's re-center this,
just make it a little bit easier.
4:18
And add our constraints, so,
the top, we'll go to the top.
4:24
And left and right.
4:31
Very nice, now our temperature
value text view is constrained
4:38
to the center within our layout.
4:42
Next up, let's add the degree symbol.
4:45
That's part of the resources
the design team has provided.
4:48
So we can add an ImageView.
4:52
Add an ImageView.
4:55
Drag it to about there.
4:57
Under Drawable Project, Degree.
5:00
Let's change the ID here
to degree image view.
5:13
And now we need to constrain it
to our temperature text view.
5:20
Recall that we need to set a minimum
of two constraints on views.
5:23
We'll want the top of the degree symbol
5:28
to be constrained to the top
of our temperature value.
5:31
Our other constraint will be the left side
of the degree image with the right side of
5:35
the temperature value.
5:39
With that lined up,
5:46
it looks like we need to push it down from
the top of the temperature value a bit.
5:47
We can do that by adding some margin to
the top, there are two ways to do that.
5:51
Either here in the layout
margin attribute under top.
5:57
So we can add 35dp in here.
6:09
And we see that it moves
the degree image view down a bit.
6:12
We could have also done
this in the view inspector.
6:17
They both accomplish the same thing.
6:22
I find that I just use whichever
interface I have open.
6:24
This is off to a great start.
6:28
Since our app is only designed for
portrait mode, let's head into the Android
6:30
manifest file and make sure that our
activity is set to that orientation..
6:34
So manifests > Android manifest.
6:40
If we look here under application,
6:45
we want android:screenOrientation,
6:50
and we want to set that to portrait.
6:56
With that set, let's take a quick
break before we come back
7:02
to tackle the top portion of our layout.
7:06