Welcome back and this video, we are going to go ahead and add the Internet in order to move from one
screen to another, so to get to our activity at Happy Place XML file or to the add happy place activity
and.
Well, in order to do so, let's get started by adding this content and add on click listener in our
main activity.
So inside of the uncreate, I would like to have the fab add.
Happy place, this is the floating action button that we had, and I'm going to add a set and click
listener onto it, and what I want to do in there is, of course, to call this intent that will bring
me over to this other activity.
Of course, we also need to import the intent and then the class to which I want to move over.
And that is my add happy places, class and happy place activity.
Class.
That's our.
All right, and then we can start this Internet.
So start activity with the intent.
All right, let's test this, all right.
We are let's click on the fat button.
You can see where in the next screen, which is our ad heavy police activity, but then we have no back
button here at the top, even though when we press the button here, of course, it brings us back.
But then let's implement that back button all the way up there.
And therefore, we need to go to our ad Happy Places activity and just at the bar, so said support.
Action bar.
Which is going to be our tool bar that we created to bar at Happy Place, which we have in our activity,
happy places.
So this tool bar here, that's the one that I want to use and then I'm going to get navigation on Kleckner,
so are here for our toolbar.
So let's set that set.
Navigation on Click Listener.
And in there, I just want to call on that press, which is the default functionality, which will do
the same thing, is if we press the button and then we need to support action bar that set display.
Home has up enabled to true.
So this line here will add the back button.
All right, now let's test is again.
There we are.
So let's move over.
And you can see we have this back button and you can also see that they are white.
So we have white colored text here.
And also this.
I can hear this back button is also white and the background is blue.
So the background being blue is basic.
That something that we have said in our Atlas example here, which is this color primary.
But how do we get the color of the toolbar being white?
Well, that's something that we have set up in our Style's XML, which is this custom toolbar style.
So we set the text color primary should be white, which is just headline color.
So this one here and then this other one here, this color control normal is does beg pardon, which
we also said to be white.
All right.
So if you were wondering what the style is now, you know, because I really just added this and and
only talked about it very briefly.
All right.
So then.
We can go ahead and start designing our happy place activity, this one here.
I'm going to show you what the goal is and how it's supposed to look like afterwards.
And then your task will be to build that yourself, of course.
So you know how to build your eyes, right?
You've done that multiple times.
And if you don't want to do it because you feel like you had enough practice, you can, of course,
just download the whole thing and just paste it in there as I will do it, because I'm not going to
type in all this XML code.
All right, so there we are.
And this is also supposed to look like afterwards and you can see we have a bunch of edited texts with
our.
Hence here and then we have this little area here which has a background button and this ad image button
with a safe button at the bottom.
So try to implement that.
By the way, this whole thing here is inside of a scroll view.
So if you were wondering what kind of.
UI element we're using here, so it's the scroll view, this one there, because it could happen that
the things the whole UI elements don't fit into a screen if you look at it on a super small screen,
for example.
All right.
So please go ahead and try to implement that.
OK, so I hope you post the video and tried it.
Otherwise it's fine as well.
Of course.
So I'm just going to paste it in here and you will see that it's a lot of code that is used here.
So it starts on line twenty one and it ends in one hundred and sixty.
Something and let's look over it from the top, so I'm using the scroll view, which is called S.V.
Main, or I'm going to call it S.V. Main, then the with as much apparent height is going to be zero
density pixels fill viewport is set to true.
And you can see here, Phil, viewport defines whether the scroll you should stretch its content to
fill the viewport and setting that to Drew.
Then we have the constraints, so this one has to constraint the bottom of parent power and parent and
then constrain top to bottom of the idea to bar at place, then I'm using a constrained layout, budget
constraint layout here.
So inside of my skull view, I'm using a constrained layout again, which in turn has.
Text input layout's four of them in total, and they all have an app comput added to text in there,
and you could see I'm using a bunch of strings, colors and dimensions which are all in red right now.
That's because we still need to add those dimensions.
So I decided to do the whole project with external dimensions and strings and everything so that it's
going to be a super maintainable project.
All right.
So I'm not using any magic strings or magic numbers in here.
So we're going to have everything and external files, OK?
And I think it doesn't really make sense for me to express or talk about every single aspect of it.
You can really just download the document and look through it.
Basically, what we're using is something that we have done before.
The only thing that is probably interesting because it's new is going to be our combat image images
that I'm using.
So.
So with a high margin background, padding and saws are all in red because we still need to atom's this
ad screen image placeholder, that's something that we need to paste in here so you can download it,
of course.
From the course, I'm going to paste it into my travels here, so that screen image placeholder PMG,
which is this image here.
OK, so this will be the background of this complete interview, or at least it's going to be the source,
the background itself will be an image view border, which we also still need to create.
And then we have a text you, which is actually our ad image button, so it's this ad image, which
is really just a text you, but we're going to use it as a button.
OK, and there what is interesting in here?
Well, nothing really, but then the button that I'm using here at the very bottom, which is this beautiful
blue button here, which says save, well, that's also something that we need to create.
So it's this shape button rounded.
All right.
So let's go ahead and create this real quick.
This shaped button rounded.
Hover over it, create trouble, call it like that, and this shaped button around it will be taking
shape with corners.
OK, so we're using this shape.
Being a rectangular solid, which is the background color, and it has some corners with a certain radius,
all right, at this point everything seems to be red.
So I'd say let's go to our dimensions and create those dimensions and also the whole strengths and colors
that we're using, because otherwise I think it will be a little bit confusing here.
Let's start with the dimensions.
So inside of the dimensions, I'm just going to create all of those new dimensions here.
Paste them in.
And you can see have many different dimensions, so what's important here is that they are meaningful
names.
All right.
So the names should be understandable and they should really express what they are doing.
So, for example, that I mentioned that I would like to have for added text, text size should be 16
hesp the ad screen Theal margin top should be five density pixels.
And still, if you look at it, is at the very top, which is our text input layout element.
OK, so here.
This is the title, for example, geolocation and so forth.
And that was the damage of the fire.
All right, so you see all of the dimensions are in here.
So if I then later on look through the design and I decide to use different values, I don't have to
go through the happy places or at Happy Place XML file.
I just go to the dimensions file and I can change everything from here.
This becomes especially useful when you have multiple screens which are using the same kind of sizes.
OK, so if you have, let's say, three or four screens, they are all very similar to each other and
they have many things that they share with each other.
Then it would make sense to change the dimensions in one spot.
OK, so instead of having to change all of those different XML files that you have, so let's say that
happy place XML file, then you have another example file and so forth, then you would instead just
change everything from one file.
OK, so this is the dimensions file, and as I said, it's a different approach this time, but that's
because we have already seen how to do all of those things many, many times.
And I think at that point you're really ready to go with this approach.
OK, so then I need some strings and I have this edit text hint title.
I have add a set of text Hinde description, date, location, then the text and image and the button
text safe.
So what would you do that while the advantage now is that you could go ahead and adjust your application
so that it works in different languages so you could change this text add image to.
Thirteen suffering in Germany, just as an example, OK, so this is the basic idea behind using this
string's XML file, but of course, also you can change things from here because mainly what you're
going to do most of the time is going to reduce the string names at some points and then really make
sense to change them in one spot because otherwise it's a mess to go through all of the different files.
OK, so you can already see here edited translations for all locales and the translations editor so
you can have this additional editor, which will really help you to add translations here quite easily.
But I'm not going to go into that for now.
If you want to learn more about it, I highly recommend to just try it out.
So the next thing that we want to do is to add the final colors that we're still missing.
And I'm just going to go to my colors XML and here I'm going to add to our colors that I want to have.
So I have this text color, the secondary text color, white color, which we're going to reuse, and
then the pattern background color, which is this light blue, this one that we have here in our color
palette.
OK, at this point, we can go back to our.
Layout, file this activity, add happy places, and we can see if we still have errors and actually
we still have one, which is the state image view border.
So if we look at it, I have this little border around the image that I'm using.
And in order to create this, what you can do is the following.
So let's go into this file or let's create this file and.
I'm just going to paste it in here.
So basically, it will just be a rectangle with a stroke, which has a whiff of the dimension that we
defined a color, that we define the secondary text color, then it has a solid color background, which
is our white color, and it uses corners what the radio shape.
So here at place, image shape could see its three density pixels.
And that's also cool because you can very easily move over to, as I mentioned, if you just press control
and then click on it or hold control and then click on it, and then you will see where the dimension
is defined.
So if you want to change it, you can easily change it from here.
All right, so now let's test it and let's see if the UI works as we expected it.
OK, that we are.
And as you can see, it all looks as intended.
OK.
Later on, we are going to add another button here, which will allow us to set the location based on
where we currently are, but overall, this is pretty much what we are going to use for our application.
All right.
And the next video, we are going to add the functionality for the date selector here, so we will be
able to select a date and then populate this added text accordingly.
So see you there.