Hello, and welcome back. Continuing on from where we left off in the last video with our layout experimentation, notice how these two rows are pinned to the top of the screen. And that's because we have a "layout_height" right here for our LinearLayouts to be "wrap_content". So the views are only taking up as much space as the buttons require, the default button height. What if we wanted the views to be equally spanned through the screen? Since we have two linear layout views, we want them to take up equal space so that if we added more, then they would be spaced equally as we add them. To do that, we can add a layout_weight of 1 to each of the LinearLayout views. 

So for the first one, I'm going to say, layout_weight, make it 1. And for this to work properly, I need to do this for the second one as well. So right here, my second LinearLayout, I'm also going to make this layout_weight of 1. So, they both have equal weight or equal importance and you can see they span half of the screen each or split the screen in half. So, the idea is, as we add more, they will be placed and occupy equal space. Now, the buttons are only taking up the default button height, right? 

Not too much space. So as we stack more rows, we want the buttons occupy the entire height of the layout and then once we add the other rows they'll get smaller with each row, but they will kind of fill the layout properly. To do that, I'll change the layout_height of the buttons to match the parent, which are our two LinearLayout views instead of having them as a wrap_content, which we do here. So, I'll change this one, I'll say, match_parent. Check it out, what happened? 

Now, this button spans the entire height of the second LinearLayout, so I'll do that for the first one as well. So, this is the "4" button, I'll say match_parent. And now check out the "4" button spans the entire height as well. Now, what I'm going to do is I'll pause the video, take care of it for the other six remaining buttons and I suggest you do the same. See you soon. All right, welcome back. Hope you managed that. This is what it looks like for me. Now, at this point without copy pasting first, if you wanted your buttons to have additional features like onClick functions and such, you could go ahead and add them now. 

For me, I won't be adding anything like that, so I'll simply copy paste one LinearLayout view over here to add two more rows. If you look at the image, we have two additional rows of buttons, and for these rows I'm going to make one of them say 7, 8, 9 and the minus sign. Actually you see I have an error here, this should be 4, 5, 6 and +. So I'll make the appropriate update. So the row on top should be 7, 8, 9 and -, and the row at the bottom should be 0, . and =. So, I'm going to pause the video and take care of this and I'd suggest that you do the same. But the challenge for you, would be to get this "0" button to span half of the view like this. And we've done this a few times so far so I think you should be able to manage that. 

Good luck and I'll be back in a bit. All right, welcome back. Hope you managed that. And the trick was to have three buttons in the last row instead of four and make the layout_weight of the zero button equals to two. That makes it span half of the screen like we wanted. Now, as you can see there is a little bit of a misalignment with the margin and this is because for all the buttons we've added this marginRight and marginLeft. So at this point I would recommend that you experiment around with what margin works for you in order to align this right. Maybe you can use marginStart, marginEnd or something like that or just leave margins out totally, all right? Totally up to you. 

But I'm going to leave it at this, this looks good enough to me and it's starting to resemble this right here. You see this one actually doesn't have any margins, so you could go for that look too if you want. All right, next is the TextView which is this on top and we can drag one in from the Design tab right here. Text and then TextView, I want to put it on top. Let's see how it looks when I do that. Okay, that doesn't look like what we want so we're going to go back to our code and place it correctly. Let's see where our TextView got placed. There we go. It got placed within this LinearLayout after the four buttons. So, what I'm going to do is cut this TextView from here, Command X. And then, move outside of our LinearLayout, that first one. 

So this first row, but right below our LinearLayout vertical view that we have, and place it here. Command V. And let's get to work on this. So for layout_width we want to "match_parent." So let's do that, "match_parent" to span the width of the page. All right, there we go, it's popped up. For layout_height, I want a decent amount of height. I'm going to go for 200dp. 200dp. Then layout_weight is okay, layout_weight of 1. For the background color, I'm going to put in hex value over here. I'll go with "#E3DEDE" to get this grayish color. And you can select this color from the Design tab. You can pick the background color here and it'll pull up the color map and you can select one from here, all right. 

So, back to our code, and now you see the 200dp has spanned because sometimes it takes a couple of steps to reload the rendering, I guess. So now the text instead of TextView, I'm going to make this say the digits, which is "0123456789." So "0123456789." Let's align it to the end. So I'll start typing "alignment", textAlignment, there we go. And we're going to say, textEnd to move it to the right and... Actually you can't see this because it scrolled down. There you go, there it is. Now I'm going to increase the size. So, textSize, there we go. Let's make it 50sp. And there it is. So now, let's run it and make sure that the layout works on the phone. We probably should have done this a few times already, but better late than never. 

So I'm going click 'Play' to run app. Okay, it worked. So let's pull up the emulator, and there we have it, looking pretty decent. And that concludes our look into multiple layout views and writing some basic code in XML as it applies to Android Studio and we were also able to experiment our way through. And as I said earlier, the code here or the view stacking that we've done may not be optimal, but we reasonably got it to where we wanted. And I'll pull up the image, there we go, pretty close. 

There are some differences. And at this point you can continue adding functionality to your calculator. For example, you can make the buttons do something like change the text that's displayed in the TextView over here, or you can display messages or change the button colors. Lots of options or things for you to play around with. But we're going to stop here. So, hope you enjoyed building this and in the next video, we'll jump into animations. See you there.