(upbeat music)
(computer keys clicking)
Alright, so we've still got the image to add
but before doing that,
let's run the programme and see how it behaves.
And that'll also gives us a chance
to see how the layout and the code work together.
Now, what we need to do though,
is make a change to the code,
so expand the project pane if it's not open.
We want to come down here and make sure
that we're in the Java folder,
'cause if you recall, the Java folder contain
the source files, which ultimately contain our code.
So, we wanna open up the package,
in this case, academy.learnprogramming.activity
and there's this main activity.
Now there's only the one class here at this time,
but in more complicated apps,
you'd see that there would be a lot more classes.
So, I'm going to double click that now to open it.
And in main activity, the layout is used
by this setContentView statement on line 10
and that tells the app which layout to use when it runs.
Now, I guess that's a slight oversimplification,
but with only one class it's totally accurate.
So, instead of using R.layout.activity_main,
we need to change that to R.layout.note_layout
to use the layout that we've been working on
and just created in the previous video.
So I'm going to delete that,
and I'll just press the period or dot
and notice when I've done that,
we've automatically got an option here.
Android Studio knows which layouts
are available in your project
and it's suggesting the note layout,
literally as soon as I'd entered that period,
or typed that period.
And sometimes it doesn't do it that quickly.
If you type the first few letters
of the layout you're looking for,
it'll find it in the drop down.
And obviously, using a drop down is more convenient
because it saves typing
but also helps you to guard against typing errors.
So, instead of typing it all out,
I'm just gonna press enter there.
Alright, so that's really the only change
we need to make at this time to the code.
So, we've told the app now which layout to use when it runs.
I'm gonna close down the Kotlin class,
and I'm gonna close the project pane again,
and I'm gonna make sure that note_layout is selected again,
which it is.
And let's just run that,
(computer keys clicking)
to see what it looks like.
(computer keys clicking)
Alright, so there is the app running.
Now, it doesn't look too bad at all,
although I still need to change
the text in the text view in the top right hand corner.
But, there is a problem though,
and it'll become apparent as soon as I start trying
to type something into the edit text.
But first thing, when I click in the edit text,
you can see the on-screen keyboard appears
and things go a bit wrong.
Now, the keyboard is partially obscuring the edit text,
so I can't actually get to the end.
I can try scrolling,
so I'm trying to scroll, simulating like a scroll,
but I can't actually get to the end of the text.
You can see it's sort of just jumping around,
and just generally not quite working correctly,
not really allowing us to get to the end.
Now, this might appear to be two problems
but the cause is the same.
So, I can't scroll the text right to the end
and I also can't add any more text to the end
for that reason.
So I can't get down there to do that, but as it happens,
fixing that issue also prevents the keyboard
from obscuring the edit text widget
and that's really the real cause here.
Now, one thing I want to point out though,
is that I can't give you all the answers.
I can show you a good variety of layouts in this course
but I can't predict every layout
that you want to create in your own apps,
nor how they'll have to interact
with things like the keyboard.
What I will do is try and show you
as many potential problems as I can,
such as this one here,
and we'll also look at different ways to get the same effect
by changing the constraints we use.
But it's important that you really
get the hang of the layout designer yourself
and also important, well it is important,
to think about your layouts not as fixed things
but more as fluid designs that move around
as the user does things on the phone or tablet.
Now, this layout is a great example
of one that looks good in theory
but falls over slightly in practice.
So, let's actually see what we can do about it.
So, I'm just gonna go back into Android Studio now.
Now, I've clicked on editText,
or it was already selected anyway.
One thing to notice here is
that it's set to be centred vertically
in the available space.
Now, that doesn't really make sense here.
It should really always be positioned at the top,
just below the title
and then grade downwards as it needs to.
So, I need to set the vertical bias to zero
and the same's true for the horizontal bias.
Now, it's visually obvious which way you need to go,
so I'm gonna drag the vertical bias to the top,
as I mentioned, and set that to zero
and also, I'm going to drag the horizontal slider
to the left as well, to make that zero.
So, now we've got both the vertical
and horizontal biases set to zero.
Now, we do get questions about what difference this makes
and often it doesn't make any difference.
With less text and the layout_height or layout
_width set to wrap_content,
it will, however, make a difference.
But that's actually got nothing
to do with our problems though.
What we need to do,
is to make the edit text scrollable, vertically.
Now, the edit text could already be scrolled,
but without the scroll bars attribute being set,
the layout doesn't collapse it
out of the way of the keyboard.
So, to turn on the vertical scroll bar,
what we need to do is expand the full set of properties
and we do this by clicking
on these two little arrows up here in the Inspector,
and then we're gonna search through
the largely alphabetical list
until we find the scroll bar setting.
Now, remember that you might need to use this cog over here
to select all attributes.
So, if I click on that, and you might be in that mode there.
So, if you see a mode that looks similar to that
just come back here and click on All attributes table
and you'll get the right view.
Alright, so let's scroll down now
so we can see this scrollable attribute.
And there's scroll bars.
Now, expand that so you can see.
And we want to set that to vertical,
so I wanna click on vertical
and you can see it updates over here now.
Now, we're also going to set the scroll indicators,
that's these a little bit further up, which I'll expand.
Now, we're doing that to provide a visual cue
that the contents are scrollable.
Now, we wanna click over here
or come over here and click on right.
Select that and also end.
And you can see that we've got both selected now.
Now, start and end properties were introduced in API17.
And they're designed to provide the expected behaviour
with languages that are written from right to left,
Arabic and Persian for example.
So, by using start instead of left and end instead of right,
you're allowing your app
to cope with right to left languages.
Now, if you're targeting Android versions prior to API17,
as we are, then you should also set left or right as well,
so that those earlier versions also work.
Now, the scroll indicators provide a visual indication
that a widget can be scrolled
and also indicate how far through the contents
you've already scrolled.
Now, note that they were introduced in API23,
so this setting won't have any effect
on earlier versions of Android.
Alright, so now that we've enabled scrolling,
the edit text widget should be scrollable,
so let's run the app again to test that.
But first I'm gonna change the text in the text view
to constraint layout,
so, I'm just gonna click over here
and I'm gonna close down this mode
and go back to our normal mode.
And let's change the text there
and we'll call it Constraint Layout.
(computer keys clicking)
Now, notice how the width of the edit text changes
and that's because it's constrained
to the right-hand edge of the text view.
And keep in mind also that sometimes
it takes a little while for the blue print to update
after a change like this.
So, that causes the edit text to become narrower
because it's constrained
to the right-hand edge of the text view.
Alright, so let's try running the programme again.
(computer keys clicking)
So, now that I've run it again,
Android Studio's instant run will install the changes
and restart the application.
And that's actually quite a nice feature
that first appeared in Android Studio 1.5.
Now, it could cause a few problems with apps not restarting,
but the bugs seem to have been ironed out now
and it makes the whole process of testing changes
a lot faster than it use to be.
So, you can see here now, we've got a different layout now.
Well, it looks different now
because we've added the scrolling capability
and you can see that the app
is now functioning differently to what it was before.
Firstly, we're now automatically at the bottom.
We can see the bottom of the edit text
and also the keyboard is now not obscuring the text
and I should be able to scroll up and down now.
And you can also see over here, if you look carefully,
the visual representation of us scrolling up
and also where we are in the text.
So, that's all working nicely now.
And again, as you saw, I can get right down
to the bottom as well.
Now, keep in mind as I mentioned, it's scrollable
and you saw that it was scrollable
and the scroll indicators are appearing on the right,
but those scrolling indicators only will appear
on devices running Android Marshmallow or later.
Now, it still can be scrolled in all versions
but it's only the indicators that don't appear.
And again scrolling the text, the edit text,
also fixed the other problem we had
and you can see now that we can scroll right to the end
of the text and I can actually add more,
Tim was here, (computer keys clicking)
if I so desire.
Alight, so there's just the image to add now.
So, what we want to do is go back to Android Studio
and we wanna drag an image view
on to the left of the design, just below the title.
So, we come over here and click on Images, ImageView,
and we're gonna put that just below the title.
I'll put it about there.
And what we wanna do is,
'cause that's come up automatically,
is you wanna select the ball_100x100.
(computer keys clicking) Select that.
Okay.
Now, we wanna constrain the top of the image view
to the bottom of the text view,
so let's do that first.
Now, the left edge of the image view should be constrained
to the left edge of the screen
and the right edge of the image view should be constrained
to the left edge of the edit text widget.
So, let's go ahead and do that.
We can see that in this case,
the left constraint has already been added.
So, if yours hasn't been added, then do that.
But we also want to constrain, as I mentioned,
the right edge of the image view
to the left edge of the edit text.
So, we can go ahead and do that.
Now, the other thing to do is also make sure
that the layout_width is set to match_constraint,
otherwise the image may run off the left edge of the screen.
And you can see, at the moment,
I've got that set to wrap_content,
so, I'm gonna change layout_width
to set to match_constraint.
Alright, so let's actually run the app again
and see how it behaves.
(computer keys clicking)
And you can see that...
I'm just gonna move it over a little bit,
that looks pretty good,
and you can see that we've got our text there.
We can still scroll that up and down.
I can hide the keyboard
and see more of the edit text now,
and that's still looking good.
So let's just move it over to landscape and have a look.
(computer keys clicking)
So we're in the landscape.
And by the way, you should always test your layouts
in both portrait and landscape,
as well as on a range of different devices,
such as a phone and a tablet.
So, you can see that it looks pretty good
in portrait and landscape.
Now, the two buttons on the side of the emulator,
by the way, let you rotate the device,
as you saw me click.
So, I can go back and click it the other way
and go back to portrait again.
And it really makes a great way to easily test layouts
without having to run it on a physical Android device.
Alright, so that's the end
of our introduction to the layout designer
that google had produced for Android Studio.
Now, we've actually covered quite a lot,
including some of the widgets available
and how to place them on the design.
Now, we also saw how to use constraints
to make sure that the widgets appear where we want them,
even when screen size and orientation change.
Now, we've covered the different types of constraint
and how they affect the behaviour of widgets
that are constrained to each other.
Now, the Inspector is very useful and we've seen how
to use that to change the sizing of widgets,
as well as their position within the constraints.
The margins on the vertical and horizontal sliders
can also be used to set the bias from the Inspector.
Google's aim with this new layout designer
was to make it possible to do everything you need to do
without having to edit xml.
And I'd say, they've largely succeeded.
There is one time when you definitely need
to view the xml though.
Now, you've noticed that...
I'll just put this back on the screen,
neither the blueprint nor the design make it easy
to check all the constraints at once,
and there's no way to display all the properties
on the screen at once, not
unless you've got a three metre high screen.
So, if you have problems with a layout
and you wanna post a question about it,
a screen shot alone will probably not help us
to work out what's going on.
In that case, if you do want help with a layout
that's not doing what you want,
please select all the xml and paste it into your question.
That way we can see everything that's set in it
and we're gonna be coming back to that later
and give you some tips to make it easier
to compare your xml with mine.
Alright, so that's the end of this video.
In the next one, what we're gonna do is create an app
that does more than just display things on the screen.
We'll get it so that clicking a button
actually does something.
I'm gonna start that app with a challenge though.
Just to warn you, the next video will start with a challenge
to design the layout that we're gonna be using in the app.
So, I'll see you in that next video.