Welcome back.
In this video, we are going to implement this little custom dialogue that you can see here and then
we can select whatever we want to select.
Well, you can see that a little text pops up.
As of now, we're just going to use tost for that.
But overall, that's what we want to have at the end of this video where we implement a camera functionality
as well as a gallery functionality later on.
OK, so let's take care of that.
So the first thing I will need is a new vector.
OK, so let's create a new vector asset and I'm going to use the camera.
But this time not this plus camera, but this camera old version here.
OK, let's select that one here.
And I'm going to call this.
I see vector code to camera.
Then maybe we also want to change the color a little bit, so I'm going to use this color here.
So thirty eight.
Eighty three.
OK, let's select this color.
And that we are now, we will also need to create a new vector asset for the gallery and here we can
search for images.
I'm going to select this image.
I can here and I'm going to call this I see Vector Gallery.
And color can stay the same.
OK, now we need to take care of the custom dialog layout, OK, so we can go ahead and just create
a new custom dialog layout inside of our layouts.
OK, so create a new layout resource file.
I'm going to call this one dialogue on this core custom image.
The lecture and the brutal element will be a constraint layout.
That is fine.
Now let's define this thing.
So what I want to have is basically this layout.
Let me just paste it in for you and talk over it, because I don't want to bore you with me typing all
of that in.
Basically, what we have is the layout.
With a little bit of padding, then we are using the hotel chain, what this will do is it will use
chains, but it will also spread elements accordingly.
OK, so you can see there's a certain distance from A to B and from A to the parents wall or edge,
so to speak.
The same goes for B, and in our case, this will be the image selector and this one will be the gallery
selector or something like that.
OK, so that's what this news article stands for.
Then we have a text you called TV title, then we match the parent with the content and here we need
to add a new string.
So let's go ahead and create a couple of new strings as well, because we are going to require them
for the different elements.
So here we have also label camera as well as label gallery.
OK, so let's let's create those strings real quick.
Therefore, I'm going to go over two strings and here title Select Image Action or just say Select Image
Action.
Then the camera will be camera and they will get where we will be gallery.
OK.
And now back in the dialogue, custom image selection here you see we have this text to you, which
is going to be the one at the top.
So here, select image action as well as the camera and the gallery image.
OK, so here are the values, you can really just download them, as I said, just download the file,
the Excel file and use it, or you can design it the way you want it.
OK, what's important are going to be the IDs and we can then use them directly in our ad update this
activity.
OK, so that will be the layout for our dialogue.
Now, how can we actually make this dialogue visible?
Well, therefore, we're going to require a new function here.
So I'm going to create a new function called custom image selection dialog.
OK, and here, first of all, we are going to creating a dialogue object, which I'm going to call
dialogue, and we need to pass the context.
So I need to import dialogue for this to work.
So here, Android App Dialogue is the import that was created for me by using alt enter and then we
need to set up the binding object.
So here file binding will be dialogue, custom image selection, binding, which will be a dialogue,
custom image selection binding where we inflate and what is it that we want to inflate while the layout
and later.
OK, so basically this is our binding and you can see we have to set up this binding object here as
well in our custom image selection, because this will be a different binding object with you binding
object than our activity update or add up to this binding.
OK, so that's why we need to create this variable and then we can go ahead and set the dialogue so
its content view.
So what should be visible inside of that dialogue to be binding that root?
So the root of that binding is going to be this.
Dialogue, custom image selection, binding, which is this XML file.
OK, so this is the exact same name the XML file has what you can see here that was created for us through
view binding, which is only made possible because we added this implementation in our app that created
file, if you recall, or Cradle to Cradle app.
We have this view binding to be active.
OK, we said that to Drew.
OK, so now we set the content view and the next thing that we can go ahead and do is actually to replace
the toast message with displaying that part.
So here we are just using the toast message, super boring.
But instead, what we can do is we can actually call our custom dialogue.
So custom selection, dialogue method.
Now, for this dialogue to appear, we need to show it, OK, dialogue to show.
At this point.
Now, let's go ahead and test this.
And as you can see, it's not very happy with my name.
Maybe I should rename it.
But let's run it first and see if this is actually going to work.
Then I can rename this variable here.
So we are click on it and you see it appears so we can sort a camera or gallery.
OK, let me read this real quick.
So this should be custom image with a capital high and now we need to implement the unclick events.
So how do we implement unclick events for our dialogue?
Well, we can do that directly in our custom image selection dialogue method.
So here we are just going to use our binding object again to implement a TV camera on Click Listener,
and we are going to implement it straight away in here.
OK, so here I'm just going to use a toast and the toast is going to use this context and the text will
be camera clicked.
And we're going to do the same thing with our other view gallery and here it's going to be gallery clicked.
All right, now let's run it again to see if this is actually going to do anything.
And.
Let's click on it, you can see camera clicked and here gallery clicked, but it's still open, right?
So this dialogue is still visible.
We can click away and then it will be gone.
But if you want to make sure it disappears directly when we click on it, we can dismiss the dialogue
at that point.
OK, so dialogue thought dismiss here as well.
So let's be runners and test it again.
That we are looking at.
And you see, Cameron was correct, then it disappears calories, correct, and it disappears.
Now, you might have noticed something with the image, with both of those images, they are pretty
small now.
We can change that by going to our I see vector gallery, for example, here, and change its height
to, let's say something like 80 density pixels.
And the same goes for the width.
So here, 80.
DP for both of them, and of course, I would like to do the same thing for the other image, for this
one here, for the photo camera, so here there should be ADP for the height as well as a TDP the with.
And because this is a vector, it will scale it perfectly.
So there are no pixels visible here.
So that's the beauty about using vectors because it's just a path that it creates for us and it does
it very well.
OK, now if we run this, our application should look a little better or the image should look a little
better here as well as it will be bigger.
Hey, let me read this again, opened up and there we are, so it's roughly the width of the text that
is required in order to state the name of that icon, so to speak.
OK, that's it for this video.
I hope you enjoyed it.
Now you see how you can create your own custom dialogues.
It's actually very easy.
You can create a design and then inflate that design and then basically use view binding to access the
individual IDs or elements inside of that design to then run actions such as the unclick events.
All right.
So see you in the next video.