Introducing ConstraintLayout5:33 with Ben Jakuben
The relatively new ConstraintLayout is used to efficiently arrange layouts for all sorts of screen sizes across different versions of Android. Let's check it out!
Okay, so we wanted to get rid of this little bit of padding around 0:00 our image view. 0:02 And to do that, we need to explore a relatively new layout called 0:03 the constraint layout. 0:06 I'm going to turn off this blueprint view here on the right, 0:07 to give myself a little more room to zoom in on the screen. 0:10 So these three buttons here control whether or 0:13 not we have that blueprint view. 0:15 So here's the regular view, here's just the blueprint itself, 0:16 which shows the views but doesn't show what they actually contain. 0:19 And here's the side by side. 0:22 So, I'm gonna go with this one. 0:23 And that allows me to zoom in a little bit. 0:25 In a previous project, you may have seen something called a relative layout 0:26 as the base view group on the screen. 0:30 If we take a look at the Text view of this layout, we can see that the latest version 0:32 of the Android Studio uses a new layout by default called the ConstraintLayout. 0:35 It does a lot of the same things as a relative layout but it does require us to 0:40 think a little bit differently about how to lay things out on the screen. 0:44 This ConstraintLayout is the base ViewGroup for the entire screen. 0:47 It takes up the entire rectangle. 0:51 Everything we add will go inside this constraint layout, 0:53 like our ImageView here. 0:55 Let's take a quick look at the documentation. 0:57 So it says here that a ConstraintLayout is a ViewGroup, 0:59 which allows you to position and size widgets in a flexible way.. 1:02 Even though the constraint layout is brand new, 1:05 it's available as a support library that we can use on older Android systems. 1:07 We'll talk just a little bit more about the support library in a few videos. 1:12 If we click on Relative positioning here, we can see some examples and some comments 1:15 about how to position views inside of our constraint layout relative to one another. 1:19 We will explore this layout throughout this project, but 1:24 make a note of this page for reference. 1:26 It's really helpful to revisit it as you're trying to get something to show up 1:28 a certain way in your layouts. 1:31 Now as usual we can work with constraints directly here in the XML view but 1:32 there's a nice new editor here in the design view. 1:36 So let's work on the horizontal layouts first. 1:40 The idea is that we wanna constrain the edges of this image 1:43 to the edges of the parent view which is the edge of the screen. 1:46 So here we now have four knobs on the top, bottom, left, and right of each view. 1:49 And we can drag those to attach them to different things. 1:54 So if I drag this beyond the edge of the screen. 1:57 It will now constrain it, 1:59 and you can see it's illustrated over here, to the edge of the parent. 2:01 Again, the edge of the screen. 2:04 If I do the same thing on the right. 2:05 Drag it over. 2:07 You can see it's trying to attach to anything I drag it to. 2:08 But if I drag it beyond, this is now attached to the right side. 2:10 And by default, it has a margin of 8 DP. 2:14 We can change this to 0 and our image, well it didn't actually stretch. 2:17 That's because the layout width is being calculated for 2:22 us as the width of the window. 2:25 Instead of using match parent, like we would normally use, or 2:28 other types of layouts, we want to set the width to 0 dp. 2:32 This forces the width to be calculated each time 2:37 this image is drawn on the screen. 2:40 So again, to reiterate, instead of using match parent, we set it to 0 and 2:42 then we set the constraints, and force it to fill the entire available space. 2:46 Let's do the same thing for 2:51 the top, we can grab the knob, drag it up beyond the top of the screen. 2:51 Change the default margin from 8 to 0. 2:55 And in this case, we want to leave the layout height as wrap content. 2:58 We aren't going to stretch the image all the way to the bottom because we're gonna 3:02 put some other things down here at the bottom of our screen. 3:05 Once again, I wanna mention that you should have adjust view bounds 3:07 checked down here. 3:10 If you don't, you can see that it changes how the image is drawn. 3:11 We wanna make sure that it's checked. 3:14 Let's go back to our XML view for a moment. 3:16 Notice here, in the ImageView tag, 3:19 all the attributes match the properties that we've just set. 3:21 So here we have the idea that we set before, titleImageView. 3:24 Down here, we have the source that we selected, it's called srcCompat and 3:27 it's the main title image. 3:31 And then here we have all the different constraints that we just set. 3:33 The width and the height, the margins, and these constraints follow the format of 3:36 the left side of our view is constrained to the left of the parent. 3:41 The right side is to the right of the parent, and 3:46 the top is to the top of the parent. 3:48 So you can see how we can type these in here to add additional constraints 3:51 which are all documented in that page we just looked at. 3:54 I also wanna point out the difference in the prefix here. 3:56 So, by default, our normal attributes have the prefix of Android. 3:59 If they have a prefix of app like this. 4:02 That means that it's something available from the app compat library. 4:04 The support library. 4:08 You don't really need to worry much about these differences at this point. 4:09 But we are going to talk a little bit more about support libraries later. 4:12 I also wanna mention, that while using the editor is nice, I still like to have 4:15 an understanding of this code behind the scenes to help troubleshoot issues and 4:18 to fully understand how things are being laid out. 4:22 So if we hover over ImageView here, it's slightly highlighted in yellow, and 4:25 that means that there's a warning. 4:28 So this says we are missing a content description on the image. 4:30 A content description describes what is in the image and it's used for 4:33 accessibility purposes. 4:36 It's always a good idea to add one. 4:37 So we can add a new attribute right here. 4:40 It doesn't matter where we add it. 4:41 But let's type android:contentDescription. 4:43 And here, for the value, let's type, Signals from Mars title image. 4:46 Okay so now, why is this new attribute highlighted in yellow? 4:53 We have a new warning. 4:56 It's telling us that the hard coded string we just typed, 4:57 should use an app string resource instead. 5:00 Let's ignore this for now, because we're gonna fix that in just a little bit. 5:03 All right, let's run this to make sure that everything is working so far. 5:05 I'm going to run this on my Pixel emulator. 5:10 I'm gonna use the same selection for future launches, and click OK. 5:12 All right, there we go, we've got our image and it's taking up the entire width, 5:17 and there is some room here on the bottom, for 5:21 the stuff we're going to add next, very cool. 5:22 So, it's obviously pretty important to know how to add 5:25 images to an app like this. 5:27 There is a lot more we can do with them, which we'll see as we work through this, 5:28 and future Android projects 5:31
You need to sign up for Treehouse in order to download course files.Sign up