TableRow Layout

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] All right so in this video we're gonna talk about table row as another lay out type. So what are going to do we're going to go to our lay out here and say and you say lay out resource file and we're going to call this table lay out. And I'm the root element let's say relative way out because that's the one that we prefer as we go in there we have our view the design view here very nicely. They will have relatively OK. So what we need to do is go back to our open our text here and align things that work decently fine. So what we're going to do here we are going to add a table lay out well what we can do. Let's go back to our relative here. Let's find a table lay out here let's table the way out so you can see our table layout. There's two things that are table layout and there's also a table row. So now we would imagine that if we are using a table way out we need to use a table row to supplement inside Gates or table or it was part of table layout but we have to include it. So the table layout is just the layout that we can add a table row that we should add a table row because that wouldn't make any sense if we did it right. OK. So we got into drag this table lay out inside our lay out relatively up there and we noticed right away we have our table lay out there and even added a few table rows to start with let's go back here and you can see we have a few table roll rows inside of our table lay out. Let's give a background to our tape relay out here. Same background color skew the color that we've been given here. Go ahead and get rid of a few of these. We just need one for now. So we have a table row. So a row the table row is essentially allows us to organize items in a row. OK. Now what if we wanted to add items inside of our table or what are we going to do. We can actually change this to something different. We are actually going to go and do this like that so that we are going to add items inside of these row. That's where we are going to put items. Let's go ahead and put it text view. OK. In this text you're going to start constructing it. Let's give a text that say is first name and then let's say give it with lay out to be rap content with a height. Lay out to be so Ropp kind. OK. Say listen look what's going to happen. And look at that. We have that. Now I don't like this color. We added because now it merges with everything. Let's change its color here to something. In fact let's just keep it white. Why not. OK. There we go. There you go. First name now let's go ahead and give the color to the row here. That way we can actually start seeing the difference say background give a color of dark and see what's going to look like. There you go. Let's change it. Text color here because we need to make sure that we can see let's go in and give color X and Y and that's what we have right now. There we go. There we go. There we go. That looks good. Now what if we wanted to give it a little padding to make sure that it looks better. I was paranoid that everything is to the left and top was just a general pattern. How will we do that. Go back to our here. Now if we want to give a general padding to the entire table view of course we're going to go to table view note here and I'm going to say padding. I notice we can give it top left to bottom by now if you just say padding. It's going to give a general padding. OK. Now we're going just going to give a 15 D-B patting your back. See now we have a general padding of the entire row. Now if you want the inside of this row we need to also go inside of a table row and give it padding. That way I can say padding here and say give 12 DP the save. Now look at that. Looks really nice right. So we have this nice looking round. So now we have this row let's add another text view in service row. And remember this is a row which means things will be stacked with left and right. Greg it's going to be last name. That's Maxson color. That's good. Right now we have a problem here because we have an issue where everything is to the left so we need to give a little padding here so we can differentiate first from last name. OK. How do we do with that. Well we can go ahead here or second text you can go ahead and say left padding so padding left can just give it 10 DP say this and run and you can see that. And the last one we can add here so you can add as many as we want but we're just going to add three. So that's kind of it isn't. This one is going to be age and everything is good. And we look and there we go. How about giving more padding. That way would have a better looking. Let's give it 20 about 20 EDP. All right. I started looking very good. So now we have our table row here which is inside our table layout which is inside of a relative way out. And of course we can add more grows into our table lay out how we do that. Well we can simply go here see this table row here we can copy this entire table row and let's put your comment. This is how you do to add a comment inside of our SML file. You put less than exclamation mark dash dash and then you finalize like that. So here we can say second row and you paste that and all you can do is go ahead and change to add the actual values. We can go ahead and say for instance name is Bonnie last name is Caylee and age let's say 25 for over 25 now have we last user interface of our table lay out here which contains all those table rows. OK. That's VERCO. And you can see the usability or when could you use the table rows in many many cases. I usually use table rows too when I want to make sure that all of the items that I am aligning are on the same row for instance. Right here I gave you an example of text if your body could have added any other widget inside there if you wanted them to be aligned in a row. OK. So there's a lot of things you can do and the think about table rows or table layout is that really they really organize your items in a very very nice predictable way on the screen. As you can see here we want to give a little space from the top here. We can say give it a margin say margin lay out margin top here and give it to 12 ADP for instance and you can see there is a margin added. And we can keep going and having as many table rows as we need. And as you can see things are very nicely organized. Okay perfect. I'll see you next.