We'll come back and visit the next few videos, we are going to build the calculator in minutes, so
this little app that allows us to calculate our age.
In minutes, so instead of having the aging years, we will see how old we are in minutes.
And in my case, I'm this old, as you can see, so 16 million, five hundred and eighty three thousand
one hundred minutes old, that's how old I am.
And yeah, you can select the date here.
And depending on what you enter, the tool will calculate how old you are in minutes.
Of course, it's not going to take into consideration at which hour you were born and which minute,
but a rough estimate, because even if the right now is not precise by, I don't know, a thousand,
it's still going to be good enough, I think.
So this is the way that we will have.
And you can, of course, go ahead and try to build that UI.
You know how to drag in elements into your UI.
And all of these except for this button are just simple text use.
So you could just drag and text views into your UI and then try to build that.
But of course, you can also follow along and I will show you every single thing that I'm going to build
in here.
This is not really super useful, but it's a funny idea, I think, and it shows you how to build a
UI and it also shows you how to use patterns.
We've seen that a little bit already.
But what's more important, it's going to show you how to use date pickers and how listeners work.
Even though we already saw how a unclick list in the works, it's going to be even more important to
see how listeners in general work.
And that's something that you will see step by step by adding more listeners to your knowledge base
and just by practicing.
All right.
So I'd say let's just start let's create a new empty activity or a new project with an empty activity.
And this one will be called a page in minutes.
Of course, you can change the safe location, which I did.
So here we're going to use API sixteen hundred four point one jellybean, which will run on pretty much
all devices.
Only a fraction of devices are still online, which use older versions.
All right, then, let's finish in order to create the project.
Once the project is created, we have the main activity, as we have before, and we have the activity
on the main example, which are the two main files that we're going to work in.
So the main activity is our code in the front, which pretty much is our logic, and then our activity
is the appearance of our application.
And it will take a little while until it's loaded, so give it some time.
All right.
Now, in order to create this, I am going to close this project up and it's going to be a little more
visible what we have here on the screen.
So this text to you that I had here is a world text to you.
I'm going to drag it all the way up and I'm going to change some of its properties.
So, for example, we can change the layout with, well, web content sounds pretty good because we
only want to take as much space as it really requires.
Then the text can be instead of a world, something like calculate.
Your.
And I'm going to press enter now, you can see that it took dispelled you.
Next, I want to change the text appearance a little bit.
So, for example, the text size should be a little bigger.
Something like 25.
CP should be a little better because it should take a little more space.
Next, I want to make the text bold.
So here on the right hand side, under the common attributes, you can change to textile, to being
bold and we can add a little margin towards the top.
So whatever is at the top, we want to have some space in between our text view and the other element
that will be on top of it, which in our case really is just a bar here at the top.
As you can see, this is the part we have and then we have some space in between here.
And that's the space that we can get via adding a margin.
So we can do it by going down here and all attributes and scroll all the way out, down to lay out margin.
And here we can set the layout margin for the top value, for the bottom value and so forth, even though
it's not as visible here as you can see, you have to make some space for it.
So layout margin top, that's where I want to have 15 density pixels, as you can see now, it adjusted
this line that we had before with a straight line.
So it was a zigzag line.
Now it's the straight line.
It's just as, OK, I want to 15 pixels, distance or density pixel distance between the top element
and this text that we have here.
As you also saw, there is another text color.
Right.
So how do we change the text color?
Well, we can, of course, search for color.
And that's the easiest way probably we can see here that currently it's using the secondary color here.
And where's that coming from?
Well, it comes from color, secondary text color, and we can find it in our resources.
So here in the rest folder, you have a bunch of resources, for example, troubles, which can be images
but can also be XML files.
Then the layout, which is our XML file, which is the layout of our app, which is what we are currently
editing, then the map, which contains the images that are used for the app icon on the Android device
once you install it, and then we have values.
So here in the values, that's where we can add all our values and stored them, for example, colors.
So there's this color XML where we can store colors, for example, color, primary colors, primary
dark and color exit.
As you can see, they have a value here, which is a hexadecimal value and it's the value that represents
a color.
So 62 is the red value, zero zero the green value, i.e. the blue value.
So what is an easy why is it not a number?
Well, hexadecimal numbers, they go from zero to F, so instead of our system that we have where everything
is just going from zero to 10 or actually from zero to nine, to be precise, it just keeps on going.
All the way to F..
All right, so 16 numbers instead of just 10 numbers as we have it in the decimal system.
I would like to have different colors here.
So instead of having the colors that were populated by default, I want to have my own, which are the
following.
So I'm just going to paint them in here.
You can use your own colors if you want.
You can, of course, use the same colors as I do.
So you can see it's this yellow orange color and then this purple color.
So these are the colors that I want to use.
So the color primary is your primary color.
Primary dark is a darker version of your color.
It doesn't have to be in my case is the same.
And color accent is an excellent color, which fits well with your primary color.
Now, of course, you could go ahead and make it a little darker, so make your primary color a little
darker.
But for now, I'm just going to keep those colors.
So in order to create a new color that you can then reuse.
You can just enter.
Color name equals, and then you give it a name and I'm just going to call it text color.
And it's going to be this value here.
So this darkish color.
All right, so now we can go ahead and use this color in our activity so we can change the text color.
To.
That color slash text color.
Now, if we look at it, we can see.
That it is the same color as we had in our Epper.
All right, that we are so this is the color that I'm using here.
All right, so now let's add this age text here, as you can see, it's a white text and it has a blue
background by blue.
So let's add another text view.
And what I'm going to do is I'm just going to copy this text you that we have here and duplicate it.
And instead of doing that by dragging in the text in and adding all of the values, once again, I'm
just going to go ahead and.
Copied this text, you know, before I do so, I'm going to get rid of all of these constraints.
So it created those constraints automatically for me because I just direct it in there.
And that's just how Android handles it.
And I'm just going to create it my own way.
So, you see, I.
Got rid of all of that, but now I get an error here, so not complaining and it just moved to Texas
all the way up to the top left.
Why does it do that?
Well, it does so because it's it doesn't know where it has to be.
So it says, OK, difference of 15 density pixels or distance towards a top justice margin.
But it doesn't know whether it should be centered or whether it should be in its parent and its parent
is going to be this constraint layout that we have here at the top.
Now, the straight layout expected all of the additional information that we had in here.
So all of this constraint bottom and so forth.
But I want to use a another version of layout.
So what I'm going to do is going to change the name here at the top and therefore maybe it's better
if I go to code.
So instead of using a constraint layout, I'm going to use.
A linear layout.
So let's mark all of that and enter a linear layout.
Now, if I do so, you can see here at the bottom, it also changed to linear layout.
If it doesn't for you, then also enter linear layout here at the bottom, because it's important that
the opening tag and the closing tag are of the same type.
All right.
Because everything else is within our linear layout.
And you can also see that the linear layout bracket is starting here and it's not ending until here.
And these are all the details of that linear layout.
So all of the properties of that linear layout.
Now, what's inside of the linear layout is for now our text, you can see the arrow disappeared, so
the text doesn't complain anymore.
Let's have a look at what our UI looks like so you can see.
All right.
Calculate your is now.
Distance to the top, so it has this little margin of 15, 20 pixels, but it doesn't have the center,
so it's not centered, so to speak, and in order to change that, we are going to do the following.
We're going to adjust our linear layout, so I'm just going to add some more attributes to more linear
layout here, and instead of doing it in my UI, I'm just going to do it in the code so I can enter
Android's kolon gravity.
Equals and then.
Center horizontal, this will center my.
Elements, as you can see horizontally, which means now it's in the center of my screen, not in their
overall center.
But of course, you can also just do center and it will go from the center itself, so center horizontally
will center on a horizontal level, such a vertically center vertically.
Well, center it, as you can see here now vertically in the middle of the screen, another way of adjusting
a property is instead of just typing Android, Kolon and so on, so we can also directly access the.
Property that we want to change, so in this case, the orientation, so I can just go ahead and say
I want this orientation to be vertical.
So now my phone, even if we turn it around, will still display this information on the same way that
we can see here.
So on a vertical level.
Next, I want to change the background color, so I'm just going to enter background and now I can choose
a color and as you can see, I can either choose the colors that we had in our colors, XML, or I can
manually type it in there.
But I'm just going to create a new color here.
So color name is going to be background color, and I'm just going to use this value here.
Now let's use this value for our activity in XML here.
We can just enter at color, slash and then select our background color.
Now we have this a little warmer white color.
All right, so you can see we only created the text here at the top and a bunch of new colors, but
what's more important, we looked into the structure and we created our own structure.
We said, OK, we don't want to use the constraint layout.
We want to use a linear layout where things are positioned linearly to each other.
And not based on constraints, for example, the constraints towards the left hand side, towards the
top, towards the right and the bottom, as we had before, but we just said, OK, we want to position
things on top of each other.
And yeah, that's what we're doing here.
All right, so I think we should make a break here and the next video, we are going to finally see
why, because it was important to, first of all, teach you all of the different details around the
properties of the text use and so forth.
And in the next video, we are going to create all of the rest.
So see you there.