Welcome back.
And this video, you are going to learn how to use the constraint layout with a decoupled API that can
help us build different designs for the portrait and the landscape orientation.
So we're simply going to decouple the constraints from the layout they apply to by creating different
constraints sets for each orientation.
So what does that even mean and why would you bother?
So the thing is we have our screen as it looks like this right now.
And if we want to rotate it or if the user wants to use it in landscape mode, we want to see something
like this where we have the image on the left hand side with the text of Siberian husky in Germany underneath
it.
But then we have also the followers following and posed in a different way.
OK, so basically this is the design that I want to have in the end.
So of course, you could say there should be less of a distance here at the bottom or something like
that.
So that's really up to you.
Or if you want to have some more space here at the bottom to then add more items later on, that's good
as well.
But the thing is, we don't get this behavior as of now.
We have to define this specifically.
We need to specifically define where every single item needs to be.
For the portrait mode, which we have defined in the last video, as well as for the landscape mode,
which we are going to do in this video, but therefore we will need to make a big change to our application,
to our code base.
So let's go ahead and change our code up quite a bit here.
Therefore, what we are going to start with is going to be something called a constraint set.
OK, so I'm going to create this private function called portrait.
Constraints.
OK, so here I will pass in the margin that I want to use throughout the entire.
Method.
Okay.
You need to import DP here for it to work, and it should return a constrained set.
So this method, when it's called it, will return a constraints set.
So let's go ahead and return a constraint set.
So constraint.
Set this one here.
So now we need to say what we want to have in this constraints that so how do we want to constraint
all of our items here?
So for example, we have this constraint for our image and I'm going to close Samsung Dex because it's
going to you constantly want something from me.
So here we have the constraint, as with the image and the top link to start linked to and and link
to.
And this is linked to the guideline and so forth.
But now let's look at how we can set this up inside of our constraints set here.
Therefore, we need to have a reference to our image.
So let's give it a reference by calling the Create RAV4 method.
And here we need to pass in the idea that we want to use, and I'm going to give it the idea of image.
So now I can create a constraint for my image.
So here I present the image and I can define what I want to have.
So let me just copy the constraint that I have for my image from here.
So copy it and pasted in here.
Even though the guideline, of course, now does not exist.
I'm just going to.
Well, keep it simple and say that it should be linked to the parent top.
So now let's do the same thing for our next item on the list.
So what would be the next item?
Well, I'd say it's the name text.
So let's go ahead and create a reference for the name text like so.
And now we need to add the constraint for that main text.
So here, main text should have the constraint.
And now let's see what constraints we have for the text and it was this one here we call that name text.
So here you see modifier constraint as name text.
So let's just copy this part out and put it in here for the name text.
And now we need to do the same thing for all of the other items as well, even though here we just copy
and pasting because we had the constraints set up for the portrait mode.
But now we want to have them for the landscape mode as well.
So let's, first of all, finish the portrait mode and then go over to the landscape mode.
So I'm just going to simplify this and set up all of the properties that we're going to need here.
So all of the variables, the contrary, text the raw stats, and I'm going to call them raw stats.
Like this button follow button message and guideline.
OK, so now let's go ahead and create the constraints for them.
So we have the name text.
Now let's go ahead and add the country text, which will just be.
To the bottom of the name text, so it's topped the country text top will be linked to the bottom of
the name text, so it will be underneath it.
It will be towards the left of the parent.
What's left will be at the left of the parent and the right will be at the right of the parent, which
will drag it.
So we will get it like where the text is in the middle.
So that's what we get by dragging it towards both sides.
Okay.
What the contrary.
Text.
Now let's add the row stats as well.
So where we have the stats in one room, as well as the button to follow, and here we have something
I misread that we have the width as well.
Yeah, so basically we have the same approach, only that the margin now will be defined as the margin
that we are passing to the portray constraints method.
So this parameter that we have here will just be used here.
All right.
Now the same thing for the message button, OK, button message will be linked to the row stats bottom.
It will be to the right hand side of the button fellow.
So it's left would be to the right of the button follow.
OK, so that's what we're saying, and there's a right will be to the end of the screen.
So to the parent and to the right hand side of the screen, and we're wrapping the content for the width.
So now if we do that, we can go ahead and use this portrait constraint.
But therefore we need to make sure that our constrained layout will be inside of something called a
box with constraints.
So let's create this BOF box with constraints, and now we can create the constraints in here.
So constraints which will be defined using an if statement.
So if the men with will be 600 density pixels.
So if the width of the screen that we have available will be 600 density pixels, then please use my
portrait constraints with a margin of 16 density pixels and then otherwise.
So in the LS block, set up the landscape mode.
So here to do call landscape constraints.
So we need to, of course, set up the landscape constraints method, which will be pretty much the
same thing as our trade constraints method, but has different values assigned to it.
So different constraints.
So now we just need to tell our constraint layout that it should use this constraints variable.
So I should really modify its appearance based on the settings that we have defined.
So here can and should call this one constraints like so then it makes sense.
So now if I use these constraints, you see, suddenly all of this stuff doesn't work anymore, so create
rifts doesn't work anymore.
The image with its constraint s doesn't work anymore, so we need to get rid of this stuff altogether.
So let me delete this.
And the same goes for there's create references and guidelines because we cannot use it anymore.
So let's do the same thing with our.
Well, for the tax, we don't need the modifier to define it here anymore.
Same goes here.
So let's get rid of this thing.
It even goes all the way up to here.
And the same goes for this modifier.
Well, actually only for the constraints, because here.
We want to keep the rest as we had it, and we used to modify only for constraints either.
So let's get rid of the entire modifier and same goes here.
Even though I just realized that we will need to use the modifier to assign an ID.
So now let's assign IDs to each of those items.
OK, so we have those IDs that we have here, you see, create reference ID for the image, for the
name, text for the country takes the role, stats and so forth.
Right.
So now we need to say that, for example, the image at the top will have that particular ID.
So let's assign this ID to it.
Therefore, I'm going to add the layout ID here, and this one will be the image.
Then we need to add an ID to my text.
So let's use the modifier, the odd layout ID and call this one what they would call the name text,
I think name text.
And the same goes for this one here, separate with a comma.
Add the modifier and actually modifier should be the modifier as well as modifier should be the modifier
here.
And this one will be their country.
Text.
So now the role needs an ID as well.
So let's add in layout ID, and I think we call the role stats row stats.
The button here.
Modifier and not this, but modifier like so with the modifier layout I.D. and this one was the follow
button.
How do we call it?
Button follow.
OK.
And she will need to do the same thing with Button.
And what was that message?
So now, obviously, all of our constraint layout should be inside of this box with constraints, so
let's make sure that we add the closing bracket in here.
And now our constraint layout will use the box with constraints.
And after having done that just for.
Testing purposes, let's add this portrait constraints in here as well, because otherwise those constraints
would be empty and you cannot pass in an empty constraints setting for the constraint layout.
So we're just saying, OK, constraint there.
Please use the following settings the constraints set that we have created for you.
OK, so you can see constraints is of type constraint set, which is exactly what the constraints will
return or will be of type because the trade constraints method is returning a constraint set.
So we have set up all of this set items and now we can use it for our application.
So now currently, because we don't have the other constraints set, which would be the landscape constraints
set, this will not do anything for it.
So this will basically be the same thing as we had it before, where the application is going to look
the same, no matter which way we are using it, on which format we're using it.
So let me open up Dex again to display this.
OK, so there we are.
So we don't have this distance to the top.
We are going to fix that later.
But you see that this is currently what we're getting.
So it's not exactly the design that I showed you earlier.
It's still fine.
It should be OK, but it's not really the design that I want to have.
So I would like to design it in a way where these parts here.
So the followers following and posts will be to the right hand side of the Siberian Husky.
So let's set this up now.
Therefore, we will need to create an extra method which will be similar to this portrait constraints.
So let's go ahead and set it up private fun.
And this one will be a landscape.
Constraints.
Which will use a margin of density pixels, and it will return a constraint set.
So now let's return the constraints that once again constraints set.
Like so and now we need to say how this constrains that should look like.
Therefore, we will need to have the references to all of the items as well.
So let's get those references in there.
And now we can start defining how the constraint should look like.
So let's start with the constraint for our image.
OK, so the image, how do we want the image to be positioned?
So I want to link it to the parent's top.
And then I want to have a little bit of a margin as well.
So I'm going to set the margin to be the margin, and the start of it should be linked to the parent
thought.
Start with the margin being the margin that we defined up here.
OK, so this margin, this is what this margin here is.
OK, so this is just the image.
For now, we don't have any constraints for all of the other items.
So let's look at how this is going to do on our device, so we turn it around.
And while it's not using this constraint set yet.
So let's set this up real quick.
And where would that be?
I hope you can figure it out.
It's this part here.
So let's use the landscape constraints again, where the margin of 16 density pixels.
So now we're going to use these other constraints of this other set up that we have started, but they
haven't finished yet.
And for now, we only have defined where the image should be positioned.
So let's turn around our device and you can see the image is positioned here and everything else is
just crammed towards the top left side because it doesn't know where it has to be.
It doesn't have any constraints, which is why we get this weird look in our application, so we can't
even see the name of the dog, as well as the other buttons and so forth, because they are all on top
of each other, all towards the left.
So let's fix that.
Therefore, let's go ahead and design how our landscape constraints should be looking.
So I'm going to add the constraint to the name text, and I'm going to paste them in here and talk through
what's up.
So the name text should be to the.
Image says start so to the left hand side of the image, and it should be underneath, so it's top the
in then-Texas top should be underneath the image.
So what I want with this is it should be at the left.
On the eve of the image, you will see how this is going to look like now.
Let's do the same thing with the contrary text.
OK, so the country text, however, should be underneath our name text.
So it's top.
So it's country text top should be at the bottom of the name text.
It should be to the left of the name text and to the right of the name text.
So this is a little confusing, you might say.
But what this will do is it will just position it exactly underneath and a centered manner.
OK, so this is what these two constraints will do for us.
So let's run this and see how this is actually going to do.
So let's turn it around, and you see that we have the Siberian Husky and Germany underneath our image.
So that seems to work.
Now let's at the other constraints that's at the role constraint, and I want the role to be linked
to the image, to the top of the image, but also to the a right of the image.
So the images end, which is the images right side should be.
The start of the left hand side of our row stats and our stats, you might recall is this entire roll
thingy that we set up here.
So the profile stats which are inside of this roll, which has three profile stats with the followers
the following and posts.
OK, so now.
I want also to link the end to the parents, and so I want to say go all the way to the end of the right
hand side of the parent.
OK, so it's right, should be on the right of the screen.
So let's run this again.
And turn it around, and we see now the posts seem to work fine.
So now we need to take care of the two buttons, right?
So let's go ahead and add those constraints as well.
And the button.
Follow should be so it's top, so it's top corner or top edge should be linked to the bottom of the
raw stats, so it should be underneath the raw stats with a little bit of margin and it's left hand
side should be to the left hand side of the rosters.
And there's right hand side should be at the left hand side of the button message.
So we don't have the button message yet.
Let's set that up as well.
And its bottom, it should be linked to the country texts bottom.
So this country texts bottom.
So what it will do is it will make sure that the button doesn't overlap.
OK, now the button follow will only make sense if we also have the button message because they are
both important here.
So let's look at the button message.
Its top should be also to the bottom of the roll stance, as we had with our button follow.
Then it starts should be linked to the button follow.
So to the end of the button follow, so it should be to the right of the button follow.
And it's and should be linked to the parent ENT.
And then finally, the bottom of the button should be linked to the contrary text bottom as well.
So let's rerun this and see this in action.
So let's turn it around and we see that we get our little husky.
We have our followers and then we have the follow user as well as direct message positioned in the format
that I wanted it to be.
OK, so now you could, of course, play around with the values here for your constraints, for your
landscape constraints set up.
So now you know how you can make sure to have different layouts or how to define those different layouts
inside of your jetpack compose application.
So basically, what you need to do is you need to set up the constraint sets.
You could have also done it, of course, directly here, but I recommend to create extra methods decoupling
it.
And then we have the box with constraints in which we can then use our constrained layout with the constraints
that we had set up.
OK.
And this is because the men with of 600 is not given for our application.
If we turn it and then it goes into the landscape constraint mode.
And I know constraints are really a pain in the butt.
At least that's my opinion.
I'm not a big fan of it.
I would have preferred to use the column stuff, but it's just not as performance, which is why we
just have to get used to it and use it.
And once you get the hang of it, you are going to have no problems at all with it.
And one thing that I didn't mention that you, of course, also always need to set up are going to be
the layout IDs.
So you need to set up those IDs to be exactly the same as we have set them up here.
So now, of course, you could say use the guideline here for the top link to for the image if you want
to use it in their constrained mode.
OK, so 0.3 or maybe 0.1 and this should look a little better, I guess.
So let's run it, and you see, now we have this distance towards the top 0.3 will give us significantly
more distance towards the top.
Like so in the World Center, our doggie.
All right.
So that's it for this video.
See you in the next one.