Welcome back.
In the last video, we managed to create the star screen and now our goal is to get over to the exercise
screen, which is this one you can see get ready for, and then this should be the timer.
But before we implement a timer, we first need to implement this whole view here that we have.
And in order to do so, we need to create a new activity, of course, as we always have done.
So.
Right, click onto the folder where you have your activities, the new An activity, and then you can
create an empty activity here.
And I'm going to call this one exercise activity and everything else will be the default.
So then we have this new activity that should be the second screen, right, where we will see our exercises
and then Android manifest.
We also have this activity there now.
And I would like to set some settings here because I want my app to only work in portrait mode.
So let's change that real quick.
And here I will add orientation so screen orientation and set that to portray.
Now Android starts to complain, but that's just a warning.
It says expecting screen orientation, unspecified or full sensor for activity.
All right.
So that it looks good on chrome OS, but I'm just going to ignore that because I don't care about Chrome
OS devices.
I want to create an Android app here for Android devices.
And the next thing is we can go ahead and set a theme.
Now, there is a theme called App Compact, No Action Bar.
So that's the one that we can, of course, use.
But we can also create our own no action bar in our styles if we ever want to do so.
For now, we can just leave it as it is to keep it simple.
The next thing I want to do is I want to move over from the main activity to the exercise activity.
So from one screen to another.
And as you know, we need to use intense for that.
So let's create a little intented here, which will move us over.
So I'm just going to say Vul intent.
It's going to be a new intent and we need to import content here.
So make sure you import it.
Then we need to pass the context and the class or the activity that we want to open.
And here in order to open up the activity, we need to pass the Java class, so to speak, to it.
And then we can call start activity.
And pass in our intent, and that will then open up the new screen.
Now, if you're wondering what this colon colon class means.
It's just a way to get to class to retrieve the Java class of an object used to Java extension property
on a class reference, as you can see here, colon, colon, class Java.
And at this point, we should be able to run it.
There we are, so not as a start.
And as you can see, we move over to new screen can go back.
But as you see, the new screen is a dark, empty screen, of course, because we didn't implement anything
in there.
So let's add some stuff in there.
So let's go ahead and add a little toolbar for the title of our app or the screen in general.
So let's go ahead and create a new toolbar.
And here we need to set the width.
I'm just going to say it's going to match the parent.
And the height is something that we will take from Android itself.
So Android Kolon attributes.
And then there is an attribute called Action Bar Size because.
We don't want to define this ourselves.
Android knows by itself how high an extra bar should be.
All right, then we can set the color here, of course, and I'm just going to set a white background
for now.
So background should be white and that will be.
Hash f f f.
And then I will give this toolbar and Edem, because I want to be able to access this and I'm going
to call this one toolbar, underscore exercise, underscore activity.
And I was still complaining because we are using and constrained layout, but I prefer the relative
layout, so I'm just going to use that and then it's not going to complain anymore.
And if we do so, we will not need this gray line anymore because even Android created out or Android
studio, so we can just leave it out because we already have an XML namespace here, which is fine.
Max, I want to give this to borrow some functionality, and in order to do so, we can go to our exercise
activity because that's where we have this toolbar.
And by the way, if you're wondering why would you should you use a toolbar instead of an action bar,
then you can check out this video to bars for Flexible Action Bar and more.
So the idea is that toolbars are more flexible than action bars, and that's why we're using them so
we can define ourselves what those bars should do and how they should react.
So let's set the Support Action Bar and here we want to pass our toolbar that we created to bar exercise
activity.
So our two toolbar will act like an action bar to a certain degree now.
And we can now go ahead and create an action bar object here, which will support the action bar functionality
so we can check first.
Is the action bar available or not?
If it's not null, then please go ahead and apply.
Set a display.
Home as up and Abels, true, so we activate our action bar and.
And this display home as an abels, so if you want to know more about this, you can see here set whether
homes should be displayed as an up affordance, set this to true selecting home returns up by a single
level in your UI rather than back to the top level of front or front page.
So if you have multiple different layers of activities which were called after another, then you have
to make sure that you go to the correct one.
And in our case, we want to go to the home screen once we click the back button.
All right, and the cool thing is we will add a little more functionality to this later on, because
once somebody is in an exercise, we don't want them to jump out of the exercise.
And while by accident, for example, because they clicked on the back button, but they didn't want
to go back, they just accidentally clicked on it.
And then we want to pop up a screen which says, hey, man, you're almost done with your exercise,
so why don't you finish it before you go back to your home screen?
So that's the idea behind this.
All right.
Now, in order to do so, so in order to specifically develop or implement whatever you want to do,
once somebody clicks on this button, you can go ahead and use the toolbar exercise activity, dot set
navigation on Click Listener.
So I'm just going to use the second one, which is the one with the curly brackets.
And as you can see, it creates those curly brackets.
And in here I can just implement whatever code should be run once we click on it.
And I will just call this on back prest method, which basically just does the same thing as clicking
back on your phone.
So the older hard buttons or in the future, with the Android 10 features and even newer features,
it's going to probably be SWIP features from the right and left instead of having big buttons on the
screen as it was in the past.
So if we check this now, we should see that we can go back with a back button, even though I have
a resource, a link here and I have one, I have too many.
All right.
Good to know.
Let's run it again, then we should be fine.
All right, so there we are start.
Then we have our action bar and I pressed on it and it went back, so the thing is we don't see it,
but it's there.
So if I click anywhere else, you see nothing happens, but if I click on the top left side, where
usually this back button, as you can see, I get back to my home screen.
So that seems to work even though we don't see it yet.
And by the way, one last thing that I want to add here is the orientation.
Which I want to set as a vertical so for our relative layout, should be a vertical orientation here.
And if you were wondering why we didn't see the back button, you can see it's because the color of
our toolbar was white.
So we need to change the color of the text of our toolbar to being black, because, as you can see,
currently, it's white.
Now, if you have such a situation, then you can, of course, play around with the colors, but here
I just change the background, right?
And I would still really like to have a white background.
Let's assume that our designer said, man, I need to have a white background there to top and to text
has to be black.
Now, how do you do that?
Well, you can, of course, Google it.
You can Google for how to change color of toolbar, back button and Android, or as I did here, change
color of back button and toolbar Android.
And then you can find stack overflow here.
It's an old post, but it's using XML here.
So it's not really Java or Scotland code here.
So this is fine and there are multiple different options.
What you can do.
You can either create a style here, my fancy theme, as he called it, and then you can home as up
indicator change the background, color aspect, button image, whatever the image is that you use there.
So if you want to have a specific image as a back button, then you can use this approach here, or
you could go ahead and change to color with this style here.
As you can see, it's a lot a little longer here.
But in the end, it should do the trick and as you can see here, the toolbar itself has a theme, though,
so let's go ahead and copy the style and just check what happens if we apply this to our app.
So let's go to the Styles folder, because we have a specific folder here on the resources or actually
a specific file styles.
And here we can create a new style and it will be our toolbar theme.
Now.
In colors, he called something to bark color control normal, of course, we also need to define such
a color.
So let's create a new color here.
I'm going to call this one to back control normal.
And here we can give it a color, which is going to be black.
All right.
So six zeros, which is will be this black color.
And then you see this arrow disappears and now we can go ahead and give this specific style to our toolbar
here.
And how does he do that?
Well, he said up theme is going to be the toolbar theme.
So here theme and style toolbar theme.
And if we check that, you can see.
That now we have our back button and of course, our text itself is not there anymore.
All right, how do we get back the text?
Well, you can just go for color and you can see here titled Text Color is another property here, and
you can change it to whatever it is.
And I'm just going to use the color primary, which is this darkish color.
So if we test that again, then we should see the title there.
So you can see you have a lot of flexibility with toolbars.
There are other ways to do this and we could have done this a lot less code and simpler.
So to say.
But you're here to learn something, right?
And I want to teach you the different options that you have, because then you see the freedom of what
you can do.
All right.
So there we are start and we can see seven minute workout and we can change this color any time.
We could even create an additional color for this or whatever.
But we have this back button, which totally works fine now.
All right.
So this is just the start.
Of course, there's nothing cool happening yet.
We haven't implemented all the individual images at the bottom there with these circles that we saw,
but that's what we're going to do in the next video.
So see you there.