Handling Different Screen Sizes

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