Ultimate Guide to use Constraint and Motion Layouts in Jetpack Compose

 Hey everyone. Welcome back to my blog. Constraint and Motion Layouts were one of the best features that XML had. It made creating layouts in XML pretty easy. If you're wondering that, how do we use constraint and motion layouts in jetpack compose Stay until the end of this blog where we will discover exactly that. 

 Starting with the blog, I have already a basic project set up where I have the dog image inside the Drawable folder. Along with that, I have set up a lazy column with a composable function that I have made. Now the first thing we need to do to use the constant layout in jetpack compose is to actually add the constant layout library in the project and then sync the project.

So let's do that first.

implementation "androidx.constraintlayout:constraintlayout-compose:1.0.1"

 In here, you can see that I have already added the constant layout library and synced up the project. Now we can use the constant layout library in our project.

 Now in the composable functions, I'm having a card, and inside the card I'm having a row, which will contain all of the layout that we have to specify for this particular project.

 Now let's use constant layout to make the layout for this composable.

The very first step to create constraint is to create unique ideas for our components. To do that, we have the create res function, which will create the unique ideas for the components. So in here we have created three unique ideas for three different components that we are going to implement.

The next step is to use these references in the composables that we created

 now similar to xml, we have to  set the constraints to the image view. Compose automatically figures out the parent based on the hierarchy. So we have set the top of the image to the parent's, top, bottom to the parent's bottom, and start to the parent's start and height and width of the image would be 40dp. We can also set the wrap content or match parent property to the height and width. Now let's create two other text views.

First, let's run the app and see how's it looking.

 So as you can see that the images have been placed exactly at the constraints defined by us. Now let's create two other text views.

 Here I  have created two more text views. The name text view that is linked to the top of the image's top and start to the end of the image. It also has a margin of 10 DP on the start.  Similarly, the date text you is linked to the bottom of the name, Text You and Start is linked to the end of image with margin of 10 DP as well.

 Also note that I have formatted the date to show onto the screen using the simple date format. Now let's run the app and see how's it looking now.

 And now as expected, the layout is exactly what we defined it to be.

Now there's another method to create these constraints. instead of creating these constraints one by one, we can create all the constraints at a single place and then use them accordingly.

We can use constraints set for that.

 Here I have created exactly the same constraints as before. The only difference is that I have placed all the constraints at a single place using the constraints set function.

 After that, I have passed this constraint set to the constraint layout and then simply removed all the constraint as functions that we defined earlier.

Now, let's go ahead and run the.

So now if we run the app, you'll see that the constraints have not been placed onto the screen. Why is that? Well, that is because we define the constraint sets for each of the composable, but we haven't referenced those constraints to the composable yet.

To do that, we have to specify the layout ID for each view. The constraints are made for.

 Here we have  specified the layout IDs for the views and the layouts for which we created the constraints.  One thing to note here is that the name of the ID should be exactly the same as the ones you used to create your references for. So the dog Ivy is the same as Dog Ivy and same goes for the other composable and constraints as well.

 Now let's run the app once more.

I will see that the constraints have been applied properly as we expected them to be. Now, we can also create guidelines as we used to do in Nextel layouts as well.

 Here we have  created a bottom guideline that is located at 40% from the bottom.  We can have the guidelines from all the directions like Top Start and end as well, like we used to have in the XMLs.

The guidelines can take both percentage or specific dps to create the guideline. if we wanted to create a guideline that is a hundred DP from bottom, we could have done that by passing a hundred DP as a parameter to create guideline from bottom function.

 Here you can see that I have changed the bottom constraints of image and data text view to align with the bottom guideline,

which gives us this result. You can notice that how the content is now squished up to the top, taking 60% of the entire composable.

Similar to guidelines, we can also create chains as well. Let's do that.

 First,  we create two new references for the icons we are going to place.

 Then we  add constraints for them. Now to use them, we have to create some more composable.  So let's do that

 here. I have created two more composable. They are simple. I can views. Now, the final thing that remains is to actually create the horizontal.

So to do that, I am simply going to create the horizontal chain here. I can use any type of chain style that I want when I'm going with spread. So let's now go ahead and run the app to see how it looks. So you can see that we have created a chain for those icons and made full use of constraint layouts.

 Hey guys, just a quick pause here. Just want to tell you that if you're interested in learning about the advanced concepts of Jet Pack composed such as creating our own animations, gestures, views, and layouts, then do check out my course.

The link will be in the description box down below. Now, back to the video. .

 All right, so now that we know about how to use the constant layouts in JAK Compose, we'll next look into how do we work with motion layouts? Well, motion layouts are based on constant layouts only so we can work with the constant sets in motion layouts as well.

Let's look how so here. As you can see that I have a very basic project already set up. Now, the first thing that the motion layout needs are the starting and the ending constraint sets. So first, let's create.

So here you can see that for the expanded screen, I have created a constraint set In that I have a guideline that takes 30% of the screen from the top. I also have two views, a simple view, which we are considering as a video view.

The second view is a simple text view. The video view takes up the entire height and width till guideline, and the text view is aligned to the bottom of the guideline.

  So here you can see that I'm using these constraints in a constant layout to visualize how is this looking?

 So you can see that this is how the layout of the YouTube video view looks like. So now that we have the starting constraint, let's also define the ending constraints as well.

 Here I have now changed the constraint set to master the YouTube's layout. Now I have replaced the top guideline to the bottom guideline, which takes up 10% of the screen from the bottom in that the video view takes up one 50 DP of width and entire height. Next rate, it lies the texture, which takes the entire height and the width remaining.

Now we have the starting and an ending constraint, so motion layout will animate the constraints from start to end. But before we do that, let us visualize that. How does the constraint end looks like?

So you can now see that this is how the ending constraint will look like.

Now before we go ahead and add the motion layout, let us first add the animated progress.

 So here I'm using the animate flow function to animate the progress of the animation frame by frame.

Now finally, with that done, we are now able to use the motion layout into the project.

 Here. The motion layout takes the start and ending constraint sets, and for the progress it takes the animated progress that is the value of the float that we have animated. Remember to add this before the slider so that the slider remains at top here instead of having the constraint sets, we can also have the motion seen in the form of Jason or Exel files as well. Now before we move ahead, let us go ahead and test the app.

  So you can see here that as I update the value of the slider, the animation will begin to.

  In this example, we are using the slide to change the progress of motion layout, but this could be handled using the gestures as well. That means we can set up an anchor to the video view and process the dragging of that view to change the progress value.

Doing that will result in actual YouTube like dragging animation  if you'd like to learn about how do we capture and animate gestures.

Head over to my course going Pro and Jet pack Compose, which is available on my website where you learn even more advanced concepts like such. The link to the course will be in the description box down.

 So let's keep the video. Until this point, I hope that you learn something of value in this video. Thank you for watching the video and for your time, we'll meet in another video. Until then, keep contributing Court to Humanity.