Let's talk for a minute about how our app will look on different screen sizes.

Let's go back to the design view of our layout.

Now whenever we're working with layouts like this,

we should be sure to test how it looks for different size phone screens.

We can easily test that here in the preview by changing the phone type

like we saw before.

Or we can also simply drag the layout using this little grabber down here and

we can resize it to something like a small screen like this.

All right, we have a problem at this smaller screen size.

This is important to remember.

Even though my own personal phone has a much bigger screen than this,

you never know what size device your users might have.

Or what new devices will come on the market.

We need to configure our layouts so

they adapt to all the different screen sizes we want them to work on.

You've gotta be careful about how we size things so

that we don't end up with problems where things overlap or aren't visible.

There are a few different ways to fix this layout.

We could remove the app bar here at the top.

We could resize the image, and we could make the whole screen scroll.

In this case, all I wanna do is make the edit text have a white background

instead of a transparent one so that it will show on top of the dark image.

So select the EditText and over here in the properties,

we want to find the background.

We can set a value here, but

I'm want to click on the ellipsis to use the little Wizard.

Now, we're just going to set ours to a color which is white.

But it is important to note that you could use an image as the background

for your view.

And not only can you use the project images but

some of the provided ones from the Android system.

But let's click on color.

And here you can see some that are available and if we search for

white, here we go, double-click it and now we have a white background.

By the way, the reason this edited text appears on the top of the image

is because of the order in which individual views are drawn on the screen.

The order comes from the XML file itself.

Where views are added to the parent in the order they appear here.

So in this case, we start by drawing the entire view group.

This constraint layout.

Then Android will add the image view.

Then it will add the button, making sure to be aware of its constraint parameters.

And then it will draw the Edit Text.

So since it's drawing the EditText, after it's drawn the image,

it appears on top of it.

At this point the screen looks okay on small screens and

pretty good on a few different screen sizes.

For example, on Nexus four, that looks a bit better.

Go up to something big like the Nexus 6, it looks pretty good, too.

Next, let's talk about portrait versus landscape views.

Android will automatically adapt our layouts when the phone is in

landscape mode.

And sometimes it works fine, but not this one.

Here, check it out.

We can switch to landscape view by either clicking on this button Switch to

Landscape, or if I go back, we can also drag it over there.

Notice that there is a diagonal line here.

And if we go beyond that diagonal line, we can switch to landscape views.

This app, like many, is designed to be used only in portrait mode.

We can set that for each activity in the Android manifest file.

So let me switch this back to portrait.

And let's open up Android Manifest.xml here in the manifest directory.

So in here we want to find our activity, so

here's the activity element for main activity.

And we want to add a new attribute on this activity element.

So here, before this last angle bracket, let's start typing screen orientation.

And from autocomplete, we can drop it in.

And we get a list of choices, but we want to select portrait.

Now the only downside is that we need to remember to set this for

every new activity we add to this app.

It's not that this is hard, but it is easy to forget.

I have forgotten this myself.

There is a way to programatically set all activities in an app

to only display in portrait mode or landscape if you prefer.

It might be a little bit advanced for this point in the course.

But I'll give you a link and

a short explanation in the teacher's notes if you want to try it out on your own.

I'll also quickly show you how to do it in the next video, but

feel free to skip that video and go to the next section if you want.

You don't need to watch this next video to complete this section or

the course itself.