(Instructor) So as we talked about
at the end of the last video,
in landscape mode the buttons are far too close
to the bottom of the screen.
And there's a fair bit of space
between the widgets vertically.
So we could start shuffling them up
while reducing their top margins
and sometimes you may have to do that
but android's actually got another solution.
It's possible to create separate layouts
for different screen sizes and landscape counts
as a different screen size to portrait.
Now this particular layout
doesn't look the best in landscape.
So let's have a look at how they use it as the basis
for a separate landscape layout.
Now this is quite a complex layout
and you may not feel too confident
about playing around with it in case you mess it up.
But fortunately there's an easy way to save everything.
So you can put the layout back if things go horribly wrong
while you're experimenting.
So we come over here and we click on text
to go back into text mode.
I'm gonna copy all the text; control A on a PC or Linux
or command A on a Mac and if I'm doing a command C
but it would be a control C on windows or Mac.
Of course you can go to the edit mode
and do a copy that way.
You can scroll down, select all and then a copy et cetera.
But anyway get a copy of the text as you can see there,
you can paste it into your favourite editor.
And you could even create a new (mumbles) in android studio
and paste it in there or as I prefer to use a simple editor
so I don't mess up and leave unused layouts in my app.
One word of warning though,
be careful if you're using text edit on a Mac
and don't use word pad on a Windows, use notepad instead.
The reason is, while I can mess around with text
and do strange things like try to match up speech marks with
66 slash 99 characters instead, on my Mac I make sure a text
in editor set in text mode by going to the format menu.
So I'm going to click on go into text edit, new document
and then we're going to go into format and I can select here
make rich text.
As that option comes up and then it's plain text mode.
So we click into there basically,
make plain text again as you can see
and you can see all the controls change there as well.
I'm gonna paste that in there so you'd do that in notepad
if you're in windows or some other editor
to take a copy of what we've done
so that we can restore it if need be.
So basically anytime if you wanna go back to the layout
as it is at the moment you can just copy this text
back into the android studio into the text tab
and go back to exactly what it was before.
So back to android studio, I'm gonna click on design again.
So we actually create a separate layout for landscape
we just have to place a copy of this layout
in a special landscape directory
then modify it to work with landscape.
Android studio makes it very easy to create layouts
for different orientations and screen sizes.
So the button that switch from portrait to landscape
is another option.
So I come over to here and you can see
look at this option here; create landscape variation
and that creates a new layout from a current layout.
So I click on that now, I'll open up the project pane,
we're just going to have a look, layouts.
You can see we've now got two files there
and even though they've got the same name
you can tell which one you're working with
because the editor tab prefix is the name of land.
So if we've got the landscape one up here; land/activity
and it's called main, we've got layout/activity
and it's called main.
So you'll easily know which one is which.
And also down here in the project pane,
you can see the word land is in print to the right
so you'll know which one is the landscape version.
Now when you're working in landscape
it's very useful to be able to show either design
or the blueprint on their own.
But moving things around I prefer to work in the blue print
so I'm just gonna use the button on the toolbar
to display it by itself.
And we'll close the project pane, gives us a bit more space.
So how are we gonna sort out the layout for landscape.
Now in landscape, we're actually short of screen depth
but we've got plenty of width.
Now you may come up with other ways to layout
the widgets for landscape but I'm just gonna place
the two edit text widgets side by side on the same line.
Then we'll start by changing the basic constraint
of the operation text used.
So let's click on here; the operation,
we wanna align that with the button seven widget instead.
Now it's still gonna be a baseline constraint
but we're gonna move it down the screen.
Now this is the widget that we had trouble with
the previous video because it's so small.
I'm just gonna expand the properties of this pane over here,
the inspector, and we're gonna have a look
at our constraints again and we're gonna come down here
where we've got baseline to baseline off
which is currently set to new number and use the drop down,
we're gonna change that to button seven instead.
You can see it moved down the screen when I did that.
Now it would be confusing to have a constraint
to two different widgets so we're gonna change
both constraints.
Although the constraint names can't be read properly
without making the pane wider,
we can see which one was set to new numbers
so I'm just gonna change them both.
We'll change that one now instead of a new number.
You find in this particular case that it doesn't give you
the fullest of buttons, you can come over here
and click on the ellipses and select button seven that way,
click on okay.
And the result is we've now got it changed,
both constraints now constrained to button seven.
So the next step is to delete
the top and right edge constraints on new number
and the left edge constraint on result.
So we're gonna go back to our normal properties
instead of the extended ones.
So I'm selecting new number, so we're gonna delete
the top and right edge constraints on new number
and the left edge constraint on result.
And just delete the top first
and the right edge on your number to delete that as well
in constraint that is and the left edge constraint on result
and result was this previous one,
so I'm gonna delete that as well.
Now the right edge of new number should then be constrained
to the left edge of result (mumbles), constrain that to the
left edge of result and then we also want
a baseline constraint created for the two
so we'll to come over here, click on the little button to
enable the baseline constraint.
And we're gonna constrain it like so,
oops didn't quite click it in, try it again, that's better.
Now we have to put the baseline constraint from new number
to result rather than the other way around
because it's result that has the vertical constraint
to the top of the screen.
Of course you could change that
but it doesn't actually matter which way around it all goes.
Now you could also constrain new number
to the top of the layout instead.
But by anchoring the two edit text widgets together,
we only have to move one and the other will follow.
Now the buttons aren't centred but we'll come back to that.
In fact there are a few things wrong
with the landscape layout
and we're gonna be looking at them all a little bit later.
But that's the layout for the calculator app
completed for now.
So let's actually run it to see how it all looks.
So I'm just gonna run it and we'll just check it
over in the emulator just to see what it does look like.
Okay so there it is in portrait mode.
So that's looking okay.
Go over to landscape.
And you can see it's looking okay, it's really not perfect
but we need to make a few changes to that
but you can see that it's looking much better
because of the additional layout
that we created in landscape mode.
So at this point now we're ready to start writing the code
to make it calculate.
The last thing I'm gonna do is,
I'm just gonna go back to portrait and go back into the code
and for both the layout files what I'm going to do is
just go into the text view and then click on the code menu
and rearrange code and we're gonna do that for that one
and also for the other layout as well.
Do the same thing, code, rearrange,
jus so everything is in standard order,
I'm just gonna go back to design on both of those.
And I'm doing that so the reason I did the reformat codes
from the code menu,
just so everything is in a standard order
if you need to compare your code with mine.
And in the next video
I'm actually gonna show you how to use android studio
to compare files so that you can compare your code to mine
if you get any problems
and struggling to work out what's different.
So, let's get started with that in the next video.