Hello and welcome back. Picking up where we left off in the last video with the addition of the second button. The reason we have these ids in red over here these ids in red is because you can't have the same id for different elements. So, I'll change this to button let's say one, okay? And the look again I'm going for is this. We have this row starting with four and then we have this row starting with one. So, now the problem arises with you have the starting to and they're occupying the whole screen. How do you get the other buttons in?

So, how about five, six, and plus for this row. So, after four you want five, six, and plus how do we get that in? Because if we add a button here in our layout, it's simply going to stack below it. So, the structure we're looking for is instead of just a button here we want a row of buttons, so we can instead use a linear layout that's horizontal and put the button in there. And then within that linear layout whatever button we add we'll just get added one after the other horizontally. So, let's try that. This is what's called a NestedLayout because we have a LinearLayout and then we're going to nest another LinearLayout within it and move this four button within that. So, let's give that a shot. 

Let's see what happens. Over here I'm going to say left angle bracket. Bring in a LinearLayout. This one again we're going to match_parent for the entire width and we're going to wrap_content for the height so that it doesn't take more space than just the buttons height. And the orientation for this LinearLayout is going to be horizontal. And let's see what that does. So, I'm going to put a closing right angle bracket. So, there we go. So, now I have a LinearLayout within my parent LinearLayout. What I can do then is move my four button from here and I 'Cmd+X' this and put it within my LinearLayout, 'Cmd+V', okay? So, now this button is within this LinearLayout. 

So, what happens if I add another button? What's the next button that we have in our preview? You see after four is five. So, if within this LinearLayout I add a button five, I'll copy this 'Cmd+C' and then paste one below and we've pasted it the exact same button and we don't see it and we'll fix that in a second. Let's first modify this second button that we just added. The text is four we want the text to be five, okay? And for the id, we want this button to have a different id, so we'll say buttonFive, okay. So, now why is it that we are not seeing this button? Well, for this type of setup in a LinearLayout there is an important attribute that you have to work with and that's called layout_weight. So, let's take a look. 

If I start typing in weight you see layout_weight pops up. And layout_weight signifies the importance of an element that you place in the view. So, I'll put a layout_weight of one. So, if I put a layout_weight of one for this one and then this one doesn't have a layout_weight I need to add a layout_weight for this as well. So, a portal layout_weight of one and check what happened. Now, both buttons are occupying the exact same space in my view and that's dictated by this layout_weight which is the importance factor. Basically, both of them are equally important. What happens when I add in a third button? If I look at the preview, the third button after five is six. So, let's add in buttonSix and see what happens. Cmd+C' and I'll paste this in. 

So, here I have a buttonSix and I'll change the text to six. Check it out because of the weight all three have the same layout_weight; therefore all three have the same importance in this view. Now, what if I wanted to assign this buttonFour to have more importance or occupy half of the room in this top view? Then theoretically I could assign this a higher layout_weight then that should work, okay? So, what if I did that? I do layout _weight of two, you see I have a problem. It's not displaying properly, okay? It's technically supposed to show and occupy half of the view, but it's not. And the reason for that is this layout_width of match_parent. In order for layout_weight to work correctly the layout_width needs to have 0dp, okay? So, layout_weight is then going to dictate how the width works instead of specifying a layout_width. So, what I'll do then is change this to 0dp and then I'll change the other two to 0DP as well. 

There we go. And now that I have done that now I can simply use layout_weight to dictate the size or the importance of a button or an element that I put into that view and check out how nicely that worked. Now, I have four occupying half of the view and five or six occupying less. So, if I just switch this back to one check it out equally spaced. What if I wanted six to occupy half of the view then I would simply add layout-weight of 2-6 and check it out. It occupies half the space, all right? And so whatever you have this kind of setup you'd want to use layout_weight and then set the layout_width to 0dp. And you can do the same for height if you wanted to work with height in this way, okay? So, you see how the row is forming nicely. We have 4, 5, 6 and then we're going to need the '+' sign.

So, let's add another button real quick. Over here, I'm going to copy this button, 'Cmd+C' and then place another one after it. 'Cmd+V' and I'll make this button and this is the minus sign. So, I'll say Op for operator and then minus just so I know what that is. I'll scroll down, make this text minus. And you see how, because these two have higher weights of two, we have these two occupying more space than the first two, which is not what we want. We want all of them to have layout_weight="1", so I'll move this back to one. All right. So, now we have 4, 5, 6 and minus, okay? And let's add some margin in between the items. Right now there is no margin. 

So, for this first button, I'll add let's say margin to the left and right. So, we'll say margin left I'll say 2dp, okay? And then marginRight I'll say 2dp as well. Actually, I'll make it more prominent. I'll make it five, 5dp, so it's a little more prominent. Same with the left: 5dp. So, now I can just copy these two lines onto the next three buttons so 'Cmd+C' I'll paste one here, paste one here after we wait for buttonSix. And then the last button here as well. There we go, looking much better and now we come to one of the advantages of using code this way.

See for the next row, we can simply copy the structure down starting with the nested linear_layout and then modified as we need. So, instead of this buttonOne I'll simply get rid of this button. And if I scroll up, you see this is the closing LinearLayout tag for this tag. So, this entire row what I can do is hit this '-' button or the 'Compress' button, and you see it simply compresses the view. Now, I can copy this so I'll click on it and then hit 'Cmd+C' to copy everything within it. I'll go to the next line or the line after that hit 'Cmd+V' to paste and check what happened. Now, I have this entire structure copied over then I can hit the '+' sign and simply make the updates that I need. So, the next line is 1, 2, 3 and C. 

So, I'll quickly do that. I'll say buttonOne for the ID. I'll change the text to one. Then buttonTwo, change the text to two. buttonThree, change the text to three. And then I had C, so buttonC and the text will be C. And for some reason it hasn't shown up I don't know why. I don't know what happened there. Let's try again. There you go. Now, it showed up. There was probably a rendering issue there. All right. So, it's taking shape nicely and you see the advantage of writing code like this every now and then, right?

So, we've made a lot of progress in this video and learned a lot about layouts and structuring things a certain way and I feel like this is a good stopping point, so we're going to stop here for now. And in the next video, we'll continue on from here and try to make this layout look more like the calculator, including the TextView and some of the other buttons. But the general structure and gist of it, I hope you have a good idea of, all right? I hope you're excited about the next video. I'll see you there.