 Hi, this is Christian. In this video, I want to go over the layout, how you place views in the layout, and also how you change orientation in the layout in your program. So here is the app that we've been working on. It's a US flag and state information. Let me go and compact this directory here. The main activity here is state, and we have the layout. I have two of them. I'm not going to work with the main here. I'm just focused on the state layout. This is the state it has. This image will place with the state flag, the name of the state, the capital in the population. I'm going to run this so you can see what it looks like first. Let's see. Here we go. This is the 50 states. If I go and click on Arkansas, here is the flag, followed by the name of the state, the capital, and then the population out here. Then this button here, go back. It looks okay, not too bad. The only thing is that watch what happens when I rotate this. You see it's a mess. You don't want that. I'm still trying to retain the same layout as I did with the portrait layout, but because I have now a limited space in my vertical space here, it looks pretty ugly. This also needs to be changed. First, let's go back to this one here. It looks okay, not too bad. Maybe I want to move this a little bit to the right. Maybe center this whole thing here instead of doing this way, because I have a lot of waste space on the right side. The flag looks okay. Center is really nice. The button looks centered. It's okay. That's nice. This text here, I want to change that. How do we do this? Let me close this over here. Again, I'm just working on this layout. Notice, again, if you don't mouse over the layout, you don't see these blocks. This text, because you don't have any text, you can't see them. It's usually sometimes nicer to go to the blueprint, so you can see the exact positions of all the controls here. I'm using a constraint layout by the way, so you can see that if I click on any one of these objects, it has these squiggly lines that attach to the edge of another component or the edge of the view here. These are the constraints that you set for each item. Now, the image, as you can see, is set so that it's constrained to the constraint set on the top margin. The left margin to the right, I make this, let me go into the attributes. If you look at the layout over here, it has a 16 pixel ODP for top margin. From the top here, it's always going to be 16. It doesn't matter which orientation it is. If you go back to the other orientation, you'll see that from the top here to the flag, it's always going to be 16. Same thing with the left margin for the state and the capital here. I have a 36 DP here, so it doesn't matter what it is. As you can see, if I do the horizontal, it moves all the way to the left here, and this state's name, let me, sorry, a little bit small here. The state's labels are on the far left because I forced them to have 36 DP. So it doesn't matter which orientation it is, it's going to be 36 from the left. This space here is huge now. This gap is so huge because we placed it such that it has 0 to the left from here, but why is it not next to the word population over here? The reason why is because we set, because this one here, the first one, yes, I have to understand this a little bit. So the first one here is the one that's controlling or has the constraints set on the below views. So notice this one here does not have a right margin constraint. It's letting it floating. This is also the same. The only thing it has is the left margin constraint set to the top of this one. I'm basically doing a left alignment, but this one here has a constraint set to the right as well. So this one here, whatever it is, it's set to 0, but it's stretching, right? Stretching means it must, it's like elastic band. I'm attaching this elastic band, if you think of it that way, to the far edge on this right side and also to the left of the state label. So therefore, even if I stretch my screen, it's still going to retain this space. It's going to lock that in and you can't move it. And because this is the main one, that's the constraints for both of these underlying tags that are stuck here. So if I move this to the left or right, as you can see, it controls that, right? So what happens when I turn off this one over here? If I click on this one here and just delete it, it snaps to the left. It looks kind of ugly here, but we'll see. And if I just save this and we run the app again, just click there, apply changes here. Watch what happens on the app. Notice it snaps to the left. And then why it's overlapping over here, right? It's overlapping, you can see here, right? Because this guy, if you look at it, the left sets to zero. This one sets to the left of this and this is to that. So it's controlled by this guy. So this one has no left constraint, really. So what you do is that this has to be set so that they can't go any further than the longest string. In this case, it would be the population. So instead of doing this way, you would do something like, well, yeah, it's set to that. It's the shorter one, right? So I'm going to change this to the long one down here, okay? And then so now it cannot go past the population. If I rerun this again, it should snap back to the edge of the population. So you can see it's much better now, okay? And so, yeah, so that's how you set constraints in this layout. Go back to the other one, okay? You see here it's much farther away because I set it so that it's this much space, right? Yeah, it's a, okay, I lose it again. There you go back to 116. So I don't like this layout. I want to make it so that it's centered in the view here, okay? So let's go back and make some changes in here. I want all these to be centered. And the way to do that is to use another constraint in here. So you can go to a layout and add a constraint layout to this file, to this layout here. So I will put this, you know, text information nested inside this internal layout called constraint layout here. So first you want to, you know, let me turn off all the other constraints first. So I'm going to turn this off. If I don't, if I move things around, it's going to go a little bit crazy. So turn that off. This one here, I'm going to turn off the top. Okay, so let them free. And those are just by themselves. So that's okay. The image, yeah, that's fine. Okay, so this one I need to lock in, set the constraint to the left margin, the right margin. For now, let it float. And then I'm going to select these four three and move it inside here. Okay, so now they contain inside this main other constraint here. You can make it a bigger now. So now I can move this up and down. And then I want to center this big one. Okay, so go over here, click on the layout and just double click this little circle right below here. So it says 50%. Then I'll set that center. Then, so these right here, if I move it, but notice I lost all the constraints because you move it, they're all gone. So we'll just redo it again, which is not that difficult. Okay, so again, start over again. I want this to have the left margin. The constraint will be set to the left of this main one. The top will be always, it's also the top just so you can see they are connected. Okay, and we'll just move here so we can see. And just like before, this one, the capital will have the left margin aligned with the top one, the state. The population also aligned with the capital. So now they all chain together. Again, now the state controls the left margin. Okay, the top margin is by itself because I haven't set the constraint yet. So I want the capital to also have the top margin snap to the state. Okay, it cannot go above the state. If you're trying to move it, it's going to lock it in. Okay, so you can set the margin here. If it's hard to see, you can go to your layout and type it in. So 12, let's say I want to put, instead of 12, put 10. 10 dps here, okay. And then the population is the same thing. I can go and click that and then lock it into the state. I can set that to also 10. So make sure they are consistent. Okay, so now these three are locked in. They're controlled by the state. If I move this around, you can see that it's all locked in. And that's what I want, right? Next is these guys here. So this, the top, I want to align with the state. Okay, so you go here, click the top and drag it to the state top. And then this will be the same. So I want this to align with the capital. Make sure it's the outer and not the inner. It's also the inner here. If you're not careful, the inner will be like, I think the arrow is pointing the other direction. And this one here will be out. So if you do this way, it's the inner, you see it? The inner, you want the outer, okay? So now they are the top margin or control by each of these components over here. So if I move up and down, you see they'll move together. If I move left and right, those are still free. So we're going to lock these in as well. And since this is closer to this one, I'm going to lock this in to this one right here. So now this is locked in here. If I move population, these two are locked in together. But I also want to lock this as well. But let's say that I want to set a margin, now it's zero. So I want to set the left margin to something like, let's try 10 again, okay? 10 dps. And then these guys up here also be set to the bottom one. So that they are now all controlled by the bottom one, okay? The left margin. So if you don't like this way, you want to send it to the top, that's fine too. You just drag this down here to the population and the constraint will be added to the top here instead. But now this one here controls everything, okay? That's good. The next thing is this one here, right? I want to change the margin. I mean, yeah, the width and height to wrap just exactly how much content I have inside here. So this extra space down here in left and right top, I don't need them. So just change the width to have the wrap content on for both the height and the width. So this snaps in writing very nicely. Well, this extra space, because I set the state to have the 24 pixel here, you know, pixel here. If I move that to, say, zero on the top, zero on the left, and now you can see that it's tightly coupled together inside here. So now they are contained within this outer constraint layout and this is center and your screen, okay? So wherever this is, they'll be stuck in there and then I need to snap the top to the bottom of the image. If I don't do that, it's going to go all the way to the top, right? So right now it's zero. I can also make it so that maybe it's 10 pixels or DP from the top. The bottom I let it float, okay? So I think that looks okay, it looks kind of good. The button, let's move this back up. If you don't do that, notice I have the constraint at the bottom. 92, you can see here, I mean, it's locked in a 92 DP. So it doesn't matter which orientation it's going to preserve that space. Okay, maybe I don't need that, right? I want this to float to the top of this view so that they can be seen at least, you know, from here, okay? So again, here is the, now it snaps to this constraint. I'm going to set the top to maybe always have a 20 DP on the top and I want this to be center as well. Just double click it to make it center, okay? And then the left and right, yeah. You have to do that to make it center. Okay, so I think it looks a little bit better. Let's see, let's go ahead and just rerun it again. And we just reload the image, the layout, so we don't have to do much. So as you can see, maybe a little bit better. I don't know, I couldn't tell before, but right, a little bit better now. It's nicer here. It's still too much to the left, right? It's not centered because I set this at the center, but it's not because, why? Because these individual text fields, I have a, I think I have a fixed layout. So you have a fixed width on them, 220, right, 220 and so on. So I want to turn this off. Make it so that they're wrapped only on the content, okay? You notice there's a snap to zero because I have no content. You can see it, okay? So it looks like, it's kind of hard to see. So you can add some text in there so you can just see this. Let's put here some gibberish, okay? So I know that it's there because we're going to override this anyway. So I can see it. But I do want to set the width and height to the wrap content. So now you can see it's nicely centered. Okay, so let's reload this again. There you go. It's much, much better, right? So now it can go back to any state and it'll resize correctly and it'll all be centered in my view here. Let's pick something kind of long. Massachusetts, maybe. Okay, so that's exactly what I wanted. And then when I change the orientation, and almost good, right? But I lost my button because the button is, you know, have a constraint set on it at 20 pixels, DPs above. So it's going to go below that and that's not good. And so when you change the orientation like this, you know, in this design, it's bad because I have so much real estate wasted on the left and right. So what you will do is usually you want to rearrange your layout, your content, right? So maybe I want the flag to be on the left side. This information will be on the right of the flag and then have enough space for my button right below here. Okay, so how do you do that? So the easiest way is to create another layout. Okay, and here's what I would do. I like this layout for this one. It looks good. So I'm going to make a copy of this same layout and I just change the orientation. So let's go and do that. We're here on the project file. So this is the state here. I'm just going to copy one, you know, make a copy and then paste it right back in here. I think I didn't do it. Copy, copy, control C is better. Control V, okay, shortcut. And then I want to change the name to say activity state underscore horizontal or you can call it landscape as matter. Okay, so I have exact copy as the other one. Notice when I do this, I'm not going to change any of the data like IDs and things like that, okay? Because it's exactly the same so that when I run my code over here, my state activity code, right? I'm referencing these IDs in here, okay? I don't want to change those unless you want to. You have to do something a little bit more but I want to keep those exactly the same. The only thing is just this layout will be different. So now I'm choosing my state on horizontal and up here this icon, the second with the little arrows here change that and click the landscape. So now this is the landscape view. I want to change my layout. Okay, so we go back to what we did before and we arrange this. Okay, so I want this image to be on the left. So I'm going to move it over here like that and I want these guys to be on the left, right of this image. So I'm going to turn off this one for now, the left margin. The top margin also turned that off. Okay, I want to move this up here somewhere, right? The button I can, let me move that a little bit down here so I can have some room. So I want, let's move it down here a little bit. Okay, the image here, I can just, you know, we move this from the right. Okay, so that's free. The left one here, yeah, no, let's leave the image back. Yeah, I'll leave that as before. So I'm going to use the constraint here against these guys right here. So this one here on the right side. Okay, well that's good enough for now, let's see. So I want to lock this into the left of the, right of the image here. I'm going to set the margin at least to what's set, I don't know, is it 22 big? Let's try 20 and see what happens, okay? 20 dp maybe a little bit too big. The top margin, I want this to be centered, you know, along with this image here. So how do you do that? In two ways, you can just, you know, direct the top to be the top of this and the bottom to be the bottom of that. And that is centered, so you let it float like that, 00, top and bottom, and that will be centered. Okay, I'm doing it manually. The other way is, if you want this to be centered, you click the image, click and then control or shift, click the constraint and now both are selected. And up here, the icon, you just click the alignment and say pick the vertical centers. And there it is, okay? They add it for you automatically. So that's what I want. I want this to be centered. I think that's good. The button here will be, yeah, center as well at the 50-50 maybe, still, yeah, centered. And the height is 112, that's too much. Let's go and make it so it's only maybe 20. Okay, all right, maybe I'll make my button even bigger if I want to. Let's see. So let's see, the image here is zero from the left. I want it to have maybe more, like maybe 20 on the left and 20 on the top, okay? And I don't know, let's see. Okay, let's go and change your code a little bit in this activity Java file. So up here when I load the view, I'm going to change this to the underscore horizontal. Okay, I'm going to use that just to show first. So let's run again. Okay, an orientation already. I'll make this a little bit bigger. You can see if I go to Alabama. Okay, so almost, right? Almost looks good. The button is too close. So you move that down. The margin here is too close here. The image is, you know, the top is about right, 20, but the left is too far out. And why is that? So if you look at here, right, you see a little bit too far out, even though I put 20-20, okay? I think the reason why is because we set the constraint here to this guy. I locked this one in. So if I remove the right margin, okay? So I let it float from the right margin. And this one here also, maybe I'll float the right margin. I don't need that. There you go. And you move it to just on the left. Okay, so it will stretch off on the left to the right. And 20 maybe a little bit too close. Let's change it to something like... Oh, maybe okay because it was stretched before. And this is too close. So 20 was not good. Let's make it so it's maybe 50. Yeah, a little bit better. And it's still centered. I'll make the button bigger. Maybe like that. Hope it's not too big, but... Okay, let's try again. Reload. Yeah, as you can see, much better, right? A little bit much better than before. I can change a little bit more on the image. We'll make it so that it's maybe 30, 30, and then 30. I still have enough room to play with. There you go. So go back, go to Alaska. All right, so you can see how I changed that. It looks much nicer. And... Okay, so if that's exactly what I wanted, I'll keep that as is. Now how do you change the orientation? So when I switch back to this vertical orientation, it's messed up again, right? I want to load the other layout when I'm in this orientation. So to do that, it's very simple in the code here. So let's go to the Stay Activity. So notice in the code here, when I load this activity, it runs this layout, okay? So you can check the orientation and run this layout based on orientation. So you can do that by getting an ID. I can call it orientation. Set to the ID of the... I think it's the Get Resource. Oops, not that one. Get a resource. Get the configuration, and then you can see the orientation here, okay? You can get the orientation, you can get the color mode, the density, DPI, the keyboard orientation, the navigation, all this stuff here, right? You can use this quite a bit. But the one-on-one is orientation. And that will give you an integer, a few integers between zero, one, two, and up. So how do you know which one is which one? Is you can go here and click on it, okay? I just control-click on it. And you can see that if it goes down here, you can see all these constants, okay? These are final constants only. You can't change those. And it's kind of hard to see, but you'll find, you'll see that one of these is actually the... Let's go over here. You'll see that there is a... So these capital letters down here. The one that we want is called the Landscape, or the... Here, right here. You see orientation? Okay, orientation landscape, orientation portrait. It's assigned with an integer of one or two, okay? So instead of doing that way, you would set it so that you use the constant variable instead. So I'm going to check the orientation that is equal to the configuration. It's probably configuration class. There it is, orientation landscape or portrait. That's what I want. You want to put equal to or one because, you know, later on, if Android decides to change these numbers, then your program will crash. So instead, use the actual constant variable here, okay? So if it's... I want to go with portrait first. If it's portrait, then show... Let me duplicate this line. Show just the regular or the vertical activity state. You should have named it to vertical if you want. Else, show the horizontal, okay? So before you run the other stuff, you select the layout type based on the orientation of your device. Okay, so if I run it now, you should see that it should respond correctly. So I'm at the vertical position. If I click on Arizona, as you can see, it picked the correct layout. If I change the orientation to the landscape, you notice that it changes and it loads the vertical, I mean, the horizontal layout. And the button is even bigger too, right? So you can redesign your layout however you like. Just make sure your variables and IDs and they don't change. Okay? And then everything is now... Looks good. If I switch back again... And there we go. So I hope this is helpful to kind of help you, you know, design your orientations and different layouts for different orientation and future videos. I'll show you also how to change this when you use a different device. Like for example, I have a tablet here. Okay, let me run in the tablet as you can see what it looks like in a tablet. So just take a few seconds here. Come on, you can do it. Okay, so here's a tablet. I'm using the vertical layout right now. So it should still correspond to... respond to this same layout type. Okay, so here we go. All right, you can see that now the font is pretty tiny, right? It's too tiny, you can't see it, compared to the other one. This is still a little bit tiny. It's okay, but if you can think about it, you can make this bigger. And I'll show you to do that next time. But here you can see that it looks tiny. If I go to Nebraska, right? The layout is still center, it's still okay. Image is small, so that's why when you have this type of orientation, you want to load the bigger images. So you want to provide a series of graphics to match a certain screen size. But we only use one, so that's okay. And if I change the orientation to the horizontal, as you can see, it still works, right? So... But you have a lot of real estate wasted in here. And the font is pretty small. So the next video, next time I'll show you how you can change the font and this list view, and also change the content size based on screen size. So if you have any questions, please feel free to let me know or post a comment. I'll be more happy to respond. Thank you.