Welcome back.
And this video, we are going to add to the custom dialogue, which comes up once you press on this
back button, this one that you can see here.
And then, of course, if you press now, then nothing will happen.
But if you press.
Yes, can you come back to the main activity?
So that's the idea behind this feature and it's there in order to prevent accidental touches.
So if you prevent this, then your users will be a lot happier, because if they by accident finished
the exercise, they might be super disappointed about the design of the app.
All right.
So this is something that you can do by yourself because you have seen how to create custom dialogues
multiple times.
I can show you once again how it looks.
So this is how it looks.
So you can see a thicker text here, a little space towards top and bottom, some more text and then
those two green buttons.
All right.
So please go ahead and try to build that by yourself.
And then, of course, you can see how I did it if you feel like you're not ready for it yet.
And of course, you can just follow along with the video and then build this up with me.
All right, let's get started.
The first thing we need to do is to create a new layout, so I'm just going to create a new CSIR file
and it's going to contain a linear layout.
So I'm just going to replace this with a linear layout root element.
And I give it the name of dialogue.
Custom back confirmation.
There we are.
And I'm just going to paste everything in here, then go over it, because you know how to build those.
So let's do that real quick.
Let's go from top to bottom.
So I have a linear layout here with growthy to center the orientation as a vertical.
So stuff is put on top of each other.
We have a little heading to the sides and then we have it takes you another takes to you, then a linear
layout and two buttons.
OK, let's start with the first text you will see here.
We met Step-Parent in terms of with but we read the content in terms of height.
We want to center it.
Then we have the text.
Are you sure the text color should be black?
18 hesp and the textile is bold.
And then we have another text view, which is this will stop your workout.
We you've come this far.
Are you sure you want to quit?
And here again, we met a parent, we read the content and then we have a little margin towards the
left, margin towards the top and more towards the right.
So this is more stop top end.
And then we center it.
We set the text color to disgrace color.
We set the text size to sixteen aspy.
So this is, by the way, this element here.
Let's make it bigger and.
Well, it doesn't help too much.
Right.
So.
Here is this text here.
Then we have a linear layout which contains the buttons, so what we want is to put stuff next to each
other and if we want that in a linear layout, we use orientation horizontal, then we have a little
margin towards the top.
So we have a little space.
The height should wrap its contents.
So we don't want to take all the available space, but we only want to take the space that is necessary
for those two buttons.
So only the height of the buttons?
Pretty much.
All right, then.
The next thing is we have those two buttons and they must have an idea because we want to access them.
Right.
We want to trigger them with unclick listeners.
I set the layout with two zero density pixels.
Why do I do that?
Well, because I am using layout weight.
So inside of this linear layout, I have two buttons that they both have a layout weight of one, which
means they will both be the same width.
And that is great because that's exactly what I want.
I put the height to 40 margin and 210, so there's a little distance between the two buttons.
That's the first button that we're looking at, right?
The Yes button then weight, as I told you, color accent, the green color as the background color
of this button, the gravity is centered.
We have some padding so that the text has actually some space.
So you can see padding around the text.
Then we set the text.
Yes.
Text color is a white color and text size this 16 espie.
And now we have the same rules here for our other button.
Only that the margin now is not margin and but margins start, which means there's a margin towards
the left.
And other than that, the rest is the same.
Of course the ID and the text are different, but the rest is pretty much the same.
OK, so that's our dialogue.
Custom back confirmation XML.
So this is just this XML file.
If you want to know more about how to build an XML file up like this, you can of course check out one
of the earlier lectures.
But I think it's already way past going through all of that individually because you have used it already
multiple times.
OK, now that is step number one.
Step number two is to actually prepare the code and the code is going to be in our exercise activity.
And I'm just going to create a new function here at the very bottom, which will take care of this custom
dialog.
And I'm going to create this one as a private function and I'm going to call this custom dialog for
back button.
And inside of here, we always have the same structure, right?
So we create a custom dialog, which is of type dialog.
So we use a dialog object in order to create this custom dialog.
Then we set its content view, which means we set the layout, we set the unclick listeners, and then
we finally set to show it or we show the custom dialog.
So let's go ahead and do all of these steps can, of course, tried yourself.
Walkerston, dialogue is of type dialogue and you have to pass in the.
Context, and it's going to be this, all right, so we, of course, also need to import dialogue this
class in order to be able to use it.
And then you can go ahead and create a custom dialogue, set content view here and set the view.
And it's going to be our dot layout dot.
And it was called dialogue, custom back confirmation.
So what we're saying is, OK, this custom dialogue that we just created, please set this UI that we
set up or this Xome Alpha that we set up here as the content view, so has pretty much the appearance
of this custom dialogue.
Then we set the two buttons, so we give those two buttons a functionality and the buttons are inside
of our custom dialog.
And the one I called TV.
Yes.
And I said an on public.
Listener or actually actually let me see DVS.
Yeah, that was the button.
And in my case, at first it was complaining, but then I entered the name once again and then it didn't
complain any more.
So this is really something probably to do with the idea.
OK, then what I want to do once we proceed.
Yes.
Is I want to shut down the custom dialogue, so I want to dismiss it.
OK, that's one thing.
But then the other thing that I want to do is I also want to finish this activity so that I come back
to the main activity, because that's the idea behind this yes.
Button.
So looking at it again, we start, we press, we click.
Yes.
You see, we go back to the main activity and we could, of course, start an intent here.
But if we do so, then we would layer intense on top of each other.
And that's not good because then you can press the button multiple times and it creates a mess.
So it's good to just close the activity that you don't need anymore with using the finished functionality.
And now we have the same thing, pretty much only that we don't want to finish, and that is when we
press on the TV.
No button.
Then we just want to close the custom dialogue, OK?
That by itself is already pretty good, but we, of course, need to show the custom dialogue at one
point because otherwise the whole preparation, because all of that is just preparing this line here
where we actually then see the custom, the dialogue.
All right.
Now, of course, calling this function is going to be mandatory for anything to appear at all.
So when do we want to open up this dialogue?
So when do we want to display it?
Well, that's something that we need to set up in the uncreate.
Let's go back to the uncreate method here.
And we had this toolbar exercise activity, set navigation on Click Listener and instead of having this
on back press.
So instead of closing directly when we click on this button, we want to run our custom dialog for back
up like button function, which would then in turn open the custom dialogue and it will function as
we've seen in the example.
So now let's test that.
So that we are pressing the start button.
Pressing the back button, you see, it pops up, this custom dialogue lets us know, OK, still there.
Let's process and there we are.
All right.
Now, there's, of course, one thing that you could add, but I'm not going to do that in this video
and in this example in general, you could, of course, pause the timer when pressing on this button.
So that would be an option.
But that's also depending on what you prefer in terms of the user experience.
Maybe you want to keep it running in the background.
So maybe the user pressed on the button, but he didn't know that he pressed it.
So he doesn't really care.
He only needs to know the sound in the background in order to know which exercise he has to do.
So he's not really looking at the phone.
So these are things that you need to consider when building this up.
OK, I'd say let's make a break here and go to the next video.
Where we're going to set up the BMI calculator on our app, so we want to have a little BMI button here,
and once we click on it, we want to go to another activity where we can enter our height and weight
and then get the BMI calculation result.
OK, so see you in the next video.