Row, Column & Box Layouts in Jetpack Compose | Android Studio

hey everyone welcome back to my channel this is our second video of basic composable in this video we will cover a very important concept that is layouts so we have three types of layouts in Jetpack compos column layout row layout and box layout same way how we used to have linear layout relative layout and constraint layout in XML we will see each one of them one by one first create a project choose empty activity name it as lar RCB row column box and done first let me remove the default code and and done now here we will have three situations one with the use of column layout second with the use of row layout and third with the use of box layout but before that let's see what if we don't use any of the dayout then what will happen here I'll create a new composable function as learn row column box with no param M and make sure that you call it over here inside the set content then inside the compose function I'll write three text hello column hello row and hello box simple we have learned text composable previously right now now let's run the app and see what happens look everything is overlapped on each other and that's why layouts are important so let's see our first layout that is column layout column layout is like a vertical linear layout means one element then below it another element and then below it another element like this way got it I'll come in the previous code inside composable function only I'll write colum attribute and now inside it I'll write two text as hello column 1 and hello column 2 and that's it now again I'll run the app and look both the text are vertically columned similar way instead of text you can use any other UI element such as maybe two buttons in a column or two text field in a column got it likewise you can add parameters in it to customize it accordingly for example I want both of this text to be horizontally centered and vertically in the middle so to do that I'll add parameters here as horizontal alignment is equal to alignment Dot Center horizontally and vertical Arrangement as Arrangement Dot Center now let's run the app and see the applied changes look both of them are vertically and horizontally in the center got it likewise you can add any kind of parameters you want even for the column and also for the text X that is present inside the column using modifier also in next video I'll explain alignment and arrangement in detail so if you don't understand this parameters right now that's okay just make sure to watch the next video this was all about columns now let's move on to rows layout rows layout is like horizontal linear layout means UI elements will be beside each other not below not above but beside each other it I'll come in the previous code see now instead of column I'll write row and inside it both the text as hello Row one and hello row two simple now I'll run the app and look both of them are beside each other so in similar way if you want two buttons to be beside each other you can simply go for row layout again we can customize row layout using parameters same way how we did in column layout like if I want both of them in Center horizontally as well as vertically in the middle then for that I'll write vertical alignment is equal to alignment Dot Center vertically and horizontal Arrangement is equal to Arrangement do center now again let's run the app and look both of them are in center and this is what Ro layout was all about moving on to a third layout that is box layout so column layout means elements will be above or below each other correct row layout means elements will be beside each other correct then box layout means elements will be overlapping or will be on the top of each other like imagine there is a card View and on that card view we have a button so so what is happening over here that button is on the top of card View and that's what box layout is all about it's like nesting of layouts see I'll create a box layout then inside it again I'll create a box layout and inside it a text as hello box simple so what is happening here we will have a box layout as a surface then on that box layout we will have another box and over that box we will have a text got it now again you can customize it however you want like for main box I'll give the modifier as fill Max sites means it will cover the entire screen whose background color will be yellow and whatever content that will be present in it will be aligned as Center these are the parameters then for the second box I wanton cover the entire screen instead I'll create 300 into 300 DP box so to do that I'll keep height as 300 DP and withd as 300 R DP then the Box color will be blue simple it might look very confusing but you will understand it once I run the app then next I'll customize the text as alignment center color white and font size 30s got it now let's run the app look we have an entire screen as yellow that is pent box layout then on the top of it another blue box and again on the top of it we have a text as hello box do you see how every element is on the top of each other and that's what box layout is all about make sure you remember all of these terms because we will be using it often and I guess that is it for the video if you are new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video

Channel: Android Knowledge

Views: 879

Keywords: jetpack compose, android, jetpack tutorials, compose, learn android app, learn jetpack compose, app in jetpack compose, create a app, android studio tutorials, jetpack compose android, 2024, series, learn android, create jetpack compose app, college project app, final year project app, android development, android knowledge, learn app development, mobile apps, develop apps, create an app, tutorial, topic, new android video, latest android studio, error, solve error android, code

Id: YbVm9Ue_J7E

Length: 8min 53sec (533 seconds)

Published: Tue Jan 16 2024