Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
This video highlights a problem running our app on devices with smaller screens. Fortunately, there are lots of ways to make an app work well and look good across different screen sizes.
Optional Challenge
If you'd like to explore setting portrait mode in code, try working through this example from StackOverflow and then proceed to the next video for a walkthrough.
- Create a custom Application class.
- Update the manifest to use this new custom class.
- Override the Application's
onCreate()method. - Call
registerActivityLifecycleCallbacks()and override theonActivityCreated()method in the anonymous inner class.
Documentation
GitHub Repo
Let's talk for a minute about how our
app will look on different screen sizes.
0:00
Let's go back to the design
view of our layout.
0:04
Now whenever we're working
with layouts like this,
0:07
we should be sure to test how it looks for
different size phone screens.
0:09
We can easily test that here in
the preview by changing the phone type
0:12
like we saw before.
0:15
Or we can also simply drag the layout
using this little grabber down here and
0:16
we can resize it to something
like a small screen like this.
0:20
All right, we have a problem
at this smaller screen size.
0:24
This is important to remember.
0:27
Even though my own personal phone
has a much bigger screen than this,
0:29
you never know what size
device your users might have.
0:32
Or what new devices will
come on the market.
0:34
We need to configure our layouts so
0:36
they adapt to all the different
screen sizes we want them to work on.
0:38
You've gotta be careful
about how we size things so
0:41
that we don't end up with problems
where things overlap or aren't visible.
0:43
There are a few different
ways to fix this layout.
0:47
We could remove the app
bar here at the top.
0:48
We could resize the image, and
we could make the whole screen scroll.
0:51
In this case, all I wanna do is make
the edit text have a white background
0:55
instead of a transparent one so that
it will show on top of the dark image.
0:58
So select the EditText and
over here in the properties,
1:02
we want to find the background.
1:05
We can set a value here, but
1:07
I'm want to click on the ellipsis
to use the little Wizard.
1:09
Now, we're just going to set
ours to a color which is white.
1:12
But it is important to note that you
could use an image as the background
1:15
for your view.
1:18
And not only can you use
the project images but
1:19
some of the provided ones
from the Android system.
1:21
But let's click on color.
1:24
And here you can see some that
are available and if we search for
1:26
white, here we go, double-click it and
now we have a white background.
1:28
By the way, the reason this edited
text appears on the top of the image
1:33
is because of the order in which
individual views are drawn on the screen.
1:37
The order comes from the XML file itself.
1:42
Where views are added to the parent
in the order they appear here.
1:44
So in this case,
we start by drawing the entire view group.
1:48
This constraint layout.
1:51
Then Android will add the image view.
1:52
Then it will add the button, making sure
to be aware of its constraint parameters.
1:55
And then it will draw the Edit Text.
1:59
So since it's drawing the EditText,
after it's drawn the image,
2:00
it appears on top of it.
2:03
At this point the screen looks
okay on small screens and
2:05
pretty good on a few
different screen sizes.
2:08
For example, on Nexus four,
that looks a bit better.
2:10
Go up to something big like the Nexus 6,
it looks pretty good, too.
2:13
Next, let's talk about portrait
versus landscape views.
2:17
Android will automatically adapt
our layouts when the phone is in
2:20
landscape mode.
2:23
And sometimes it works fine,
but not this one.
2:24
Here, check it out.
2:26
We can switch to landscape view by
either clicking on this button Switch to
2:27
Landscape, or if I go back,
we can also drag it over there.
2:30
Notice that there is a diagonal line here.
2:33
And if we go beyond that diagonal line,
we can switch to landscape views.
2:35
This app, like many, is designed
to be used only in portrait mode.
2:40
We can set that for each activity
in the Android manifest file.
2:43
So let me switch this back to portrait.
2:47
And let's open up Android Manifest.xml
here in the manifest directory.
2:49
So in here we want to find our activity,
so
2:54
here's the activity element for
main activity.
2:56
And we want to add a new attribute
on this activity element.
2:58
So here, before this last angle bracket,
let's start typing screen orientation.
3:02
And from autocomplete, we can drop it in.
3:06
And we get a list of choices,
but we want to select portrait.
3:08
Now the only downside is that we
need to remember to set this for
3:11
every new activity we add to this app.
3:14
It's not that this is hard,
but it is easy to forget.
3:17
I have forgotten this myself.
3:20
There is a way to programatically
set all activities in an app
3:21
to only display in portrait mode or
landscape if you prefer.
3:25
It might be a little bit advanced for
this point in the course.
3:28
But I'll give you a link and
3:30
a short explanation in the teacher's notes
if you want to try it out on your own.
3:31
I'll also quickly show you how
to do it in the next video, but
3:35
feel free to skip that video and
go to the next section if you want.
3:38
You don't need to watch this next
video to complete this section or
3:41
the course itself.
3:44
You need to sign up for Treehouse in order to download course files.
Sign up