5 - Column & Row - Jetpack Compose - Android Studio

hello my friends and welcome back to new video in  this video I'm going to show you how to use row   and column two great features of the jetpack  compost so please subscribe to the channel   and give me a thumbs up for this video and let's  Dive In [Music] here I have the same structure as   the previous videos a composable function name my  app and the preview function and I have added the   uh uh composable function here I have  called it actually in the set content   and this is the preview I have a text  subscribe what if I have another text let's see and you see these two  texts are overlapping on each other   so what if I have another one [Music]   and you see that is even worse so we need  a feature to divide them for this we can   use column to divide them vertically and row  to divide them horizontally let me show you without adding any feature to the  column let's locate them inside it   and now you can see that these are arranged  vertically and if I'm changing it to the row you can see the changes yeah I have  all of the text arranged horizontally   we can add some features on the row  and column as you see here modifier   as always horizontal Arrangement and vertical  alignment and if I'm changing to the column you can see it's pretty the same modifier we have  but the arrangement and Alignment are reverse   there we had vertical alignment but here we have  vertical arrangements and the horizontal alignment   instead of the horizontal Arrangement so these  are the differences between row and column as well   let me show you what are these actually uh  consider now all of the texts are starting   from the like left edge of the screen  which is the start we know it at the start   and from the top of the screen uh what if I  want to see them in the middle of the screen so here I am going to add a modifier equals to modifier dot deal Max size and now this is my  screen size and the column is expanded   in the whole area and if I want to see  The Taste here in the middle uh I can add horizontal alignment and here are the options of the alignment Now  by default is on the start alignment.stat   if I add the alignment dot end the text will go  here to the right side and if I check this one   the text will come here in the middle [Music] okay now we can see the text are here in the  middle but we want them here in the middle   of the screen so uh we can add the vertical  Arrangement and then Arrangement and the same   we have some other options as well so I'm going  to use this one and then I will show you the rest   just to know for now by default we are sitting  here Arrangement top and if I'm checking this you can see the text are  located in the middle of the SK   but there is no space between the text but if  I want to manage some spaces between the text   and divide them expand them we can use  the other features of the arrangements   it can be a space evenly a space around and a  space between let's solve it a space between if I select a space between and you can see that  the whole area of the vertical uh size of the   screen will be divided between these texts just  like that and if I change it to a space evenly it will be like that the whole  empty area is divided by four parts   one here one here and two between the text and the differences between space  around and a space evenly here we have now a space around these two  areas are the same and this area and this   area are uh like half of this empty area just  like that uh now what if I change it to row as you see I have error here because I  told you that in the row and column these   factors are reverse so instead of horizontal  alignment now we have horizontal Arrangement   and instead of vertical arrangement we have  vertical alignment so I have to change them arrangements and align and let me cut it and paste it here and let's cut it and paste it here and this one should be  vertically now let's see the differences okay the texts are expanded in the screen but  horizontally and you have them here in the middle   of the screen uh these are the features of the row  and the column and how and why we should use them   uh so I think that's enough for this video and I  have covered everything about the row and color   so be with me in the next video and in the  next video I'm going to talk about the Box   one is also one of the good features of  the jetpack compose is something like   frame layout in the classical Android system  so if you want to see that video remember to   subscribe to the channel and hit the Bell  button to be aware about the new video   to have the notification about the new videos  give me a thumbs up for this video and you have   any comment and question you can write  them down below in the comment box and   I will be so happy to answer them thank  you very much and have a good time bye

Channel: MkrDeveloper

Views: 1,150

Keywords: how to use Row and Column in jetpack compose, Row and Column - Jetpack Compose - Android, Row in jetpack compose, jetpack compose tutorial row - column, Mkr Developer, Mohsen mashkour, android jetpack compose Column, Column in jetpack compose. Android studio | Kotlin, android studio, android jetpack compose, jetpack compose mohsen mashkour, jetpack compose for beginners, jetpack compose composable, jetpack compose, Jetpack Compose tutorial part 5, Basics jetpack compose tutorial

Id: 2uAZ8Te7YmE

Length: 9min 10sec (550 seconds)

Published: Tue Jun 20 2023