(bright techno music)
(keyboard clacking)
Alright, so continuing on now,
we need to add our TextView to our layout.
Now, the TextView goes below the Plain Text widget,
and let's go ahead and do that.
So TextView, I'm gonna put it directly below.
Now, this should have constraints
to the left and right edges of the screen.
So let's go ahead and do that.
So you can see that the left constraints
have been added for me automatically.
So I'm gonna add a constraint
to the right edge of the screen as well for it.
Now we're also going to constrain its top
to the bottom of the Plain Text widget,
and then the bottom to the bottom edge of the layout.
So let's go ahead and do that.
And by the way, autoconnect
probably won't create the right and bottom constraints.
It hasn't in my case
so we're gonna be doing that manually,
and that will probably be the case for you as well.
So I'll start off with the top constraint.
We'll constrain it to the plain text
and the bottom constraint
to the bottom of the layout, like so.
Now, we wanna fill what's left of the screen,
so the horizontal and vertical sizes for this TextView
should both be set to match_constraint.
Now, I'm gonna go back to our normal view of attributes
instead of the extended view.
And you've seen me do this before,
but we can change these here.
You can just click on match_constraint and do it that way.
Or we could've gone up and actually clicked on the button,
the inner lines, as we've done,
or we could've clicked on the inner lines up here
to achieve the same thing as well.
Now, you can see here that we also wanna check the margins.
The margins are set correctly to 16 for top, left,
right and bottom.
And, by the way, it might seem quicker to set all
rather than each one separately,
but don't do that, at the moment anyway.
There's a great way to fall foul of the bug
I've just mentioned in the previous video,
because right and start won't be explicitly set.
So to see what I mean,
I'm going to come back over,
go back into the extended attributes again.
And if we look in our margins, layout_margin again,
there's this option that I'm talking about, as setting all,
so we'll do that and I'll show you what I mean.
So we're gonna click on that and type in 16dp.
Press enter.
And you can see that right and start
weren't actually updated.
So everything's still looking okay though.
But if I go back to our normal attributes,
and then if I change the left margin to 8dp,
you can see that the margin was immediately set back to 16.
We can try it again.
Now it may or may not be changed immediately
like it is for me here,
but if you click on another control,
and then go back to the TextView again,
more than likely you'll find that it will have changed
back to the original value, 16 in this case, by doing that.
In other words, it gets reset back to 16dp again.
So the better way of doing it is to go back into
the extended attributes again and have a look.
And you can still see here that we've got the
bottom, end, left and top set but right and start
aren't set to anything.
And you might find that things work slightly differently
for you, and again this is probably partially
due to the fact that we can't really run,
in these videos, a preview version of Android Studio.
So it's a bit annoying and hopefully they'll get it fixed
at some point, but at least you're now saved
from the frustration of working out what's going on,
and you can just set the margins in here.
So, I'm gonna change all of these back now to 16dp.
And that should cure things
and there won't be any problems later on
now because of that.
Alright, go back to our normal attributes now.
Alright now for our TextView,
we don't want the widget to be centred.
It should start at the top of the screen,
and then the text should flow down from there as necessary.
So we're gonna drag both the horizontal and vertical sliders
to left, so first one top for vertical
and then left for horizontal, to achieve that.
And we've got this bug here
that will pop up from time to time
and it won't allow me to change the bias,
horizontal bias to zero.
But we'll leave that as it is for now anyway,
one of those bugs that we hope will get fixed soon,
by Google.
Alright, now we need to check the margins,
which we've done, to make sure that both sets,
left and right,
left and start and right and end were all set to 16dp.
Now you saw me set those just a minute or so ago
in this video, so we know that they're correct.
So that's almost it at this point.
The only other thing we want to do
is make the TextView to be scrollable.
So what we need to do is expand the property pane,
and we need to go down to scrollbars.
And we're gonna set the scrollbars to vertical,
and then we want to set the scrollIndicators
to right and end.
So scrollbars first, to vertical.
As you can see, that's been set now,
and then scrollIndicators,
we want to set those to right and end,
like so.
Alright, so at this point we can now run the app
and although it doesn't do a lot,
we should find that it does display correctly,
hopefully, in both portrait and landscape.
Alright, so let's try running the app now.
And obviously, at this point in time,
the app's not gonna do a lot.
But we can hopefully determine that it does look okay
in both portrait and landscape.
Alright, so there's our app in portrait mode,
and if I go into landscape mode,
and just click on Done there,
so we can see what it looks like,
you can see that it's looking okay
in both portrait and landscape.
So I'll just return that back to portrait mode.
That's working well.
Alright, so there's one final change that we want to make,
and that's to the IDs that are used for the widgets.
If I go back to the Button.
Click on the Button over here, back in the blueprint,
and we want to have a look over in the inspector.
I'm just gonna go back to our normal attributes.
We can see here that the button's been given an ID.
In this case, the ID is button2.
And it may have a number at the end or it may not -
you might just have the ID button there.
Android Studio generates IDs automatically,
and uses the type of the widget and a number,
if there's more than one,
or if you've deleted one and added another.
Now, that's not often the best name
to use for things though,
so throughout the course we're gonna change
these IDs that are given to the widgets automatically.
Now, for this example, button is an acceptable ID,
because we really only have one of each kind
of a widget in this layout,
and it will be useful to easily tell
which one is which while we're learning.
Now there's no need to have the number at the end though,
if there is one, as there is in my case,
so I'm going to go through each widget
and look for a number, and
if there's a number there I'm gonna remove it.
So in this case I'm gonna just change
button2 to button, and press Enter.
Now you may get this prompt, that you can see
on the screen there now,
asking if you want to Update usages as well.
Now clicking yes to that
will make sure that anything relating or referring
to the ID, will also be updated.
Now it's very rare that you won't want to do that,
so I'm gonna click on Yes.
And in fact, we'll look at one reason
why you may want to answer no, later in the course.
So I'm gonna click on Yes to that.
I'm gonna do the same for the two other widgets.
I'm gonna do the editText.
It's been labelled as editText2
so let's delete the 2 on the end of that.
Press Enter, and click on Yes,
or click Yes, and likewise for the textView,
textView2, so we'll get rid of the number on the end.
Press Enter.
Now that one hasn't actually asked us to update,
so that's fine.
Alright, so we've done that,
but you might be wondering now what is this ID?
Well, when we come to writing code
to get the button to do something,
we're gonna have to refer to the various widgets.
Now it's this ID that we use,
so that Android knows which one
we're referring to in the code.
So as you saw, I made sure that the IDs
of the editText and textView widgets
are set to editText and textView respectively,
and obviously button as well.
So let's actually go and have a look
at the XML code for this layout.
Now to see the XML code,
go over here to the Text tab,
and click on that.
Now you can see here that it appears
in an XML Android ID attribute.
That's over here for Button, and one for EditText,
and there's also one for the TextView as well.
So looking at the Button,
we can see that android:id,
the value for the button widget is
the ampersand + id slash and then button.
And I'm looking at the code on line 13.
Now you'll see the use of the @ symbol a lot
when referring to resources,
and it's just the syntax that Android uses,
to refer to a resource that's stored in the res folder.
Although some resources are part of the Android SDK as well,
Android SDK 2.
Now ampersand + ID just means that whatever follows
is an ID, rather than any other type of resource.
Well actually, it means a bit more than that.
The @id would mean that it was an ID,
but the plus tells Android that it doesn't already exist,
and that this is the resource that defines it.
So Android Studio will automatically
make sure that the ID button, in this case,
appears in the relevant file so that it can be found.
And the same goes for the other two widgets
that we've got in our layout;
the EditText and the TextView.
And you can see in the XML
how the IDs are used in the constraints.
So the button is constrained to the top of something,
with the ID parent.
You can see constraintTop_toTopOf,
here on line 20, I'm looking at.
Now although that used to be the name of the layout,
activity_main in this case.
Now the EditText widget,
if we go down and have a look at that,
that's got a constraint, layout constraintLeft_toLeftOf,
as you can see of,
as you can see there on line 35,
or maybe End_toStartOf as well.
And that refers to the ID button.
You can see here on line 34,
Ampersand + id/button.
So the right edge is constrained
to the very left of the button.
Now there's a bit of inconsistency here,
and the constraint attribute might be
layout_constraintEnd_toStartOf
as it is in my particular case.
It doesn't matter which and there's no need
to duplicate these lines as we did for the margins.
Now if you're wondering why it's not necessary here,
there were no constraints in earlier Android versions,
so they weren't expecting any attributes.
So the ConstraintLayout's been added
to the older Android versions and works with either
left/right or start/end.
Now, don't worry if that doesn't make much sense.
We're gonna be seeing it in use soon
and it should become much clearer.
There's also no need to change the XML directly,
as everything can be done from the designer now.
Now, you may or may not see this on your screen,
but I've actually got some warnings in the XML
for the Button and the TextView.
Android Studio's complaining about layout_marginRight
being redundant, because we've already specified
layout_marginEnd and we're targeting API 17.
So I can just hover over this,
and then hover over a particular line there.
And it's giving you a
little bit of information about that.
So that's true actually,
because using right is only necessary
for API 16 and earlier,
but if that's the case,
why don't we get the same warning
for the duplicated settings in the EditText?
That's a little bit inconsistent at the moment
and as I said, that's the nature of bugs.
That's not something we really need to worry about
at this point in the course.
Alright, now before I finish in the XML view,
I'm gonna go up to the code menu,
and I'm gonna choose on Reformat Code,
or select rather, Reformat Code.
And I didn't get anything changed,
because it says the code's already properly formatted,
but you may or may not get that.
Now, that option obviously reformats code,
based on the name.
And it uses standard indenting
and it also sorts the various XML attributes,
so that for example, the ID appears first.
So I'm gonna be reformatting the code
at the end of all the early videos,
because it'll make it much easier for you
to compare your code with mine.
And we'll talk a bit more about that later
when I show you how you can get Android Studio
to help you check your code.
Alright, so let's finish the video here.
In the next video we're gonna start writing code
to add some functionality to our design.
So I'll see you in the next video.