-
Title:
Build Layout
-
Description:
-
To build this layout,
I open up the activity_main.xml file.
-
I know that I need a vertical linear
layout to put each of these views
-
in a vertical column.
-
So, I'm going to first change the
relative layout into a linear layout.
-
Immediately, it shows an error saying
that the opening tag does not match
-
the closing tag, so I can just copy
this over and then paste it down here.
-
Now the tags match.
-
Next, I can add in the views.
-
First, I have a quantity text view.
-
So I'm going to take this text view and
then change the text inside to quantity.
-
Next, I have a text view that says zero.
-
So I can copy the first text view and
paste it below it.
-
I'm going to change it so the text says
zero to match the screenshot here.
-
The last child in this
linear layout is a button.
-
We haven't added a button before in our
layout, so let's Google Search that.
-
If you open up a browser you
can search for button android.
-
This first link looks good,
it's a developer.android.com site.
-
And here's the documentation for button,
we can ignore most of this text here.
-
We scroll down to read
the class overview.
-
It talks a little bit about some Java
code, which we haven't learned yet but
-
down here we have some xml for a button.
-
We can copy this and
see what it does in our code.
-
In our layout I'm going to add
a button below these two text views.
-
I'm going to paste the code
from the documentation here.
-
And now instead of the self destruct
string, I'm going to go for
-
something a little
friendlier like order.
-
This last line we can also
delete because we don't need it.
-
Cool, so now you have a quantity text
view, a text view that says zero, and
-
an order button.
-
Let's run it on our app,
to see what it looks like,
-
by hitting the green play button.
-
We can see down here
that it's still building.
-
Oh, this isn't what we wanted.
-
It appears that our linear layout is
actually horizontal instead of vertical.
-
So let's make sure that we add
the orientation attribute.
-
We're going to change this to say
android;orientation="vertical".
-
That should fix the problem.
-
So let's hit run again.
-
Okay, that's better now.
-
The three children are showing
up in a vertical column.
-
Now we just need to
style these fields so
-
they look a little bit more like
the screenshot we were given.
-
From this screenshot we see that
the quantity text view is in all caps.
-
In lesson one we learned about
an attribute called android:textAllCaps,
-
and it's showing up here
in the auto-complete.
-
If it shows up like this,
you can just hit enter and
-
it automatically adds it
in the code here for you.
-
We set that value to be true
because we want it in all caps.
-
The reason why it's better to use
this attribute to capitalize the text
-
is because if we ever want to change the
UI so that quantity is in lower case,
-
like this, all we need to do
is just remove this attribute
-
instead of going and changing this text.
-
Next, for this text here that says zero,
we should use a text size of 16sp.
-
Let me add that now and it shows up
in the auto-complete suggestions so
-
I just hit enter and
then I choose 16sp for the value.
-
We also want it to be
a black font color.
-
I'm going to use the Android
system color for
-
black, which is referred to like this.
-
Cool, that takes care of both
the quantity and the zero text views.
-
The order button is fine as is, it will
automatically capitalize the text for
-
you in a button and the height and
width are wrap content.
-
We do have a need to resolve
this vertical space here.
-
We want 16dp of padding or
margin in between the quantity and
-
the zero text views.
-
We also want also want 16dp of
padding in between the zero and
-
the order button.
-
You can implement this
in many different ways,
-
I'm just going to choose to add it as
layout top margin for this button.
-
And I'm going to add it as a bottom
margin for this quantity text view.
-
Feel free to do it a different
way as long as it looks the same.
-
The reason why I chose to do a bottom
margin and a top margin is because I
-
know that this middle area
here is going to change later.
-
We're going to change it to be
a quantity picker with a plus and
-
minus button, and I still want to have
16dp of space between the quantity
-
title and the picker.
-
Same for the button.
-
Okay, let's run it again
now on our device.
-
Cool, and it looks just like we wanted.
-
The quantity text view is in all caps,
the zero text view is in
-
black font color, size 16sp, and
we have the order button here.
-
We also have 16dp of space
between these views.
-
Good job.
Oh, and I almost forgot.
-
The quiz also asks for what happens
when you click on this button.
-
Well, actually it does nothing,
for now at least.
-
Keep watching to find
out what happens next.