Constraint Layout in Jetpack Compose using Kotlin | Android Studio

hey everyone welcome back to my channel in this video we will learn about constraint layout in Jetpack compos so as you already know in XML we have three types of layouts linear layout relative layout and constraint layout out of which constraint layout was the most recommended layout now in Jetpack compon again we have three types of layouts column layout row layout and box layout then where does this constraint layout come from in Jetpack compose it's an additional layout that can be used by adding an external dependency means you can use constraint layout in Jetpack compos too like in the column layout two components are above or below each other vertically while in the row layout the components are beside each other horizontally then in the box layout the components overlap each other while in the constraint layout the components can be linked to each other horizontally as well as vertically let's see how so I will create a composable function as learn constraint layout and done make sure to call it here inside the set content then the first thing that we need to do to use constraint layout is to add its dependency in the grel so go to grel and the constraint compos dependency I will mention it in the description box click on sync now and then now come back to the main activity we will create an example project to understand four main concepts of constraint layout in Jetpack compose first how do we create a constraint layout second about the dimensions in the constraint layout then third are chains in constraint layout and four are guidelines in constraint layout got it so first let's see how we create a constraint layout inside the compos function write constraint layout then inside it we will create four buttons let's say red button green button blue button and black button these are just the variables not the button itself so in constraint layout we assign variables as references by writing create refs this variables will be assigned to the component that is the button so below it we will create four but buttons I'll show you how to create one button remaining three you will try Okay so write button I'll leave on click as blank if you want you can add a toast or any functionality then our first button is red button hence I will give the button color as red then the text on the button as red and that's it our red button is ready same way I will create the other three buttons as well and then so we have a red button green button blue button and black button got it now comes the important part we have four buttons and we have four variables so how do we assign each one of them respectively so we have a concept in constraint layout called as constraint as this constraint as is used to assign variables to their respective component like this is a red button so I have assigned the red button variable to it similarly I will assign the green button blue button and black button as well using constraint as [Music] and then now once the variable and component are assigned then it's time to link the components with each other using link two so remember in constraint layout in XML we used to have constraints from top to bottom or top to top or start to start and many more same way here we can link two components with each other using link to I'll show you how first I'll link the red button to its patter and top so write top link to parent top now this button is constrained to the top means attached to the top then below the red button I want a green button so I'll write top link to red buttons bottom means this green buttons top is attached to the red buttons bottom got it same way below the green button we will have our blue button so to constrain them I'll write top link to green buttons bottom then the same way I link the black buttons top to the blue buttons bottom and done now with the help of preview I'll show you how it looks see all four buttons are constrained to each other vertically so with the help of create DS constraint as and link to we can Implement a constraint layout clear now let's learn more additional things about it like Dimensions remember how we used to have mash parent and rep content in XML that is exactly what dimensions are so let's change the dimension of the red button WR width is equal to Dimension as match parent means the entire width will be as same as the screen's width then for the height I can use match parent or R content or field to constraint you already know what R content is right it shrinks a component according to its size then what is field to constraint it matches the constraint and then there is one more thing called as value like if if you want to give a custom size then we can use value so I'll keep the value as 100 DP see this is how it looks so dimensions are clear now it's time to move to our next concept which is a chain in constant layout so the chain is a method through which two components can be linked to each other in a particular style here in the chain we have three types of styles Spread spread inside and packed let's see each one of them so consider a situation where I want the green button as well as a blue button to be below the red button so the green button is already below the red button and I'll change the blue button also as below the red button but look both of them are overlapping each other so to overcome this situation we use the chain Styles let's see how right create a horizontal chain you can use a vertical chain as per your requirement inside H right green button and blue button because both of them are overlapping and change style as spread see spread evenly distribute the buttons by making sure that they are still below the red button next let's try spread inside see here both of them are constrained to their start and end then next is packed in pack chain style both of them are stuck to each other but they are still below the red button without overlapping next is a guideline again very simple so a guideline is used as a helper remember in XML we used to have guidelines that help us to constrain the components properly same here as well also guidelines are not visible on the screen they act as a ruler so here I will create a guideline I want the guideline to be at the bottom hence I'll go for create guideline from bottom with a 0.01 fraction means the space between the component and the bottom then I'll assign the guideline to the black button I'll write the bottom link to the guideline it's like instead of using any other component to link We simply link it to the guideline now run the app and see look the black button is linked to the bottom with a little bit of space and also guideline is not visible while these two buttons are in a pack chain style and the red button with Dimension is match parent so a quick recap we learned about create refs constraint as link to change Styles Spread spread inside unpacked and lastly the guidelines got it so yeah that is it for the video if you're new to this channel then please consider subscribing to my channel and I'll see you in the next [Music] video [Music] he

Channel: Android Knowledge

Views: 418

Keywords: jetpack, compose, jetpack compose, what is jetpack compose, basics of jetpack compose in android, jetpack compose series in android studio, learn jetpack compose, create an app using jetpack compose, 2024 jetpack compose, android studio, new android studio, latest version, java, kotlin, create an android app, text composable, 2024, android in jetpack compose, constraint, layouts, constraint compose, constraint layout, jetpack constraint, column layout, row, box, linear, relative, xml

Id: tk_4jaOFUtw

Length: 10min 33sec (633 seconds)

Published: Thu Mar 14 2024