Back and this video, we're going to set up this exercise activity, and we're going to specifically
look at this toolbar here at the top.
Because instead of using an action bar, we're going to customize our own toolbar.
And this will give us more control over our application so we can specifically define what we want to
do with this toolbar if we want to add a little extra button here, for example, and so forth, so
we will have full control over it.
So let's go ahead and start implementing all of the good stuff.
Therefore, what we will need to do is, of course, going to be a new activity.
So let's go ahead and create a new activity.
Here I'm going to use an empty activity and call it exercise.
Back to video.
Like, so I exercise activity, let's generate the layout file for us, and let's go ahead and create
this file.
OK, so first of all, let's find a way to move over to this exercise activity.
And therefore, of course, once we click on the start button, so to speak, we want to be able to
move over.
And therefore, we need to create an intent in here.
All right.
So how do we create this intent?
Well, it's very simple.
We've done it before.
We create a new variable called intent.
And then we use this intense class puzzle in the context make sure that we import it as well.
And then we say to which class we want to move over and we're going to move over to the exercise activity.
And then we need to use this class, thought Java at the end.
And now we can just start this activity with the intent that we just prepared.
OK.
So I hope you manage to do this by yourself as well.
You should be well aware of how to move between activities at this point.
And now let's go ahead and well contested to see if this part works before we test anything else.
So once it's installed, click on the button and you see we're moving to a different activity, which
is currently empty.
So now let's design this activity.
So what I want to have in this activity is going to be view binding.
Therefore, we need to set up new binding here as well.
And just a little challenge for you.
Set up the view binding for this user interface.
So just the binding object.
OK, I hope you tried it.
It's similar to what we've done in the last video.
So here I'm going to use binding and here it's called activity and not mean binding, but exercise binding
because we're in the activity.
While the exercise activity class, right, and we set that to null and then in the concrete method,
we need to initialize binding.
So we give it a value of activity, exercise, inflate and use it and lay out inflator here.
So that's generally the approach how we inflate.
So we fill it, so to speak, with the binding.
Using the layout inflator that we can pass and then we can use this binding in here.
Which is a Nullarbor to set its route as the content view.
So as the main content of our uncreated method and now what I want to add in here is going to be the
option of using our action bar.
So as I said, I want to have an action bar here at the top, you see on a top level inside of our.
Manifest, we have defined that we don't want to have action bars throughout our entire application,
so we said no action bar.
So that's why we don't have an actual bar in the screen as well.
We just have a wide screen.
So instead, I want to have a tool bar here, which, as I said, gives me more control.
In order to create a tool bar, you need to, first of all, well to create the tool bar inside of your
XML file.
So let's go over to our activity exercise example and set up a toolbar.
So this time I'm going to use something called relative layout in the relative layout.
Items are positioned relatively to another.
OK, so this is one of the more old school layouts you could say, but it's still very valuable and
useful.
All right.
So inside of it, I'm just going to have a toolbar and just toolbar is under Android app compat widget.
OK, so here it will have a whiff of parent and a height of.
And this is going to be a height that I want to use from action bar size.
And it's under Android's colon.
Eight are so attributes that there's this action bar size property.
So I want to use this particular size, which is a dimension that has a defined value.
So it's just predefined, and this will allow us to make sure that each of our bars will just be as
large as an action bar.
Okay, so a toolbar is just an action bar that is more powerful and more customizable.
That's what we want to have.
So I'm going to give this an ID so that I can access it in my activity file.
So I'm going to call this one toolbar exercise like so.
And if you want to change its theme a little bit, you can set the theme property and then we can now
define our own theme.
So there would be easier ways, but I'm going to show you how this is done.
So inside of your themes, XML file, you can define styles and you see we have this one style already,
the no action bar style where we use a bunch of items for colors and stuff, but we can create our own
style here as well.
And I'm going to call this one toolbar theme, and it will inherit from the action bar theme.
So it's under ad style.
And here the overlay, I mean, just type it in, I think I need to do that theme over Lay.
And material components, action bar.
This one here.
OK, so I'm going to inherit from that, I'm saying, OK, bye style should be as this style, but I
want to have some more settings.
And the settings that I want to put in here, I'm going to add an item which I'm going to call color
control normal, which will be a color that I'm defining and it will use to color and thus create a
new color for that.
So here at color, I'm going to call this color toolbar color control normal.
And this color accordingly doesn't exist.
So let's go over to our colors and let's create this color, which would just be a black color so you
can move over to your colors XML file and you can just create this color here.
Even though, of course, at this point you could have used a black color as well.
But just to show you how this works, right?
So you create the new color here that you want to use, and you could replace that any time because
we're not going to just use black here, but we're going to use this toolbar color normal, and you
can just use this to change it, whatever you want to, whatever you like here, and this will then
be the color that would be used for your.
Theme fire, let me jump over to the theme again.
So here I'm using the light theme here, not an all day theme, not the night theme.
So you would have to design each individually, but I'm just going to focus on the day theme here.
OK, so I'm just saying I want to use this color instead of this to buy theme.
OK, now inside of our exercise activity, we can now actually use our toolbar.
And how do we do that?
Well, by first of all, making sure that we support action pass.
OK.
Set Support Action Bar.
There's this method and you need to write it correctly.
So here set.
And this is your support, Mike, so said Support Action Bar.
And then you can say which action bar you want to use.
So here by adding Dot to bar exercise, which is this toolbar that we created?
OK, so this is the toolbar that will be at the top of our screen, as you see here.
And now, of course, needs to use the theme that we have just set up this one here, this toolbar theme.
So how do we connect all of that?
Well, here we just need to say.
So here in the theme, we just say ad style toolbar theme, because that's how we call it right.
So it's this style that we created inside of our themes.
All right.
And now we can change another one, so I'm going to set the background of this to be white, see here
and color white, and then we have the layout height.
Well, we can also add a text color.
So title text color.
For our toolbar, and I'm just going to use color primary here, OK, in our case, it was this grayish
black color.
All right, now, let's check it out.
Let's see how this is going to look like in our exercise activity.
And we see we have this toolbar here at the top, which by default uses the name of the application
as the title.
And now let's go ahead and add a back button here as well in order to add a back button.
We can use binding darts to bar exercise that.
And of course, the question mark as well.
Set navigation on Click Listener.
OK, so this is an on clip listener for navigation and a toolbar is a navigation bar, so to speak.
And here we can call the on back pressed method.
So the on back pressed method is going to do the same thing as if you click on this back button on your
phone.
Now, if we run this, we will still miss the back button.
So how do we get the back button in there?
First, we need to check if support action bar is not equal now.
And if that's the case, then we can use that action bar to set the display home as enabled.
So display home as enabled.
And this is the one so set display home as up enabled, and we can set that too true.
So this will then activate the back button for us.
Let's check it out once again.
And you see we have the back button now and we can click on it and you see it works flawlessly.
And if we are on this screen, you can also click on the back button and you see it will also send us
back to the main activity.
So that's generally how it works, right?
So you have this back button in your toolbar, and once you click on it, you get the same behavior
as the back pressed if you implement that this way.
So you could of course, implement whatever you want.
You could close the application or go to another screen or whatever.
But what we're doing is we're just saying do the same thing as if you are clicked on the back button
on your device.
All right.
So that's pretty much it in the next video, we're going to implement custom UI elements for our progress
bar to tick counterclockwise, so let's look at that in the next video.