Welcome back.
And this lecture, we will be recreating the Gmail account dialog UI so we won't be using the dialog.
Instead, we will create a custom dialogue out of the normal dialogue element.
First, we will add an on click implementation for this little icon here at the top of which then will
open up this dialogue.
And as you can see, it's not going to be finished by the end of this video because, well, it's a
lot of stuff that we need to implement.
So we're going to start off with this.
And then in the next video, we're going to finish it off.
All right.
So first of all, let's get back to our project and implement the oncolytic and then open the dialogue.
Therefore, we need to go over to our home at Bar.
So here over to the home at Bar Katie File and there we had at the modifier, which took care of the
image.
So here search and emails.
And then we had our profile content description with the modifier.
This modifier had a size, a clip and a background.
And now we're going to add something called clickable.
So there's clickable allows us to now do something once we click on it.
And here I will just use an open dialogue.
Which will just be a new dialogue that I'm going to create under my components.
OK, because you see each time that we create a new UI element, just create a new composable component
in our components folder.
This one will be the accounts, a dialogue, and let's just create it.
The idea really is that we use it in here.
So once we click on it, we open our accounts dialog that we just have created.
All right, so here this will be a composable.
So let's add the composable keyword in here, and I'm going to call this one accounts dialog, as you
have seen already.
So this will require an open dialogue.
So here does this open dialogue.
And once I type this correctly, it should be available here.
Now, we're not going to use the default dialogue, but we will need to use a mutable state so a state
that can be changed.
And this will be a Boolean.
So it will be either true or false because we need to know whether the account will be open or not open.
All right.
So this will just basically be a dialogue where we pass in on dismiss request.
So let me see this miss request.
And while this will not work if you get the default dialogue, so that's always the problem with default
imports, right?
Sometimes it just imports the wrong thing.
And now if you delete this dialogue at the top, then you can select between the Compose You I dialog
and the other one.
When in doubt, usually just used to compose variant in our compose applications.
So then you have this on this GMS request, which we can just say what should happen in that case,
so we can just say that the open dialogue value should just be false.
OK, so in case that we're dismissing so this is dismissed request.
And then here we want to open up our dialogue.
Why?
But let's take care of that in a second.
So we have this default dialogue.
Now we need to go ahead and create an observable Boolean.
Now we need to know whether the dialogue is open or not.
So where would that make sense?
Well, the thing is that what it takes care of this dialogue is this little icon.
So once we click on it, then it opens up.
All right.
So let's go over to our home app bar.
And create an observable Boolean variable, which will also be, again, a mutable state.
So here open dialogue.
Which will be a mutable state, bullion, so mutable state of Typekit bullion.
So at this point, I think it makes sense to break this up into multiple lines here and import mutable
state.
Over here, composed one time Utah State.
OK, so at this point, we have this mutable state which we can set to true once we collect on our home
app, our item.
So here on the image which set profile, OK, look at it, it's this little image here.
And before that, we had search and emails, which is this part here.
Then this image and we said once we clicked on it, we want to do something.
And what I want to do in here is I want to set my open dialogue value to be true.
So now just open it.
That's what we wanted to hear.
So once it is open.
So in the case that it is open is right here, we can just check off the open dialogue values true,
then create an account dialogue with the open dialogue being our open dialogue.
So like so so what is this our open dialogue that I'm talking about?
Well, it's the one that is passed to the home app bar method to this function, to this composable,
because now once we're using the home app bar, we need to pass and mutable state, which is going to
be the open dialogue.
So is the dialogue open or not?
Now you could check, where are we using this home app bar?
Well, we're using it in our main method, right?
So we need to our main activity better set.
So we need to jump over to our main activity and check it out because here we now have this error because
we're using the home app bar, but we are not following the instructions and we're not passing the right
amount of arguments anymore.
So now this home app bar, however, it needs an open dialogue, which is a mutable state.
So here we will need to pass an open dialogue and we were using the multiple states before when we were
working with remembers.
OK, so here in my Gmail app, I'll need to create a new, remember so well, open dialogue.
So what I'm going to call it, and we will be using the remember keyword.
And you have to obviously write it correctly, then import remember.
And now the Remember state will be the mutable order.
Remember, a key word will be used for our mutable state of.
Our value of false.
So this is going to be current defaults, but then we're overwriting it, obviously, once we click
on it.
So now we can set this open dialogue or we can pass it.
But I said here at the top bar when we're creating the home bar, which needed an open dialogue.
If we had this point, test our application.
So if you run the app, you test it, you will see that there is a dialogue, but currently there is
no UI.
So there's nothing to show.
We take took care of everything that we needed to do.
We know that there is a dialogue now we open it, but we're never actually designing it.
So let's go back to our accounts dialogue.
Katy File.
And there we have our dialogue, which currently does not display anything, right?
So we just create it.
But in this part, that's where we would add all of the design for it.
So I'm going to just create a new composable which will take care of the dialog UI.
So the user interface of the dialog.
So I'm going to call this one accounts a dialog UI and it needs to have a modifier, which I'm just
going to pass the modifier to.
And now we need to import modifier for this to work and not to reflect once again our I.D. is playing
with us.
We need to be careful here.
We need to use the Compose UI modifier.
OK, now how would I like this to look?
Well, let's look at our example project.
You see, this is a card, so I'm using a card where I have a column and then I have a row inside of
it.
So this would be the role, and then I have another role or a button underneath and so forth.
So let's just start at the beginning.
Let's create a card first.
So here I'm using a card.
Then inside of this card, I'm going to use a column, an inside of this column, what?
I'm going to pass the modifier to this column.
So here, modifier, because I want to have a white background.
So I'm going to set the background to colored of white and I want to have a little bit of padding.
So I'm going to set the padding to the bottom to 16 density pixels.
So for this to work, we need to import DPI.
So it's hover over it and import it, and we need to import color.
And then what's wrong with cart?
It is the composable card.
Let's go ahead and design our column that we have here.
So the column will require a row and inside of this role, I'm going to pass the modifier to fill next
with.
So I want to make sure that it fills the entire width of the screen or of the available space, so to
speak.
And I want to vertically align items inside of it.
So here still inside of the role description, here are the parameters.
I'm going to set vertical alignment to alignment that center vertically.
And now I was wondering why I get this error, obviously, is because I need to add that it's going
to be a composable because it's users composable, right?
And as you've learned quite at the beginning of the composable, as part of this course, we always
needs to use to add composable annotation for any function that has composable inside of it.
It's like with static keyword.
So if the Methodist static, it has to use static variables and stuff like that.
So it's similar to that if you know what I'm talking about.
So this is our role and now we can design our role.
So what do we want to have inside of a given role?
So we want to have an icon button.
We want to have an image here at the top and so forth.
OK, so we need to set it up, which will take a bit.
But before we do that?
Let's at a preview function here at the bottom.
So here at preview and at composable, and then we can use to fund account dialogue.
UI preview because I want to be able to preview the user interface and here I'm just going to call my
account style of UI method, which is this composable here?
So I just want to be able to see how this is going to look like what I'm building right here with the
cards and columns and stuff like that.
So let's start with the first rule.
OK, so I said, I want to have this.
I can hear you and that and this part.
Well, actually what we have, we have another another row here at the top where we have this cross
and then we have an image.
So let's start with that row first.
So here in this role, we have our I can button.
So it's a button that we can click on, but it has the form of an icon, and I'm going to just use an
icon in here.
So let's import.
I can hear.
And the icon that I want to use is going to be a composable.
So it comes from composite material and you see here it just created this graphic Strobl icon for me
once again.
So come on, Heidi, please.
So we need to import the correct one, which is going to be the UI version once again, and then we
can go over to passing the right parameters to it.
So hover over it and you will see what kind of parameters you get or just use control space and it will
give you the parameters that you can pass.
So I'm going to pass an image vector first, which will just be an icon dot default dot close icon.
So now we need to import the stuff again.
Icons is important as it seems.
Luckily, we need to import to report a close icon, however, and an icon always needs a content description
as well.
So content description like so this version and I'm just going to not give a complete description.
You could describe that it's this close button or so this would find it work fine as well.
So there's going to be our close icon and let's actually test this.
We should be able to test this.
So click on it.
And while there's still nothing, so here I'm just going to add an image which I need to import as well.
So import the UI version here, compose UI and this image needs a resource.
So I'm just going to use a paint, a resource where I'm just going to use the Google Image, so we need
to add a resource here and here.
So let's imported trouble.
And I'm going to use this image specifically here.
So let me take it from there.
Therefore, I'm going to add this double imported from there trouble Google JPEG finish import.
And now we have it available in our project.
So let me use exactly that image by going to art of trouble, thought Google.
And this will be fine, even though now it's not happy with the AH.
So where is this art coming from?
So I need to import are specifically here.
Which comes from our project, so let's use this package name that we have and import complement and
not the components.
But the project itself, ah.
So now we should be able to use our here.
All right.
So now we have the image.
But similarly to what we have to do with our icons, we need to add a content description here, so
content description will just be an empty.
Context, empty text go to modify this image as well, so I'm going to add a modifier here where I'm
going to set the size modifier dot size 30 density pixels.
So I'm going to give it a certain size and a weight of 2.0 F. So it will take all of the space except
for the space that this icon button will require.
So now let's test this, and by the way, now I understand why I didn't show earlier because I didn't
call my cousins dialog UI inside of this dialogue content, so to speak.
So now the content of the dialog will be our account's dialog UI composable.
So now we should be able to run it and see the cross with the Google icon.
There we are.
So this is our first role.
You see, the cross is at the very left.
What a close icon.
And then we have the Google Image, which takes the entire rest of the available space and is centered
as well.
And that is based on what we have set up here for this role, so vertically aligned towards the center.
But then the icon button is pushed all the way to the left because the image takes a weight of two,
so it takes all the available weight.
So now let's create another row inside of here.
OK, so this is our role with the image and stuff like that.
But now let's take care of this second row, which is this one here where we have an icon text with
another.
While this is a column as you see here with the text and another text, and then we have this number
here on the side.
So let's just go ahead and create another row here with a modifier where we're going to fill the mix
with once again.
So it takes the entire available space with some padding so that it's not going to be too close to each
other with, let's say, 16 dpi to the left.
And here I need to add an equal sign.
So 16 to the left and 16 to the top.
And again, an equal sign.
So this will be the modifier.
And then when you to have content for the row as well?
All right.
And what should be the content?
Well, as I just said it would be this image that we have there at the top, at the left hand side,
which is this icon and we have used this image before.
So I'm just going to copy and paste it in here.
OK, so it's this image composable with a painter, which is our tutorials resource.
And if you wonder where we used it, I think it was to draw menu and therefore.
You can just go to over to your components here and was it the home app or maybe even?
Where would you start?
I can image this one here, the profile image.
OK, so we had the tutorials, draw bowls and so forth, because if you look at our application here
at the top, it's the same icon that we're using.
So it's this image once again.
So that's what I'm using in my application as well.
So I was inside of the accounts dialog.
Okay, so here we're taking care of our image.
That's the first part of this role.
And then, as I said, we had a column.
So we have a text on top of another text, which is something you do with a column.
So it's inside this row still, but it's a new column.
Which will get a modifier as well.
Well, I'm going to set the weight to be 2.0 because I want this to be the while take the take the rest
of the available space so it will push everything that is before it to the left and everything that
is offered to the right.
So that's what this weight does because we didn't give any weight to the other items.
That's why the item that has a weight will take every bit of space that is available.
And then I'm going to add a little bit of padding to it as well.
So basically the same story as we have done with the other item.
So then this column now just has a text with another text.
So here, text me to import text for this to you.
I compose one.
And here I'm just going to set the font weight to two bold and say something like two thirds you and
then the other one will have no font weight.
So you can see I'm even using semi bowls.
So it's bold, but not entirely bold, so to speak.
So that's the column.
And then we have on the right hand side this little text that says 19:9.
Plus we have so many different emails and that is just a simple text.
OK, so let me just put this text in there.
I will have a little bit of padding towards the right hand side of 16 dpi so that it's not going to
be all the way on the edge.
OK, so that's what we get through this padding.
So let's run this real quick just to see how this is going to work out for our dialogue.
And we see this is what we get.
Even though I might need to change a little bit with the padding towards the top for my tutorials,
you, but maybe this will change once we have something underneath.
So let's see that.
Therefore, I'm going to add the final row, at least for this video.
And I know it's already too long, but it's just this little Google account button that we have underneath,
which really is also just a cart where I have a text in.
So I'm going to create a new role in here with the same modifiers that I've used before.
So let me just copy those actually, not exactly the same, but similar so it's going to fill the max
with.
And then I want to center it, not vertically, but I want to have.
So I want to have a horizontal arrangement, actually, and the arrangement should be spaced evenly.
So I want to have the item spaced evenly, which will take care of this event that we have horizontally.
It's in the center, so to speak.
Not entirely, but almost.
And then.
We go ahead and design what we want to have in there, and as I said, I want to have a card in there,
but a modifier where it requires a certain with.
So I want to make sure that the width is at least one hundred and fifty density pixels for it.
And then I want to have a shape of a rounded corners shape of 15 50 density pixels.
Like so, and then I want to have a border, which is just this border that surrounds it.
So let me put the border around here, which will have a border stroke of one density pixels that will
have the color of gray.
So color should be color dot grey.
OK, so that's my card.
It needs a content, otherwise, you see, we get this error here.
Now it's gone and the content of it will just be a little bit of text with a little bit of padding aligned
towards the center.
So it says Google account, which is this little text that I have.
So I have this card with a text and this should create this thing.
But then there's one last thing that you see here and that is this divider.
So let's just go ahead and create a spacer which will, first of all, create a little bit of space
inside of this role, but not inside of the card.
So here I'm going to create a spacer which will have a modifier with a width of 10 density pixels.
And then underneath the role, so underneath this role here, that's where I'm going to have the divider
like so where I'm going to use my modifier does padding of 16 density pixels towards the top.
So putting.
With top value of 16.
And now we should be able to test this again.
Let's see if we get the divider and everything.
And we do.
But let me see why we still have this uneven distance here.
So there's this two thirds you roll is not set correctly.
And looking at the cold, Gisele's the solution, so here I added, I padding top for this modifier,
for the column instead of bottom.
And this should fix the problem.
So if you rerun it, we should now see that the text has been pushed to the top and now it has the distance
towards the bottom instead of the top.
Perfect.
So that's a great start, as was already super long.
VIDEO I don't want to go any further than this, even though you see, of course, that this button
doesn't work.
This doesn't work.
But that's not what it's about.
In the next video, we're going to finalize this little dialog.