Welcome back.
And this video, we are going to finalize our little dialogue here, you can see that off the divider,
there is quite something to still appear on one hand two more accounts that they want to display, as
well as well this ad, another account and accounts on this device, as well as another divider with
the Privacy Policy and the terms of service.
So that's what we're going to add in this video.
So let's get started.
And by the way, I highly recommend that you tried this yourself, at least some parts of it.
So this first part is something you should be able to do.
You see, if we don't have an icon or an image, then we would just want to use the first letter of
the name.
And then, yeah, the rest is basically just rows with icons.
So you should be able to implement the rest by yourself.
So really take some time to try to implement this and then go to the end.
Once you have finished is to also be able to get rid of this dialogue once you click on the cross,
for example.
OK, so first of all, we will need something that is going to be an account because we did use accounts
or similar to accounts already for our emails and for this account.
So what I'm going to do is I'm just going to create a data class which will have an icon that will be
another bill so it can have an integer or it cannot have an integer with the integer would just be the
resource for the image.
Then we have a username.
We have the email and then the unread email amount.
So this integer that will display how many emails we have not yet.
OK, so let's go ahead and create a new model for that.
Therefore, I'm going to create a new data class, which I'm going to call accounts like so.
So this data class will have, as I just said, an icon, which will be an integer Nullarbor, and it
will be null by default, then a username which will be of type string.
And then the email, which will also be a type string.
And finally, as I said, the amount of unread emails.
So this is our little account model.
As you see, whenever we are working with some kind of data structure, we need to create a model.
We had that with our mail data.
We had that with our draw menu data and so forth.
So you see, the mail data is similar.
We also have a username.
What?
We have a subject here who we just had the email.
Well, there is one the item that is the same, so to speak.
Now we will need to have a list of dummy data.
So let's just go ahead to our mock or mock data and create a list of accounts.
So I'm going to call this one account a list, which will just be a list of accounts.
So of account class, and therefore it's going to be like this.
OK.
And let's import account, which will be our own account, not the Android accounts, but our model
account.
And now let's add the account items.
So I'm just going to add them in here.
I'm going to paste in here and then talk over what's up.
So we have the first account which actually has an icon and it's our tutorials icon.
Then we have the username, which is tutorials you and then we have the email as well as the unread
emails.
And then we have an account where we don't have an icon, which is fine because Icon is a Nullarbor,
so it can be null and can be empty, so to speak.
Then we have the user name Kristie and email of Christian email dot com and unread emails is going to
be 80.
OK, so this will be our account list or mock data, so to speak.
Usually you would get that from a database.
So usually from, let's say.
Firebase or A.W. or something like that, and then we need to go over to our accounts dialog and create
individual account items.
OK, now you could, of course, go ahead and say you're going to create this account item composable
outside of your accounts dialog, but we're only going to use it inside of here, so we don't need to
create an extra component file for it, even though you could do that once you need it later on, for
example.
So what we're going to do is here and create a new compile zobel.
And then this will be fun.
Count item.
So we need to have an account in here which will be of type accounts.
So whenever we want to display an account item, we need to have details about the account that we want
to display.
So if the account contains an icon, set the image element with the icon and if not, set a card and
a text within it to show the first character of the user name.
So as you see here, it's this one.
So we have used this functionality before you see here.
We had also the first letter, so it will be something very similar.
But generally speaking, how does an account item look like?
It has the icon.
It has the text on top of the email address and then it has the numbers so we can really just replace
it or copy it from our accounts dialog UI, because that's where we used to do this entire thing, right?
Then we had this role, which contained the image with the text and so forth.
So this entire part here.
So let's take this and put it in there into the account item.
Now we need to make some changes to this.
So first of all.
Let's go ahead and set the modifier, so the thing is, we're not passing the modifier right here,
so we need to do it like this modifier dot and then fill max with and so forth.
OK, so we fill the mix with we have a padding, then we have our image and the image will only be displayed
if we have an account.
Otherwise, we want to do something else.
So here I need to see if the account that icon is not null then showed the image, so then showed this
image with the modifier here being modifier dot, I done size and so forth.
So not do not take the draw.
That will be our tutorials icon, but a count that I can.
So whatever icon is inside of where it was stored inside of the account, so here I can, which is an
integer, but integers are just resources.
So the direction, what resources, so to speak?
OK.
So then.
We have our image, and now if we don't have the image on the block, we need to create a card which
will take the user name.
So where did we have that?
So we have that in the immense right.
So in May, who took over?
We had it in our.
It should be our mail list, right where we displayed it.
So every single mail item had the first letter like, so this was the card that we used.
So let's just use this card once again, and let's go back to our file that we were at before, which
was the account's dialogue.
So down the block, we can use this card and this will be modifier like so.
And instead of using the mail data, we are going to use to account that username.
And here it's just going to be the modifier like so modified to petty.
OK.
So this will create our image or this icon.
And then we have this modifier equals modifier.
So this should fix this problem.
There we are displaying the details about the while the way to the start.
I think all of that is fine.
And now, instead of showing you, we will actually need to use the username, of course, and instead
of showing them, yeah, my email address or the email address that we use their email.
And obviously, the text should also not display 19:9, but instead it should use a dollar sign with
the opening and closing brackets where we get the unread emails count.
And now you could add plus.
So you could also add like an if statement if unread emails is above 99, then used to plus and otherwise
known.
But I'm not going to bother for this case.
So even though we have this 80 plus what is 80 plus, is it 81 or what is it now?
You could of course, modify this, and I would recommend that you try this.
So this is a little change for you.
Go ahead and create an if statement here.
Will you check the amount of unread emails and add the plus if it's above 99 and if it's lower than
99, don't add it all came.
So that should pretty much be how an account item is going to look like.
Now what I'm going to do is I'm going to display the account items.
So here and our Akon's dialogue, we used all of this, right?
So.
Think it was this one here?
All the way up to there, or was it this, yes, it was that part.
So now we can replace this with our account item where we passed the account to be account list at the
position of zero.
So our first item from our account list, this was the account list, which what this what is this I
can draw bill and so forth.
So if we did everything correctly, we should still see our account item.
So the number one, the first one?
So let's see and we still see it.
So that's great.
We know that we didn't make a mistake there, but you can actually test it with the mock data even further.
You could go ahead and add three here, for example, and run it again and see if it changes to three
plus.
And there we are.
So that seemed to work perfect.
So we have a gazillion emails and unread emails, and now it's going to show probably.
Uh, yeah, it's going to show a lot of emails.
So that's how we're going to go about it.
Okay.
Now, let's go ahead and add the other items underneath, so like we had it here where we had Chris
and Chris Moody and Christie Jane.
So let's add those two, which is just a column, right?
So this is a column of items.
So item one and account item two.
OK, so let's go ahead and build that in our account, a dialogue.
So we had all of our rows, then we had the divider, and here I'm just going to add the column underneath.
So we are inside of our Collins dialogue to we see the method here Collins dialogue UI.
OK, so here we need to go ahead and add the account items.
So account item one, which will be account list at position one and then let me just copy this line
and paste it in here with two.
OK.
So this will be our two new account items that we should now see as well.
And there we are Chris Mordi and Jane.
Now we need something that is going to be called add counts.
So I'm just going to new create a new composable, which will just use an icon and then a text.
So let's go ahead and created this ad account thingy.
So this ad account composable.
So here, fun or just let's add the ad composable keyword straight away, because otherwise I might
forget it again, and then it's going to show an error for a while.
So here I'm going to call this one ad account, which needs an icon, which will be of type, image
a vector and it needs a title which will be of type string.
So let's import image vector and then let's go ahead and create a row.
So this role will have a modifier of modified dart fill mixed with.
So it should fill the entire width of the screen, then the padding of, let's say, 16 dpi towards
the left hand side.
So 16 dpi like so.
And then as the content of this rule, I want to have an icon button.
So I'm just going to paste the icon button in here.
We have seen icon buttons before.
This is nothing new.
So we have the icon button, which has an icon inside of it, which uses the icon that we are passing
to.
This ad account has the image vector as a content description of empty and uses a modifier of having
a padding towards the bottom of eight density pixels.
And then after that, so it's the roll rate, so items are going from left to right.
So the next item is going to be a text and this text will just use the title and we'll have a font weight
of being semi bold.
So this one here, if you can't decide whether you want to use a comma or semicolon like colon, you're
going to use a semicolon or something like that.
So here, modifier dot padding, I'm going to add a little bit of padding towards the top of eight density
pixels and let me put that into a separate line so it's more readable.
And then we have the start of page density pixels as well.
Like so?
So this is going to be how the had account thing you should look like.
So this part here.
So now we can call it just underneath all of this, not underneath this inside of our accounts dialog
UI.
So let me reduce everything here so that you know where I'm putting it.
I'm putting it underneath this column where I added the account items.
So here that's at the account with the icon that we wanted to add, and I'm just going to use the icon.
I can start outlined that and manage accounts.
And then the other and what we need to add a title as well.
So let's add a title here, manage accounts on this device.
And then the second one will be that I can where I'm going to use, I think the first one was that person.
I think so.
Yeah, let's just add this default third person had old with the title of add another account.
And by the way, you can just check out what those different icons mean, how they're going to look
like.
So this person add all this, just this little thing here, just plus.
So let me just put it on top because I accidentally had it in the wrong order.
But this will now create our ad account.
So let's see if those two will now appear.
And there we are at another account manager console on this device.
So then after that, you saw that we had a divider.
So let's add this divider in here as well.
All right.
So divider will be modifier.
Well, it will just have a little bit of padding.
It was a top of 16 deep and towards the bottom of 16 deep.
So just a little bit of distance.
Otherwise they would be too close together.
So maybe six would be too much, but I think it's going to be fine.
All right now, we have this privacy policy and these terms of service, which are basically just well,
is a roll with a text, then a dot in the middle, which can be used as a card and then another text.
So nothing that we haven't done yet.
So going to use to.
Modifier key word again, modifiers to be the modifier.
Thought Phil mixed with.
And I want to have a horizontal range of a range DOD space evenly.
So the items should be spaced evenly now.
This row obviously needs the content, otherwise it will be super unhappy.
And the content will just be the text that says Privacy Policy.
Then it will have a little card that will just be a dot.
So I'm just creating this card that doesn't have any content, but it's going to be a card with a circle
shape with the size of three, and it has a black background.
So this creates this little thought that we have here.
Now, you couldn't make this up bigger by changing decisive, it would be fine.
And then finally, we have this text that says terms of service.
So let's add this in here as well.
So at this point, let's test our application.
Let's see if we have everything and we are.
So now we have the Privacy Policy terms of service just a little thought here.
But now clicking on the cross doesn't work.
So how do we import or how do we implement this functionality?
Well, before we need to have the state, so we need to know the state of our dialogue, so we have
this open dialogue, mutable state of Boolean that we have used before.
So we need to add that then we need to make sure that this value is going to be true or false, depending
on what's up.
So inside of this, we had this.
I can button scene, it was, I think, here, yeah, we have this Iken button where we have this default
close.
So here I can button.
Once we click on it, we want something to change and we want to change the value of our open dialogue
to be false because then it will not be open anymore.
So we're closing the dialogue, we're changing the state of the dialogue from being open to being closed.
So that's what we do once we click on this icon button, which is just this little icon button, which
is this cross here.
Now, if you do that, on one hand, you have this account dialogue, you are here at the top, which
now needs a state.
Luckily, we have the state already here, the mutable state open dialogue.
So we need to pass that in here.
But just passing it like that doesn't seem to do the trick.
So we need to use open dialogue equals open dialogue.
OK, so we need to specifically state which one of the variables we are overwriting.
So we are using the names, apparently just this way.
OK.
So but when we do that, you see at the very bottom, we get an error here because the preview also
needs a state now, but we don't have a state for the preview.
So what I'm going to do here is I'm just going to pass the open dialogue.
State to be immutable, state of.
And it's this one here, well, I'm just going to set it to false things, I'm going to hardcoded using
them to multiple state, but when you use a mutable state in your preview, then you get an error so
we can just suppress it by using the suppress suppress lint here.
What we say we want to suppress is error that you are showing and we need to import it.
So the error that we are using or that we're getting here is the unremembered, mutable state.
OK, so that's how it works with previews.
So we're just saying, OK, you know what?
In the preview, just leave it as closed.
So now we still have an error.
No, it doesn't seem like it, even though it shows that there is an error here.
OK?
OK, and now there's one last thing that I want to add, and that is going to be in my dialogue here.
So we have this on dismissed request.
But then there is also something that, well, if you hover over this dialogue, there are properties
as well.
So dialogue properties that we can overwrite, so let's override them.
I'm going to show you how we can override them.
So for example, properties, we can use dialogue properties and here we can pass which kind of properties
we want to have.
So for example, if you want to force the user to actually click on the cross to dismiss this dialogue,
you can force them by adding a dialogue property.
Because you see by default, when you click outside of this dialogue, it will just close.
So if you want to ever override that, you can add this line here.
So this miss on click outside said it's false.
So this will not dismiss the dialogue when you you click outside of the dialog and.
Well, you can just set the default, it will not dismiss it.
So let's test this.
Let's see, we click outside to see doesn't dismiss the dialogue, which is what we just overrode and
wants press on that cross.
Then it closes because now we have added an unclear event for our Asian button.
Here you see we are setting this date.
So that's the really cool thing.
You don't have to actually open or closed or take care of all of this other stuff that would happen
to a dialogue because it's all handled by its state.
So on the first side, it looks more complicated, but at the same moment, it's just significantly
easier to manage.
Because if you have watched my master class on my Android masterclass, especially the last chapter
where we are building a trailer clone, it becomes a real pain to take care of the state of the dialogue
because you need to constantly open and closed based on whether to get whether the dialogue is showing
or not.
And here it's just easy.
You just say, OK, the state is closed, so that's it.
OK, so this video is long enough.
I think we're pretty much done with our UI for the Google Gmail application.
I hope you enjoyed it.
Now, you know how to build such a beautiful user interface using the jetpack compose by.