Welcome back.
And this video, we are going to build this little application, which is the age two minutes calculator,
so it's going to calculate how old we are in terms of minutes.
So you can see seventeen point five million minutes old roughly.
And I can then just select dates here.
Let's say you were born in 2018, which is very unlikely.
On September 14th.
So if you are three years old, that means that you have lived for one point five, seven, nine million
minutes.
Okay, so that's basically what this tool can do for you.
You can just then select the date of your friends and see how old they are and just tell them, Hey,
your 15 million minutes old or congratulations to your 20th millionth minute or so.
So you could celebrate all kinds of weird stuff there.
You can, of course, adjust the tool so that it will tell you how old you are and hours, but that
would be a very easy change that you can do later on.
For now, we're going to focus on how to build this user interface, and we're going to look at listeners
a little more.
For example, this button, once we click on it, you can see that this data picker appears.
You're going to see how to implement such a date picker to your application and then get the data from
that date picker that the user has selected and then do some calculations in order to then finally display
the result.
So we are going to again see how you can connect your user interface to do some logic and then what?
Display it accordingly?
Great.
Let's get started.
So we're going to get started with an empty activity here, so let's select that because we want to
start from scratch and I'm going to call this one Dobby Coke.
This will be the date of birth calculator and you can change the safe location if you want to package
name.
As I told you earlier, should be unique.
Then we set the language to the minimum SDK can stay at API 21, which is pre-selected for us.
OK, so let's go ahead and click finish.
And this will then start to Gradle process.
This can take a while up to a couple of minutes, depending on your PC.
OK, once it's ready, you can go ahead and can start making changes to your user interface.
And that would be to change the activity.
Main example, as we know.
OK, so let's go over to it.
You can, of course, also just go to your layouts folder.
So here resources, layout and then to activity main.
And then you will see this file, which is pretty hard to see with all of the stuff that's happening
here right now.
So here, let me zoom out a little bit and you can see that this is basically going to be the user interface
that I currently have, which is just the Hello World statement here.
So there's really not much happening.
Pretty boring.
And we're going to change that because we want to display some more data, as you saw.
This is the user interface like we want to have as a result.
So let's get started by changing this Helloworld text here.
You can see that there are a bunch of connections towards all directions.
That's because we are inside of a constrained layout, and it just needs to know how this view is constrained
and it's constrained towards all its parents borders.
So the parent is its constraint layout.
We're going to change that to a relative layout, which will make it a little easier for us.
But let's, first of all, start by changing the properties of this text view helloworld.
OK.
I'm going to give it the different name, and you can see here on the right hand side, there are attributes
that we can change, so I can just click into this text view also in the componentry, in the left hand
side or directly in the designer here.
And then I can change the name.
So I'm just going to call this one calculate your OK, so this will be the first line, so to speak,
so it should be calculate your.
Then we will have h with a little background.
This will show you some tricks along the way.
OK, so that's the text and you can see it's there, but it's significantly smaller than the result
that we want to have, and it has a different color.
So let's change those two things as well in order to change the color.
You can just search for color here.
And then the one that we want to change is going to be the text color, so it can either select the
text color from the pre-existing ones that we have available here.
Or you can just click on this little black icon here and then select a color from the date picker or
just use a hexadecimal value for it.
So what would be hexadecimal value?
Well, hexadecimal value is a value that includes something between zero and F.
So what the heck is F.?
Well, let's look at it here real quick.
So we have one two three four five six seven eight nine.
So this is the decimal system and we started zero actually OK, and this is the decimal system, but
the hexadecimal system then just goes on.
So it goes all the way to f.
OK, so it has 16 values.
So these are 16 values, and that's what the hexadecimal stands for.
And in order to define a color, you are using hexadecimal values.
So something like.
Zero zero zero zero.
Like this would be a value of white.
So the red, green and blue portion of it would be zero, which means there is no color.
And if there is no color, then it's going to be white.
If there is a bunch of color, it would be f f f.
So six f's or depending.
If you also consider an alpha value, it would be eight.
So the first values would be the alpha value, and then you have the red, green and blue value.
In order to demonstrate this a little bit, let's go over to coolers star cold, super fast color schemes
generator.
So here the beauty is, it can help you to generate a palette.
OK, so you can start to generator here and then you can just go ahead and select the color that you
like.
So you see here f f f d eight to it's going to generate this yellow color f nine seven one will create
this light selman color and so forth.
So let's say you want to override the color here, so I'm going to use some different values here.
You can see Sunny generates this red color for me, or if I go with a bunch of blue in it, so red,
green and blue, as I said.
So this last part is blue.
So that means that if I have a bunch of blue, it will create a bunch of red with a bunch of blue and
that is purple because we have just a very little bit of green.
So if I added a lot of green to it, you can see that this is the color that I'm getting.
So a bunch of red with all green and all blue.
OK, so that's how this color comes about.
So let's say we wanted to use this color.
We could just copy it from here, and that would be it.
But I'm rather going to use this light salmon color.
So let me copy that because it's going to be a little more visible on our white background.
So let's go back to our project and go to our tech, select their text picker and then just enter this
value and you can see it just uses this value that I entered in there and transfers it, then RG B values
that we can read.
So this f f here stands for 255.
This nine B stands for 155 and this 71 stands for 113 because this is not actually 71, but it's seven
one in hexadecimal values.
Super confusing, but that's how it works.
You can, however, also use beautiful colors from the palette that you have available here.
So materials 600 colors, materials, 700 colors, they are very similar, but they are slightly different.
And you can then just select colors from here directly and they will suit very well together.
So if you are to use this year as your text color, let's say this red color, then you could, for
example, use a white background and would look fine.
But of course, black is always good with white background.
Now, coming back to color that coal, you can find trending pellets, so colors that fit very well
together because it's really something that I'm not a pro at.
And if you know colors very well, you can come up with this stuff yourself.
But that's the beauty here.
You don't have to come up with this stuff yourself.
You can just use color palettes that work together very well.
So, for example, these five colors, they work very well together.
If you were to build an application, you could use those colors for the different items or different
parts of your application.
So you can just copy this color, for example, and then use it as your text color here.
Let's do it.
And this will then be this blue color that we have.
Now, I'm not happy with the size of my text.
Let's change to size by just searching for size.
OK.
Here at the top, I can see we have the scroll bar size and the bunch of other properties.
But then the one that I'm most interested in is going to be the text size.
So let's change that from 14 s to, let's say 25 s p and s p stands for scalable pixel.
OK, so we're going to have 25 scalable pixels, which will make our text significantly larger on our
application.
So this seems to be fine.
All right.
So now that our Texas two here at the top, I would like it to have a fixed distance towards the top.
In order to achieve that, I can just search for something called margin.
OK, you can, of course, just scroll through and look at all of the different items that you have.
So the common attributes are the most important ones, I'd say.
But then of course, there are a bunch of other really that relevant ones as well.
For example, the layout margin.
So if you want to have a certain distance to other items, you can just use this layout margin thingy.
So these properties and for example, I want to have a distance of at least 16 density pixels towards
the top.
So let me just enter this and you can see now I have this 16 here with a straight line.
So it's just going to have a distance of 16 dpi towards the top.
And this is also a very commonly used distance.
So eight density pixels or 16 are usually used when it comes to how much distance you want to have between
the edge and your first item.
So in my case, I'm going to use 16 dpi for my first text here.
So this looks quite fine, I believe, on our device.
OK, so I have this color now, and the problem is I just use this color here randomly, so I basically
used the text color, which I defined once and what if I want to reuse it so I will have more text in
the future?
Well, of course, I could go ahead and just copy this here and then create another item and assign
the same text color.
But that's not good development, so a better development process would be to go to your colors and
set up a new color that you want to use here.
So I'm just going to create a new color item here under my colors example resources, and I'm going
to give it the name of.
Let's say text blue, OK, because this will be the blue that I want to use for my text.
I'm going to put it in here, so now I can just re-use this color anytime I want to use it.
So coming back to my text color here, I can just go ahead and instead.
Search for text, blue and Selecter, text blue here and now it will be defined as text blue instead
of this hexadecimal value, at least here, because the color itself is stored at a safe place where
we can very easily reuse it any time we want.
OK, now one very important part, and that is I want to simplify the process for you when it comes
to creating the user interface, and it will be a lot easier for me to teach it to you by using a relative
layout where you are items.
So text, for example, and buttons and so forth are relative to each other.
OK.
Because we are using this constraint layout, which is really powerful if you are just dragging and
dropping stuff from the palette and just building your UI this way.
But I want to show you how to do the same thing using some L and there it's a lot easier to use that
relative layout because if you look at the code of our design that we currently have, we have this
text view with a bunch of different properties, and the only ones that we have defined are the margin
top the text, as well as the text, color and text size.
So there is a bunch of other stuff that we have never defined.
So here rep content, for example, it just says how wide is this item going to be?
And wrap content is one of the two options that we have here.
So actually multiple with three options, we can define specifically how wide the item should be with
density pixels.
So I could just say this should be two hundred density pixels, for example, which wouldn't be a good
approach.
Or I can just say, OK, just take enough space that you can show yourself.
So the view should only be big enough to enclose its content, which just means it will take its own
with so however many letters it needs to show.
And then it will show that, plus a little bit of padding.
The same goes for the high tier.
I could also say Match Parent, which will then make this thing as wide as its parent, which means
as to the constrained layout in which it currently is.
So it's in this container called constrained layout.
So this text view that we have here, but I'm going to use for web content, which is good practice
for items that don't shouldn't take the entire space.
Now, on top of that, I have all of these properties here with constrained bottom to top of and to
bottom off and so forth, and this makes it quite complicated, in my opinion.
So I'm going to get rid of that, at least for now, and we're going to use concrete layouts later.
But if I get rid of those properties, you can see the text you suddenly isn't happy.
And if you look at my design, it just dragged this item all the way to the top left because there are
no constraints anymore.
Well, I'm going to change that by, first of all, just changing this, not being a constraint layout,
but instead I'm going to use a linear layout.
OK.
I think I said relatively out earlier, we're going to see how to use relative layouts as well.
But we're going to use a linear layout for now.
OK, so we have this a linear layout now and a bunch of additional items here.
I'm going to go over what that is later on.
For now, just consider that these are namespaces spaces which just allow us to use certain items.
So it's similar to the namespaces that we have seen here, like the imports that we had, where without
those imports, we wouldn't be able to use all of those different items, like the on create method,
like the bundle and so forth.
And the same goes for these namespaces that we have here for tools as well as Android.
So here you see a Milanese namespace.
Android contains all of those properties that we are using here, like the with hide and so forth.
OK.
So then I want to make sure that this text view is going to be in the center because currently it's
just here at the left hand side and you see there's a little distance towards the top, but not much.
So in order to achieve that, I can change the general settings of the linear layout.
I can just say that every item that is in there should be centered horizontally so I can just go ahead
and use the gravity property here and use the I the Settings Center horizontal.
So what that will do is it will now center its items horizontally.
So we then change this item itself, like the text view here.
But we changed how every item inside of our our parent, which is this linear layout is going to treat
its children.
It's going to say, Hey, you little child, you have to sit here in the center and that's how it's
going to be.
So if you were to use center in general, what it would do is it would set all of its items directly
into the center itself.
You see here, it's centered on the vertical as well as the horizontal level.
So that's how you can play around with those values.
And by the way, you can just use control and the empty space in order to see which options you have
available here.
So I'm just going to say it should be centered horizontally.
Let's quickly run this application and see how it's going to look like.
So once you run it, you can see it says calculate you're OK.
And by the way, I want my application to always be used in this mode here, so it should always be
used in this horizontal mode.
And in order to achieve that, I can just define it.
I can just say that the orientation should always be like that.
So let's at the property here.
Called orientation on the linear layout level, and here I can just define it to be vertical, which
makes sure that the items inside of the linear layout are going to be stacked on top of each other and
not next to each other.
All right.
So now let's say we want to change the background color of our text here.
So white is a very good one, but I'm going to use a slightly different color.
Which comes from this page as well, so I'm going to use this yellow color, so IE9, see four six a
where you can use whatever color you want.
I'm going to use that color in my project.
Therefore, I'm going to go over to my colors and I'm going to call this new color background or big
color.
OK, and let's add this hash value.
You need to add the hash tag here and use this hash value.
Now I can go ahead and use that color.
So here, let's change the background.
And used to Big Color that we have just defined, and you see the idea really helps us out here.
So now let's test it, our tech, our designer out, and you can see that this is how it's going to
currently look like.
So let's run this on our device real quick and see how the change will look like.
You can see calculate your and then we have this yellowish color as the background.
Now, I would like to make a little change to to calculate your texts as well so that it's going to
be actually bold.
OK, so let's go ahead here and search for a property called text.
And here it's called style, and you can see here I can choose between bold, italic and normal.
So I'm going to use bold, and let's see how that's going to look like.
You can see now our text is going to be bold, which really makes this text a lot larger and more visible.
All right, so that's it for this video and the next one, we're going to add some more text views to
our user into.