Welcome back and this video, we are going to set up our first screen for our happy place, is that
because, of course, we need to have our start activity or our main activity from which we then go
to adding new screens.
And of course, here we will have later on our recital of you with all of the happy places that we have
already edit.
But for now, let's just prepare the project because we are going to need quite some stuff here.
So let's get started by calling this one happy places.
All right.
And you can, of course, call it as you want.
I'm using API 21 here and impressing Finnish here to get started.
As soon as the gradle is done, preparing the project or loading the project, we can get started.
And the first thing that I would like to do is I would like to create the right color theme, because
here this is the default color theme that we see.
But I would like to have a different one.
And in order to get a color theme that really works together, what you can do is you can check out
websites which give you advice on great colors that work together, which are color palettes.
And here's an example of such a website.
So I just Googled color palettes or beautiful color palette.
And this site comes up and then you can see that there are a bunch of different color palettes that
you can use.
And the colors, they are very harmonious together and they work very well together.
All right.
So here you can choose any color that you like.
As you can see, you have the color code down there, which you can then use for your colors.
All right.
So whatever you prefer, you can use it.
You can see very many different color palettes here.
I personally will probably go.
Well, I thought about the lollipop one, but I think I will go with this one here and number three,
even though, of course, you can take any color, it's going to be fine anyways.
All right.
So let's copy those colors here and go back to our project.
So what I'm going to do for now is I'm going to put them in here as a comment.
And then we can come back to this later on, OK, but I'm just going to use the first colors here already.
And we can then, of course, change and add as we need the.
All right, so this is how we're going to start.
And later on, as I said, we will add some more callers.
OK, then the next thing is I would like to add a dependency to our application so that we can use the
floating button.
Of course, we could have gone like this.
We could have created a new project using the basic activity.
But then it comes with a lot of overhead and I want to keep it very simple.
So what we need to do as we just need to add something in our build that gradle module, Ebbe, and
which is a dependency.
So I'm just going to add it here.
To the implementations, which was going to be our Android material material 1.0 zero, which in the
end allows us to use material design, which is pretty cool, and that includes the fab button.
So this add button, once you're done here, you can press sync now in order to think the new implementation
and the application will be prepared for this.
All right, the next thing that I would like to do is I would like to adjust my layout.
So an activity, I would like to have a fair button.
So I'm just going to get rid of this.
Thanks to you, and instead of a constraint lay out, I'm going to use a frame layout, so here, frame
layout, this one here and then I would like to have a floating action button.
And what I'm going to do is I'm just going to paste it in here because you have seen floating action
buttons before.
So we can see we're using the floating action button, which has an ID flap at Happy Place, which stands
for Floating Action Button, Happy and Happy Place.
And then it's going to wrap its content.
The gravity is going to be to the bottom end, which means to the bottom right hand side.
And then as you can see, I'm using the layout margin here, which is a dimension.
So we need to create this new Web margin dimension.
So let's create this diamond value resource margin.
And here you can enter a resource value and I'm going to set that to 16 deep and I saw that in DeMetz,
you can see it created this new file called Dimond's.
And in here we will have all of our dimensions later on.
So you can basically just go ahead and add all of your dimensions here.
And then you have one place where you can store all your dimensions and change them in here, which
will potentially make your life a lot easier later on.
And we'll keep the whole application clear.
All right, and then you can see I have something called I see Action Button had twenty four DP and
this is an example file that I want to have.
But then I don't want to create some elfy myself.
I would like it to be created for me.
And in order to do so, you can go to file new and you can select vector assets here, this one vector
assets and he can select what you want to do.
And I want to have it as a clip.
Art, you can give it a name and I'm going to call it see and the score action on the score card on
the score.
Twenty five DP.
Once you've given it the name, you can click on ClipArt and then you can select the clip that you want
to use.
And I want to use this add button here.
Can even enter add here.
And you can see there are a bunch of add buttons potentially at box circle and so forth.
But I just want to just add here and then you can select the color and I would like to use white here
so you can also just enter six times F and that will give you this white color.
You can of course, also select a color from here.
All right.
This is going to be 24 times 24, I'm going to leave it as that, all right.
And that's going to be the plus button, but it changed her name.
So I'm just going to change the name back to I see action at 24.
DEPI going to press next.
And as you can see, it creates this new drawable.
So I'm going to create add finish here.
All right, so when you look at the rubble folder, you will see that you have this new action button
here, which has this certain with a viewport, uses a certain height for the vector.
And then what's the most interesting part is this path here.
So it creates this path, a data you can see this is something that you couldn't come up with probably,
or at least I couldn't.
And then this will basically create this plus sign so you can create any type of icon that you want
for your troubles that you can then use in your applications.
All right, the next thing that I need to add is an activity, because we will need to have a new ad
activity here.
So let's go ahead and create an empty activity.
I'm going to call this one ad Happy Place Activity, because in there we want to be able to add a happy
place.
All right, now that we have that, let's go to our manifest our agenda of manifest file and here we
have the activity that was created for us.
So this happy place, this activity, and I want to define some settings in here.
So, for example, I want to make sure that this activity is going to always be in portrait mode.
So screen orientation is going to be in.
Portrayed, much portrayed, then I'm going to add a little label here and or label a happy place and
the theme, I would like to use a certain style here at style.
And here, I would like to use a custom no action bar theme, of course, the theme doesn't exist and
we need to add that theme.
So let's go ahead and create this theme.
Cannot resolve this.
So let's go to our styles, that example.
And in here, we can create our very own style.
Let's do that real quick.
So give this a name.
I'm going to call this one custom no action bar theme.
And it's going to be using the parent called.
No action actually here at Style Slash.
Themes that have compared that light, but no action.
And it's just one here.
OK, he apparent style theme, a polite no action bar.
All right, and in this style, I would like to just have one item which will have the name Android
Statis Pakkala.
And I'm going to set that as color.
The primary.
And maybe actually colored primary dark, so it's going to use this color, even though I actually will,
if I look at it now, I can see that this is the darker color.
So let's do it the other way around.
All right, like this, so this is the darker color of the blue color, so to speak, so I think this
makes a lot more sense.
All right.
Now, I have this style that I'm using here.
For my custom action bar, which will basically just be a light action bar.
No action bar, but I'm using my own color, so that's how you can adjust it to use your color palette,
because that's what we want, right?
We want to keep it all very clean and adjustable.
Unmaintainable.
I would like to add another style in here, which will have the name custom.
Toolbar style.
And in there, I would like to have two items, so one will be the text color primary.
And that will be said to white.
So I'm going to set out to hash six times F and then another one, so I'm just going to copy this item.
I'm going to put that underneath it.
So here, this item will be the color control moment.
And of course, here I have to be careful that the styles don't close here.
In between, so the whole file needs to be cleaned and that's how it's going to look.
So we have style item, text color, primary and color control.
So I'm going to use this style in order to then use my custom toolbars later on and what I want to use
it.
Well, I would like to use it in my happy place, this activity so here and this activity right there.
So I'm just going to add a toolbar in here.
To our.
So this EP combat widget toolbar, and it's going to match the parent when it comes to the with and
it's only going to use to attribute.
Action passes, so it shouldn't be higher than the action bar sized default value.
That's what I'm saying with this.
All right.
And then what else do we need for the toolbar?
Well, I would like to have an idea so that I can talk to it.
So I'm going to give it a I'd call toolbar at place.
I'm going to give it a color.
So a background color.
And I'm going to use color primary here and then a theme as well.
So let's add a theme, which will be our custom theme that we just created.
So style custom toolbar style.
And then, of course, it's still complaining because we haven't had it any constraints here.
So I'm going to add layout constraints.
So this one is end to end.
Of so this one here, which I'm going to set as a parent, then start to start off, which I'm going
to set as parents, and finally the top to the top of.
Which will also be the parents.
All right, now we can see that it's just going to be this toolbar that we have here at the top toolbar
at place.
All right, so that's set up for this video and next video, we are going to actually see it because
currently we have no way of getting to this page.
So this button here, of course, should lead us to this other page or this other activity.
So that we are.
These are the colors stop using and the plus button, of course, should lead us to this other page.
But you can see we used this little icon that we created, and that's pretty cool.
So here in our project and the drawable folder.
This little ICAM.
All right, so this is the set up and I'd say in the next video, we're going to add some more code
so that we can finally actually do something and see something in this application.
So see you there.