Layouts on Different Devices

Tim Buchalka
A free video tutorial from Tim Buchalka
Java Python Android and C# Expert Developer - 900K+ students
4.6 instructor rating • 12 courses • 901,722 students

Learn more from the full course

Android App Development Masterclass using Kotlin

Learn Kotlin Android App Development And Become an Android Developer. Incl. Kotlin Tutorial and Android Tutorial Videos

61:50:31 of on-demand video • Updated January 2021

  • Learn the core Android app development and Kotlin skills to build real Android apps.
  • Learn how to target current and older versions of Android when writing your apps.
  • Understand how to create Android apps using Kotlin.
  • Be able to apply for Android app development roles.
English So I mentioned towards the end of the last video that the Android Studio layout designer, makes it easier to see how things look on different devices. So we're going to add a button to our layout to demonstrate this. So we're going to start off with an imageView set to wrap_content, both vertically and horizontally, and we did that in the last video. You can see layout_width and height is wrap_content, and you can see the chevrons which indicate that. We also want to make sure that our constraints are at the top, left, right and bottom of the imageView to the screen, and that's obviously set as well, as you can see here. Next we want to make sure that autoconnect is off, and there's this little button over here, autoconnect, which are I talked about briefly before. We want to make sure that that's actually off. We can tell when it's actually off, because there's a slash that's appearing through the little magnet icon. So I'm going to do that to make sure that that's turned off. Next what we're going to do is drag a button to the top left of the screen, slightly in from both edges. I'm going to do that, just in slightly from both edges like so, and release the button, and once I've done that, you can see over here that we've got some warnings now. That's because there aren't any constraints there, so I can click on Show warnings, Missing Constraints in ConstraintLayout. So to fix that up I'm just going to add a constraint from the button to the top of the screen, and also add a constraint from the button to the left of the screen. That fixes up that error. You won't worry about these other errors for now, we'll talk about those later, and I'll close that down. And what we're going to do now is change the left constraint on the image, so that it's no longer constrained to the edge of the screen but to the right-hand edge of the button instead. So I click on the image View. You can see that clearly we've got a constraint to the left of the screen so we're going to remove that and constrain it to the right of the button. So when I click on the imageView's left button, left circle, it flashes red, and I click on delete connection and it removes the left constraint, and what I can do now, I'm gonna drag the circle to the right-hand edge of the button. So I'm gonna click on it and then drag it over, and in earlier versions of Android Studio, by the way, you could drag the constraint handle to anywhere along the edge of the button, or whatever widget you were constraining to. That's now changed and you have to drag to the constraint handle on the other widget. So that's the constraint handle on the button in this case. Now notice since I'm holding the mouse button down, that the constraint handle for the button is flashing green, and that's a visual indication that we should be aiming for that and not anywhere else on the buttons right edge. I'm just gonna move over here now and constrain it, release the mouse button, and we've now got a constraint from the left of the imageView to the right of the button. So basically, the left-hand edge of the imageView is now constrained by the right hand edge of the button, so that the imageView itself can occupy all the space from the right of the button up to the screen's right edge. Now we've now got the image centered, in the space between the button to the right-hand edge of the layout. Now depending on what version of Android Studio you're running, you may actually have to click on the imageView and make sure that your margins are set correctly. In my case, they're set correctly to 16 to the right and 16 to the left of the image View, to make sure that you truly are centered in the middle. And by the way, because we're using the wrap, we're using wrap_content, the imageView is 100 by 100, but we want to play with the units. So what I'm going to do is change it to fixed, by clicking on the inner lines again, because this is the imageView. So I'm going to click on the image View lines. So doing that changes the layout_width and layout_height to reflect the last sizes that we've specified. So if, by some reason, yours aren't set to 100 dp x 100 dp, as mine are here, then just type them in manually. Now to see what's wrong with using pixel measurements, what I'm going to do now is change both the dp sizes to 200 px, px standing for pixels. So I'll go ahead and do that so I'm typing 200px. I'm just going to tab over, 200px again and press Enter. Now the image is still centered where it should be. Notice that it hasn't changed size, so on this device, the nexus 4, 200 px is equal to 100 dp. Now that's fine on this screen, so let's see how it looks on other devices. Now by the way, I can choose different devices using this drop-down over here, from the designers button bar. Now the Nexus One is quite old so let's choose that first and see what happens, and you can see that everything still looks pretty good but the image is bigger than it was, relative to the size of the screen. But even worse though, is something like one of the Android wear devices. So let's go ahead and click that again, and we'll come down here and choose this 320 x 290 Round Chin. Now looking at the blueprint rather than the design, because the design now renders as a circle, that's because wear devices are like watches and this one has a circular screen. Now things, I think you would agree, are getting a little bit hideous now, with the image overlapping the button and extending beyond the right-hand edge of the screen. And the button's also messed up in the design because we created a layout for a rectangular screen, but don't worry about that because we're looking at how things size at the moment. Now to get around this and make images display reasonably on all devices, Android uses the concept of device independent pixels, or dp. Now 1 dp is equal to one pixel at a resolution of 160 pixels per inch, but scales to use more or less pixels, as the pixel density of the screen changes. So I'm going to go back to our original Nexus 4 device, and what we're going to do is change the sizes back to 100 dp on this screen, and 100 dp is about the same as 200 px, so everything should still look the same. Now let's switch back to the Android wear device again and see what it looks like. You can see now that we've done that, everything still looks okay, ignoring the circular display of course. Now these are pretty extreme differences, from a 768 by 1280 Nexus to a 320 by 290 watch, but using density-independent pixels, dp, instead of pixels allows the widgets to be resized to still look okay and remain usable. Now of course you'll eventually run into the physical limitations of a small screen, if you have more in your layout than will fit. Now if I choose the 280 by 280 watch, just to show you, down here, the things just physically won't fit. So using dp's can only achieve so much. Now if you were creating an app to run on a wearable device, then you design the layouts using one, and Android Studio does fully support wearables. But we're not going to be covering that in this course, but using the watch made it really obvious how using dp's is to be preferred over pixels, when sizing images and other widgets. So I'm going to switch back to the Nexus 4 because that watch is a little bit small on the video, to show a similar device independent way of specifying text size. Now when I come over here and click on the button to select it, the attributes window changed to the right, and I can come down here to textAppearance, and you might find that that is sized up like that. If it is, just click on the little arrow to expand it out, and what we can do is set the, or see the font size, and that's the text size here. So here the units are sp, which stands for scale independent pixel. The concept is the same but sp also considers the users preferred text size. Now what I'm going to do is change this text size to 32px, and although that's a little large, it still displays okay here. But if we switch back to our device, our watch that we were using before, the 320 by 290, you can see that we've got a bit of a problem now. The button now overlaps the area where the image is constrained to appear. Now 32 px on our original device was 16 sp, so I can change the size here to 16 sp by typing that in the text size field. It looks okay, well okayish, because it's still a bit large for the screen, but what is clear is that the button's now moved, or clear of the image, and if we go back to the Nexus 4 device everything still looks fine Now there's a useful description of dp and sp on Android's developer website. I'm gonna just bring that up on the screen. I'm just going to paste in this link. It's good reading just to read up a little bit more on what Density-independent pixels are. The bottom line here is to use Density-independent pixels when sizing graphical elements, and Scale-independent pixels when sizing text. Alright so I'm going to finish this video by mentioning that this isn't quite the full story. It's possible to provide images at different resolutions and Android will choose the one that's most appropriate for the device that the app's running on. Now we're going to be looking at doing that later in the course, but I'll mention it briefly because I've promised to explain how come our 640 wide image was wider than a 768 screen. We're scrolling down on this page, about halfway down you can see here we've got this Provide Alternative Bitmaps section. Now we're going to be providing alternative images later in the course. For now though, what's interesting in this section, is the scaling factors for the different densities. So notice here on the screen that xhdpi has a scaling factor of 2. So we go back to Android Studio and drop down the list of devices, and we can see that our Nexus 4 is an xhdpi device. So our 640 by 480 px image was scaled by 2, to become 1280 by 960 pixels, which is wider than the screen. So as an exercise, use the source compat attribute to load the ball _640 x 480 image back into the image view, and specify its width and height to be 640 px by 480 px. That'll confirm that it does fit and was scaled up when the dp units were used. And just as a hint, delete the left constraint as there's not enough space to the right of the button. But I'll leave that with you as an exercise and see you in the next video.