Hello and welcome back, carrying on from where we left off in the last video and looking at linear layouts. You see from our code that the linear layout wording that we have over here, the beginning of this tag, it's showing up in red and that's because we haven't constrained it to the constraint layout, we constrained it in our screen. So, as you know, we can do it from here right from our attribute view, but we can also do it from here. Let's do it from the code itself. So, what we're looking for is a left constraint, a right constraint and a top constraint. 

So, what I'll do is right here after the orientation horizontal, I'll go to the next line and start typing in constraint and you see all the layout constraints show up. So, I'm going to start with Start_toStartOf. This one which is the left constraint. So, I'm going to hit 'Enter' here and I'll set it to the parent which is the constraint layout. You see it has moved to the left of the screen. Similarly, I'm going to do the right, so start typing in constraint again and I'm looking for End_toEndOf which will do the right. Again, parent. Now you see it's in the middle of the screen and then I can also do Top_toTopOf to pin it to the top. So, I'll do constraintTop-toTopOf and parent right there. And we'll get more familiar with this as we move on. 

Now let's get some more practice using linear layouts but also writing the code out here fully in the code area. So, we get a lot more practice and we'll start off by trying to build the layout of a calculator like this. We're going to attempt to replicate to the layout not fully, but uniform placement of the buttons with a TextView on top, something like this. So, as you can tell right away, linear layouts here would be very beneficial since you have buttons that are evenly placed all over the screen and they're arranged horizontally and vertically, starting with the TextView. So, I'll create a new app and call it Calculator Demo. So, file, new, new project, empty activity, next, I'll call this My Calculator Demo. Everything else is fine, finish. 

And the aim of this app is not optimal layout view arrangements or anything like that. It's to experiment with code and get used to writing some XML in this Android Studio setup. All right, here we go. So, I'm going to go to activity_main and I'll get rid of the project tab right here. And let's zoom in a little bit, oops not that much. And I also get rid of the TextView that I have, the default TextView. And let's go to the split screen. All right, so now I have my code here and my view here. And in the code you can see that I have the constraint layout right here, and if I scroll all the way to the right, so this is where this constraint layout ends. 

So, android constraint layout, you see the opening left angle bracket of the tag and then you have this slash and right angle bracket. This signifies the end of the tag. So, whatever layout or view or code that we work with, we're going to put this within this main constraint layout. So, if I actually click on this and bring in a TextView and go back to split screen, you see now the ending tag, the slash and close angle bracket has disappeared from here and you actually have this entire constraint layout closing tag at the bottom and the TextView is now placed in between the opening and the closing, So, I'll get rid of it right here, if I delete this, check it out, we're back to that constraint layout tag. 

So, to summarize in XML, you'll either have elements which have opening and closing tags which are separate, or you'll have a tag like this with the left angle bracket signifying the open and a slash and a right angle bracket signifying the close and this is what's called a self closing tag. All right, and you'll end up in this scenario when you don't have any other things you want to include within that tag. But that's not the case for us, we're actually going to include a lot of other things like linear layouts and buttons and all that stuff, so let's bring in a linear layout. To do that, first I'm going to get rid of this slash and a right angle bracket which indicate the self closing tag. Instead, I'll put just the right angle bracket which just means the close of this opening tag. 

So, write here right angle bracket and you see what that does, Android Studio brings in a closing tag right after that. So, I'm going to hit 'Enter' and make some space. So, now what we have is an opening tag and a closing tag. Now we can put whatever other elements we want within here. So, a quick sidebar here. In general, the idea behind constraint layout is that it allows you to position all of your children without having to nest any other view groups inside the constraint layout. As such, you'd simply constrain the view elements to the constraint layout and/or to other view elements within the layout to maintain a nice organized look. 

However, that doesn't mean a linear layout is bad or it cannot be nested within a constraint layout like this. Doing it this way in this app will help us understand layout views and structuring, and it will also allow us to write the code out and experiment with different settings as we write them and it will allow us to easily work with weighted spacing views which we'll find out what they are soon. So, it's okay to use it. Again, it's important to remember that while learning to code with tools like this, experimenting with the code is the key and not the optimal layout structure in the beginning. Now back to our app. So, let's start with the linear layout. So, left angle bracket and there we go. Linear layout, I'll hit 'Enter' here and for layout_width I wanted to span the whole screen but instead of choosing match_parent or wrap_content, what I'll do is I'll put "0dp". 0dp will work once I put in some other attribute item here. 

I'll do the same for height, "0dp". I'll put in an orientation "vertical" and now I'll add in the constraints. And the constraints will dictate what this view is constrained to. Basically, it will dictate the width and the height. And I could have also done match_parent here for layout with the height, but I want to take care of the constraints so that they kind of override this 0dp thing over here. I'm going to start with the constraints and with the constraints, you're looking at the top, the two sides and the bottom. So, for the top, I'll say Top_toTopOf and as soon as I start writing Top you see under layout_constraint, Top_toTopOf pops up. And this one, I'll say parent, so now I'm constrained at the top. Then for the left, I'll start saying Start which is Start_toStartOf. 

Here we go, Start_toStartOf "parent" as well. Then to the right, so that's the End_toEndOf. So, I'll start typing End and you see here layout_constraintEnd_toEndOf "parent" as well. And then Bottom_toBottomOf, so I'll start typing Bottom and you see Bottom_toBottomOf. So, now I have constraints for the top, the two sides and the bottom. What I'll do here is I'll put the right angle bracket for the close of the opening tag and that will also give me a closing tag. You see there? If I hit 'Enter' there, you see I get the closing tag for this view for this layout view, and now whatever I put in in here will be within this linear layout view which as you can see now spans this whole screen. 

All right, so let's bring in a button and remember we have our orientation as vertical, so whatever item we bring in here will be stacked one on top of another like the look we're going for. With this calculator you see we have the TextView, below it we have a row of numbers, basically row of buttons. So, each row is stacked on top of another which is the look that we're going for. Let's start with a button. So, I'll say left angle bracket and there is my button, if I hit 'Enter'. So, the layout-width I'm going to say match_parent. So, it matches the parent which is the entire width of the page. And then for layout height for the button I'm going to choose wrap_content because I only wanted to take as much space as the button needs. 

And as soon as I do that you see the button pops up. I don't have any text or ID or anything. So, for all elements that we want to identify we need an ID. So, what I'm going to do here is enter in an ID. So, as soon as I start typing in id, you see android: id and for now I'll say button, I'll just say four, buttonFour to start. So, I have an ID now as well. And so let's see, we want some text for the button. So, I'll say text, I'll give it the number 4, so you see 4 pops up and then we'll increase the size of the text as well so we'll give it a textSize. There we go, textSize and we'll give this "30sp". And remember sp is for scalable pixels which is the preferred format for text. So, now I have this button that spans the entire width of the view, now let me close this button tag. Now here is where the contrast is between the other types of tags that we've been seeing so far, which actually include other elements within them. 

But this button, it's not going to include another element within it. All I've done is define the attributes of the button and that's it. So, this is going to be a self-closing tag. In this case, so I'll put a slash, there we go, and a right angle bracket shows up. So, now I have a self-closing button tag, it's all-encompassed here and that's fine. So, what if I wanted to bring in another button below it? Well, I can simply copy this, command C, go to the next line and command V. And check what happened to the view. We have another button but it's nicely stacked below the first button. And this I think is a good place to stop here. In this video, we've covered a decent amount in terms of layouts and code. And in the next video, we're going to continue experimenting and we'll start working on the second button, starting with changing the ID. You see the color is red so we'll figure out how to fix that, I'll see you there.