Welcome back.
So at this point, we have this beautiful little card with our husky and all the items looking quite
good.
The problem is that what we're using here are a bunch of columns with a bunch of rows, and it can become
quite complex when it comes to more complicated and advanced user interfaces.
So this is a rather simple one, but sometimes things are just more complicated.
And in that case, it really makes sense to use something called the constraint a layout which is also
recommended by Google as the way to build your user interfaces.
So in this video, we're going to restructure this entire user interface using a constraint layout,
and that can help us place composable relative to others on the screen.
And it is really an alternative for our nested row and column box custom layout elements that we have
used so far.
So constraint layouts are really helpful when it comes to larger layouts with complicated alignments.
So the steps that we need to take include creating a reference for each composable in a constraint layout.
So we need to have the name, for example, for this image here, it has to have an I.D. Let's call
a dog image, for example.
Then the text could be called a breed.
This could, for example, be the location where the dog is or whatever.
OK.
So everything has to have a name and then we can find it, and then we can use those modifiers to actually
constrain them to other composable so element.
So, for example, we know that dog image, for example, is above the breed.
OK, and then at the same time, we see that the dog is towards the top, so it's the most top element
that we have.
And then everything can be relative to each other.
So this element here with the text and the followers is next to this one.
So it's towards the left, so towards the bottom of your screen and then or to the card specifically
here and then to the right.
It has this element where it says hello following and then to the right it has 330 posts and so forth,
right?
So we're going to set all of this up.
It sounds quite complicated and it really isn't too uncomplicated, but we're going to be fine.
So let's just have a look at this.
The first thing that we will need to make sure is that we do have an implementation inside of our build.gradle
app file.
So call an app here in the brackets, it's really important.
Otherwise this won't work.
So here in the dependency so you can scroll all the way down, you will find dependencies down here.
Here you are basically saying which kind of packages you want to be available for your project.
And the ones that we have by default is here.
For example, compose UI and you see we're using compose UI.
Then we have the material from compose.
We have the tooling preview so that we can preview our compose layout and so forth.
OK, so now here we need to add the following line Let me paste it in here.
It's going to be this Android constraint layout column constraint layout minus compose colon 1.0 dot
zero minus RC zero one.
This is going to be the version that I'm going to use here specifically, and this will now allow us
to use constraint layouts.
Therefore, we need to make sure to sync it, so click on sync now.
Otherwise this won't work, obviously.
So now, once the sinking is done, we can go back to our profile page and now use constraint layouts
inside of here.
OK.
So let's convert this entire page.
So the profile page to use instead of columns are constraint layouts.
Now, unfortunately, if I do that, then all of this other stuff will cause some errors for now.
But let's have a look.
So I'm going to use constraint layout here.
OK, so this one right here, constraint layout.
Now, obviously, I get some errors here because we need to, as I said, define the IDs.
So for example, the image needs to know what name it has and so forth.
So we need to create references and let's do that for every single composable.
So therefore, I'm inside of our constraint layout, and as this constraint layout is not a column,
but it is something different, we don't need to define properties in it so we can get rid of that.
You see now the arrows disappeared, but this by itself will not fix our issues.
So we need to create a reference ID for the image composable, for example, so we can just go ahead
and create a value which will be of type image and will define it as create arrests.
So we create the reference IDs here.
For now, we can add a reference to our image.
So you see we have this modifier for our image.
OK?
This modifier has size to clip the border, and now we can add a constraint s so here constraint as
and give it the name.
So I'm just going to constrain it as image.
When we use constraint as, however, we also need to define how something is positioned.
So for example, the image is going to be connected towards the top.
OK, so we use here Top Dot a link to.
So we're linking it to an anchor.
And here we can just go to Parent Dot Top.
So we're linking it to the top of the parent.
Now it is linked to basically its parent, which is the card itself where it is inside of.
So this image is inside of the constraint layout, which is connected to the card, which is now going
towards the top.
And then we need to define that it will be at the link left side as well.
So we link it towards the left side of the parent.
So parent dot start.
So start is left to the left side and and is the right side.
So and that link to and here parent thought and.
OK, now we need to define a dis modifier with those constraints for our text as well.
So for the Siberian Husky So Modifier and I'm going to use modifier and this has to be separated by
a comma.
OK, so modifier dots and we can use the constraint as here as well.
So now we need to say what the reference name for this text will be.
So how are we going to call this text and I'm going to call this text name text?
And now I can connect it to my top.
Of the bottom of the image.
So what is going on here?
Let's have a look at this.
So what I'm saying here is the top of this name text.
So the Siberian husky should be connected to the bottom of the image, so it should be underneath the
image and the image is this one here?
So now I can go ahead and also make sure that the left is linked to the left hand side of the screen
by connecting it to the parent, and the right is linked to the right hand side of the screen.
So parent and.
OK, so now for us to test this, let's comment everything else out all the way up to the bottom row.
OK, so I'm going to commend all of those parts out and I still get an error.
So here now I have a reference to my image, but I don't have a reference to my name.
Text.
So I need to add that reference here as well.
So let me add the name text here as well.
And I realized that this should be called create rifts.
Like so and then the arrow will disappear as well.
So now let's run this real quick to see if our UI is still going to work.
At this point, we should only get the image and the text.
So the name of the dog breed?
So there we are.
We have the image and we have the text.
But now we're using the approach that Google wants us to use.
Yeah.
All right.
So this is how we added the name text now as a little challenge for you.
Can you add this text here?
So this text, which says Germany, where the dog currently is situated or lives currently?
Can you make sure that this will also be on the screen, but will be underneath this text here, which
says Siberian Husky, so you will need to create a modifier and you will need to change those things
up just a tiny bit.
OK, so please go ahead and try this for yourself.
All right.
I hope you tried it.
So I'm going to commit this in so common.
This uncommon this, so to speak, and then I will need to add the modifier in here.
And you know what?
I'm just going to copy this modifier here and just make sure that the name that I give this.
So the ID, so to speak for my location texts will be different.
So I'm just going to call this one, for example, country text.
OK, so this will be country text.
Where is the dog?
So obviously, the country text doesn't exist, so we need to create the reference up here.
So let's add the reference country text now.
Let's make sure that it will be underneath, not the image, but underneath the name text.
So here we can say that the top of this text here, which says Germany, which has the name of country
text or the idea of country text, should be at the bottom of the name texts, which means just underneath
it.
So let's have a look at this.
Let's see how this is going to pan out.
And there we are.
So we have the Siberian Husky and underneath we have Germany.
So how do we now add the other one?
So let's add the role, for example, here.
Let's start with the first row before we add all of the other rows.
OK.
So inside of this role, we have the profile stats which are linked together, which is still OK so
we can still use composable as we have done here, where we use a column and it's connected.
But as you see, we are use a column.
And before that, we use the column within a row within a column.
And that's really something you should try to avoid because all of this nesting of columns and rows
at a certain point is just becoming inefficient when it comes to performance.
So that's why we are even bothering to set up this constraint layout.
OK.
So this is really something you should take into consideration.
All right.
So now that we have this managed, let's go ahead and add the row.
So.
We have a modifier for the role already, so that's cool.
So now can just add our constraint us and.
Give it the name.
I'm going to call this one row stats and then I'm going to link it.
OK, so top link to and here I can just go ahead and link it to the country.
Text so country text like so.
Add to its bottom to be more precise, so I want this role to be underneath our country text and I want
it to be called rogue stats.
And obviously, I need to add the raw stats to my references that we need to create.
OK, so here at the beginning of the constraint layout, we have our image, the name text.
The country takes the road stats right now, so let's check it out and see how this is going to pan
out.
And we see we have our role with the followers following and posts.
OK, so that seemed to work.
That's perfect.
So now we have our profile stats beautifully, and you see, we didn't have to add this, that it's
linked to the left or to the right would just say it's underneath the existing text.
And now you might think you could have gotten rid of these two other lines here as well.
But let's check it out.
Let's see how this is going to work out.
And you see now Germany as all the way to the left because we didn't say that it should be linked to
the left and to the right, because if we link it towards the left and to the right, it will be direct
towards both directions, which will end up pulling it directly into the center where we want it to
be like, we have it with the Siberian Husky.
OK, so let me get rid of those two lines and run it again.
There we are.
So why do we not needed for the role?
Well, this role by default, is going to fill the max with as we have defined it here.
OK, so we defined that it should take the entire with possible.
So we don't need to define that it should be linked to the left and right.
All right now at to underneath of it, we have our role with the buttons.
OK, so now we don't need to put an extra role for the buttons.
What we can do is we can position the buttons directly.
So let me get rid of all of this unnecessary code.
But obviously we need to add modifiers to our buttons.
So the modifiers where we put them, what we put them at the bottom or button a level at its.
Parametres here, so we are defining that we need a modifier here.
So let me put that in a second roll or line modifier dots.
And here.
What we need to do is to use constrain us, so do we have a director here?
Well, you see, there are so many different methods, right?
So let's just tip it out, constrain past that.
We are.
So now we need to give it a name.
So let's give this a name of button follow.
So this will be the follow button.
And obviously, once we create this ID, we need to add it up here as well.
OK, so let me put that in a second role for it to be still readable very well, and then we can go
ahead and define where this button should be.
And I'm going to say that it should be linked to the role stats dot bottom.
And then I can also directly define a margin, for example, so I want to have a little bit of a distance
to it, so I'm going to add a margin of 16 density pixels to it.
Now, at this point, it created a little bit too many brackets for me.
Then I want to make sure that it is linked to the left hand side so linked to the parents start.
And to the well, the end will only work once we have the button that we want to have right next to
it.
So let's run this real quick just to see without this button here, let me cut it out for a second.
So you see, this is a way to follow user will be.
Let's just add this additional button.
The second one, and I'm just going to.
Copy this part here and put it in here.
So this one would be the button message.
So let's rename it.
Button message.
Let's make sure to add it as well here to our.
References.
And now we can use the button message, and I want it to be also underneath the raw stats.
And I wanted to not be at the parent start, but towards the button follow.
So it's left side should be to the right of the button follow.
And this means that we need to say and so button follows end.
So it's the right hand side should be to the left hand side of our button message.
That's what I'm defining here.
And at the same time, it should be linked to the right hand side of the entire screen or to its parent
to be more precise.
So here I'm going to define it as the parent.
So let's see how this is going to pan out.
You see, now the button is connected to what is to the right of the follow user.
Now let's also make sure that there is a relationship in both directions, so I'm going to link this
right hand side also to the button message how I call it right.
So to its left site, so to its start, which means we need to use a link to method.
So now the width is something that I'm going to define as well.
What I'm going to say that they mention should be rep content.
So it should only be as white this button as the content requires, which this content does for us.
So it's not going to be wider than it needs to be basically based on the text that we have inside of
it.
OK, so let's check it out.
And you see now our buttons are perfectly linked to each other because we have specifically set the
constraints now.
But now we have one a little problem and that is our Huskey here at the top.
It's directly linked to the card, so there's no more space at the top.
Let's take care of that as well.
Therefore, we will need to use something called a.
And therefore, we will need to use something called a guideline, and guidelines are invisible lines
for positioning elements to a particular point on the screen from different axes.
So now we want to create a guideline from the top.
Let's go ahead and assign it.
Therefore, let me go up a little bit.
So here what I'm creating my reference.
I'm also going to create my guideline.
So guide a line, as I'm going to call it, and this one will be called Create Guide Line or we call
the method guideline.
From the top.
OK, so here I'm creating a guideline of zero point three.
If.
And I need to make sure that I'm not using Capitol Hill here, so the method was predefined.
So what this will do is it will create a distance of a third towards the top, so it will go down a
bit.
So now, instead of making sure that my image is going to be here towards the top of the parent, which
is currently the case, you see it's directly connected to the parent.
I wanted to use the guideline.
So here I'm not going to say stop, but that basically just the guideline here.
So link to the guideline.
Let's rerun this and see how this is going to pan out.
And you see now it created all of this distance for us.
So it's at the second, third, so to speak of the screen.
So that's how you can define the guideline.
So let's play around with this.
Let's say we set this to zero thought one, and now you see that there is significantly less of the
distance, so you could play around with this and see what fits your requirements.
OK.
And that's pretty much how we can rebuild our UI that we have built before in a constrained layout,
which, as I said, is the best practice approach.
And while now, you know, so the structure is always the same.
Make sure that you create the references with the name that you don't want to use in your constraint
as as a parameter.
And then in curly brackets, you do the linking to either the parent and start means left and means
right.
Top means that the top of obviously and bottom at the bottom of whatever you are linking it to.
So our image is now linked towards the guideline that we created, which just pushes that that a little
further down, that is linked to the left hand side and it is linked to the right hand side of its parent,
which is this card.
Because if we look at it, our constraint layout is inside of this card and it's going to be a little
more obvious once I connect those two like so.
So now it's obvious.
It's a constraint layout is directly inside of the card, which is inside of the profile page.
OK, so that's it for this video and the next video, we're going to look at how we can use constraint
layouts with decoupled API.
So see you there.