Hello and welcome to the section. In this section, we'll be looking at animations, sound, and video and building a few fun apps along the way. But before we do that, in this and in the next couple of videos, we'll look at a bit more at the layout of our apps and how to modify them as we need. Specifically, we'll be looking at another type of layout that's called a LinearLayout. But we'll start here with the ConstraintLayout, which is what we've been working with so far and is there by default. Now obviously this is a code-based course and it's more important to us what we make our apps do rather than how they look. But the look of our apps are always very important as well. 

So, it's a good idea to get familiar with not just using the graphical visual editor that we have over here, but also the code right here, the code. And it actually makes it easier at times to get things done, and we'll see a couple of examples of that as we work through this section. So, if we look back at the design and our widgets in the widget palette, you see you have this layouts and you have a few layout views that you can drag in. And you can mix and match them one view for one part and add in a different view and make them work as you need. And again, we'll see that when we start looking at LinearLayouts which we'll focus on. 

But for starters in ConstraintLayout, you already know that if I drag in a button let's say a button like this, although it's placed here in the screen that's for our purpose so it helps us, but if we run the app right now, it's not going to show up here, it's going to show up at the top left which is zero for x-axis and zero for y-axis as well. So, at a minimum to pin the button here to have it displayed here would want horizontal and a vertical margin or constraint, okay? So, if you remember the easy way to do that was with margins, so I'll pull up the attributes right here and there we go. From our ConstraintLayout, we can simply add margin to the left and a margin on top to pin it to the spot on the screen. 

Very important to keep that in mind as you work with more and more view items. Now as you add and customize this button, add more attributes and more. Let's say you needed to replicate that button or align it in a certain way in the view. Then you could drag another button in and start working on it. Alternatively, you could go to your code and you see there is my ConstraintLayout. And within this parent ConstraintLayout, I have my button that's right here, left angle bracket button to open and this slash right angle bracket that closes it. So, what I can do instead is I can copy this, right, up to the closing angle bracket, 'Cmd+C', and then go to the next line and paste it in. Now I have two buttons. 

You can't see it because the characteristics are exactly the same so it's in the same spot in the screen, one is on top of the other, but that's a good starting point we can use and then work from there. For example, let's increase the marginTop from the top of the screen right here instead of 77dp, let's make it 120dp. If we do that, check it out, and there is our button. Actually, let me give it some more space, let's make it 180. Okay, so now you can see the other button and if we had the same characteristics, then you could simply replicate it. Now another thing is when you do this copy paste method that we did here, the ID for the button would be the same and you definitely don't want multiple items on the screen to have the same ID, that's why you see this is in red. 

So, what we want to do is change the ID of one of them here, I'll change it for the second one. Now you see the red is gone and it's green because now the buttons have different IDs. And now that we have that, we can actually do something else. For example, the left is fine, but what if we wanted the buttons to move together as we move them in the screen? Simply dragging one button should do the trick but that won't do it right now because this button and this button they are constrained to the parent which is the ConstraintLayout. You see this top margin. What if I wanted to constrain this button to this button instead so I can drag them around together? Well, I can use this one right here, you see layout_constraint top to the top of its parent right now which is this line. I can constrain it to this button or I can make top to the bottomOf and have that as well. 

So, I can say something like layout_constraint, there you go, top to the bottomOf, and I'll use this instead. I'll choose the button on top and then I'll get rid of this line top to the topOf. Check it out. Now this button is constrained to the bottom of this button instead and I was able to do that from the code. And of course, this is a preference thing where as you use the code or this design layout itself, you'll slowly develop a preference for one or the other, but this definitely comes in handy a lot of times. So, now that we have this actually, I'm going to reduce this marginTop now because now the margin is with this button let's make it 50dp. 

Okay, so now that I have this, check out what happens when I move this button down below; that button moves automatically, so that's an advantage of linking the buttons. All right, so that's kind of a recap of what we've done in the ConstraintLayout right here. Now we're going to set up our next couple of videos and look at the other layouts that I was talking about. So, under your palette, if you go to layouts, check out this LinearLayout, you can actually drag one of these in. So, I'll bring in a LinearLayout horizontal right here to my screen, all right. Now, you see within this view, a LinearLayout has been added within the ConstraintLayout. 

And with LinearLayouts as the name suggests, think about whenever you would be working with uniform elements that you would want this type of layout, let's say you wanted buttons to be arranged horizontally, right? So, let me get rid of our buttons. There you go, I'll delete that, and this one, okay. So now, within our LinearLayout, since I have this horizontal one, if I drag in a button, check it out right here because it's horizontal, it spans the entire width of the screen. Now, I can drag in another button right here to the right of it and you see how nicely they split the screen in two and occupy the entire length of it. That's simply because of the way that we have the view declared. 

If I click on this LinearLayout, I'll scroll up and for the layout_width instead of match parent, which is my ConstraintLayout spanning this whole screen, what I can do instead is go with wrap_content, okay? So, that will only span the size of the default buttons that I have, right? So, somewhere in the middle, so let's do that. Check it out. It just spans the two buttons and you can expand this as you want. Of course, you can make it bigger or smaller as you need, but this is a nice way of working with uniform layouts for buttons or other elements in your views. Now, for the height, I can also make this wrapcontent. There you go. It brings it all the way to the top. Now this was LinearLayout, horizontal, right? So, I can change the orientation. 

You see, I can choose vertical from here. Alternatively, I can go to my split screen and you see here, my LinearLayout. The buttons are now within my LinearLayout. I can set this orientation to vertical and you see what happens. The buttons get arranged on top of each other, right? So, all the children within the layout view are stacked on top of each other in vertical and in horizontal, they are stacked next to each other. So, that's a brief look at a LinearLayout. Now, at this point, I would encourage you to play around with adding some more widgets here and see how they place, also moving them around and see if you can manipulate them the way that you like. And in the next video, we'll look a bit more into LinearLayouts and writing some attributes manually and see how that can be helpful and useful to manipulate the layout as well. I hope you're excited, and I'll see you in the next video.