RelativeLayouts

Fahd Sheraz
A free video tutorial from Fahd Sheraz
Lead Web Developer & Software Engineer | Instructor
4.3 instructor rating • 6 courses • 70,659 students

Learn more from the full course

Kotlin Android Development Masterclass

Learn Kotlin, Android Development, Android Studio & IntelliJ IDEA from Scratch. Build Android Apps in Kotlin.

32:16:59 of on-demand video • Updated February 2020

  • Build sophisticated Android Oreo Apps using Kotlin
  • Quickly master Kotlin Programming language
  • Become a Confident Kotlin and Android Developer who is hirable
  • NEW Content and Updates will be added to the course frequently
  • FULL SUPPORT - Your answers will be answered promptly!
English [Auto] OK so now I'm going to show you the relative lay out. Now the moment we go back here and change our main note here to relative lay out save and go back to our design. Look at this. Looks like everything has disappeared. All the buttons. What happened is this. It's relatively out. So everything is relative. They are now all stacked together. You can see here we still have buttons four and five. They're there but they're just on top of one another. Guess so let's go back to our two our SML here. Let's go ahead and play around with some properties here. There is a way that we can align things relative to other items on other widgets for instance if we wanted to a line as this button for somewhere to the right of button 5. We can do that. Relative allowed allows us to do so because it's more flexible. It's a more flexible layout that was designed for that. And sometimes you probably want to use relatively out. And then if you want to put something inside a very realistic way out would be a linear lay out if you want to have that sort of flexibility that he can get from a relative way out very linearly out rules there we can get from a linear layout. So what we can do here we can do the following we can go ahead down here or a second button we can go and say something to right of gay. So we have here for you probably this is lay out two. And of lay out two left of lay out right. OK. Let's start with two and of and see what happens here. Now here they lay out the end of requires an ID of the layout that we want to be to the end of. OK in this case here we are just going to say at the forward slash and then we're going to pass the button five. All. Notice the difference here. At the top here you have add plus ID when we have these we are assigning an ID to this button. In this case here we're not assigning an ID we are assigning the other item that we're going to be to the end of. And of course as you hover over here it says the support to support older versions an API 17. You should also add Android to lay out right of game which will show you. But for now we have to do it so that we don't have this error. So say lay out to write of and we're going to pass the same ID which is five. Now that error went away you know. In fact let's just get rid of this altogether because we don't need this will do all the job for us. Save this. Go back and look at that right away. We were able to push the second button to the right. That's giving different different names to these button let's say enter. And this one and I just say log in. I can see the differences here. Look at that wonderful thing we can do if you don't want to do the lay out. We can say for instance two left of people enter slugging is going to be first enter last log and left or right. OK that happened. But look what happened here what happened. You can see this this sort of let's make this bigger. You can see here there is the button. But because the main button it's was to the left to the end of our where our screen begins. It just got squished over there. If we didn't have if we had this button to either side we would have seen it. OK but let's let's go. Having said control Z it would change back to what we had before. So we're back here and there we go now to see that working. I'm going to move both of them to the middle. And then we gonna to try it again. So what I'm going to do now. I'm going to move the enter to the middle of the screen. OK. Now check this out. So if I go here and I say so what am I doing here. So now I have this lay out Center horizontal what this will do. It takes him bowling. They say true if we save this it's going to center it horizontally. OK. On the screen. Look at this. There it is. It's very horizontally. Now if we go back and do what we were intending to do which is to move this log in to the left let's say to the left let's see if that's going to work this time. Save should see log in first and then go see log in now is here first. Now notice something very interesting here because they enter the first button here which is this one here we want it we said it has to be center horizontal to be true and really is center of his own troop because he can see now this. Dotted line is going all the way down which means it's really centered here. Now if you want to go ahead and center it vertically in the middle. All right. We can do the same. We can certainly do that. So just changes to center vertical to true. Look what's going to happen save and enter now is there. Now is centered vertically because we got rid of the center horizontally. It's not going to be right in the middle here right now. Check this out. We go back here and say Center or zone all to true as well look that we have it being here perfect as you can see here. There is the log in as we specified still to the left of the enter button. Now you can see with a relative way out you can do a lot of things you can manipulate things to be where you want them to be in relation to the swing and most importantly in relation to other widgets that you have around. Now what if we want to make sure that certain items are where they are in relation to the whole screen. OK. Well let's see if we want to make sure that there's loggin here is at the bottom of the screen in relation to the screen. OK. So all we can do we can go back to this button here. Let's get rid of the lay out there. Now let's keep it that way. I think that's fine. So let's say if we wanted to get this log in here 12 line with the bottom to be aligned with the bottom of our Enter button here. So all we can do and we're back here say Enter say bottom says lay out a line bottom say Enter analysts at the bottom five and save Look wait and see. Now there are bottoms are aligned as we specified. What if we got rid of these two left a alignment here let's just get rid of that for now and save what's going to happen. Well so now we got rid of that pain and see here but we still are aligned with our Enter button. Very cool. Very cool indeed. Put it back. Now what if we wanted to add another textfield Let's go ahead and add a text to figure to say text you can wrap content give an idea of course I'm going to call this my tax XTi go let's give it the text text you say is or get this by default goes to top left. Let's say we want to take this text view and make it move it to the middle of the screen. Why do we do. What can we do about that. Volkan say Center or zonal to be true. So now see it's over there in the mail. Now let's say if you wanted to actually move this all the way to the bottom of the screen what do we do. Well turns out there is a property we can use we can say bottom so lay out a line parent bottom Supergirl like this and say true it's going to align at the bottom with this bottom here. Right. So move all the way down here. Very nice. Getting the hang of it. Let's say if we wanted to actually move this to the right of our Enter button here. OK. Well what can we do. Let's get rid of all these well what we can do. We can do the same as we did before we can say to the left of that pass and Heidi of button five say is let's see what's going to happen. I said two laughed and laughed. OK. So it's going to be to the left of that button which is not what we really want. Let's go ahead and say two right here. Save at that now you see it's aligned to the right. It's not side by side. Those are two different things right. We just seem to just want to draw a line with the bottom five which is the entry here. Now if we say we want it to be side by side with our entry button we could do just what we do with luggin can go ahead and say the following line. Bottom fine save and look at that. Now it's aligned to the bottom of the five. Very nicely done very nicely done. So as you can see there's a lot of things you can do a lot of properties you can go ahead and play around with. Of course all of this you can can be done by dragging and dropping but there will be times when you want to do it yourself. Well going back to the code part of things and do yourself and this is how you would do it. OK. And remember in this case here we don't have a constraint lay out. We are just straight going to the relative lay out and other lay outs. OK. So that's the difference here. All right. So I'll see the next video.