Welcome back.
And this video, we're going to add some more user interface items to our user interface here, for
example, some more texts you're going to learn about petting, you're going to see the difference between
speed, dpi and pixels and a bunch more.
So let's get started.
So first of all, I want to duplicate this calculator.
OK, so I want to duplicate this text and have another text in here so I can either just copy and paste
this and then I will have two of those because I'm in a linear layout.
This is the parents that I have.
They are on top of each other.
That's one point.
How I can achieve this.
But then the other thing is, I also have the option to just do it in code directly so you can just
go ahead and copy this text view and put it underneath it.
OK.
Let's look at that once again.
You can see this is what I'm getting.
So at this time, I pretty copied it one to one, and it has rep content set up here as well, which
is why it is in the center.
So this will explain the difference between rep content and match parent a little better.
So if I use match parents, you can see it takes the entire width, so the text starts on the left hand
side.
And the thing is the text that is inside of the text you isn't even the important user interface item.
It's this text view that is important.
So this text view contains text in itself, and because it is so wide because it has the entire space,
the entire width of the parent available to it, it will be starting at the left hand side.
So the text now is leaning towards the left.
So that's what this match pattern does.
It really just makes sure that this entire view, this text view takes the entire with that is available.
OK, so let's change that bracket to wrap content.
So it only takes the space that requires now.
The text itself that I want to display here will be H.
So calculate your H, so I want to have something.
So I want to have something similar to what we have here.
Okay, I want to have a certain background color and then the text itself should be white.
OK, and this doesn't look great, but it shows you how to use headings.
And this is going to be a very important aspect of programming, so let's get started with it.
So the first thing that I will add to my text you will be a background.
So here you can just search for background and here and can go ahead and use a background color.
So let's say we just want to use black for now.
OK, so we have this black background color and the text itself is going to be the same that we used
before.
It is text blue.
Now let me choose just to use a white color here.
OK, so there is this predefined color called color white, and now this is how it's going to look like.
OK.
This is not the color palette that we've been using.
So here you could, of course, use one of those color palette items in order to make it look cleaner
and better.
But that's not the point.
So I'm not showing you how to design a beautiful app, but I'm showing you how to design an application
user interface from a technical point of view.
So here, in order to make this look better, we need to have a little bit of a distance between the
letter and the border, so the background is not big enough.
How can I make this background bigger?
Well, what you can do is you can use a property called padding.
OK, so here in my text view, that will be my age text.
I could just go ahead and add padding towards different directions.
So towards the bottom, left to right top, you know, all directions individually.
So if you want to individually have different values, you could go ahead and set up all of those properties.
But I want to have a padding towards all directions.
So here I'm just going to test it around.
So let's just use 10 dpi.
OK, so we have 10 density pixels.
Now, this will give me a space between the edge of my text view and the actual text that is inside
of the text you.
OK, so that's what this padding allows me, or more precisely between the parent and the child.
So the parent is the text view, which is a view.
It's not the text itself, right?
It's the entire view.
And the child is the text that is inside of it.
OK, so that's what this padding allows me to do.
So now you could, of course, go ahead and define a padding towards the left specifically here.
Let's say we want to have 200, let's say, 20 density pixels towards the left hand side with padding
left.
Unfortunately, that doesn't work because we have already this padding, which overrides padding left.
So if I get rid of this, you can see that only creates this padding towards the left hand side.
And I could go ahead and add a padding towards the bottom, which would also be toe density pixels and
so forth.
So I could individually change that.
Let's say to the bottom, I just want to have 10 density pixels here.
That would be an option, okay?
But I'm just going to use the padding towards all directions here.
And by the way, as the background color here, I would use the same color that they use for calculate
your so here how that they call it, I call it text blue.
OK, so let's use that same as the background color here.
Text blue.
All right.
So calculate your age now, the next thing that we will need is going to be a tax to you, which says
in minutes.
And I wanted to have the same colored as this calculate your.
So what we can do is we can just go ahead and copy it from at the top here and then drag it all the
way down here.
And you can see now we have it further down.
So I copied and pasted it further down.
You could have also just copied it from here and pasted it later, and I click on this page and then
paste it.
That would have worked as well.
But generally, what's happening here is that because we are inside of a linear layout, what it will
do is it will orient every single item on top of the other.
That's what this vertical orientation allows us to do.
So we're saying every single item is on top of the other.
So this one first.
Then underneath this item, then underneath the next item and so forth.
OK, so that's what this orientation vertical allows us to do.
OK, so then now that we have that out of the way, let's change the tax that we display here.
So instead of calculate you're, I'm just going to display in minutes.
And that's a cool thing, because we have the same set things as we had that up there, so we don't
need to change anything here.
Now what will be important is that we add a button.
So in order to add a button, you can go to your designer and you can drag the button in here and you
will see that the button is automatically down there.
Also, you will find that this button will be created for you.
You can, of course, created manually yourself as well by just writing button with the less than sign
before it and then and then using the greater than sign, and you can then set up everything manually.
But why not use the designer for it?
Just drag it in here.
And it does the trick for us with an I.D., with the layout, with the height and so forth.
OK, so it says that the weather should match its parents, so it wants to take the entire with available,
which it does.
OK, if we look at it here, concedes the entire width and the height should rep its contact so it shouldn't
take the entire available height, but only as much as it needs.
And the text that we see in it is just going to be a button.
You can also see that the button by default, even though we'd never set up the color by default, has
a white text color as well as this purple background color so we can override that.
Of course, if we want to by overwriting the background of it, now here we need to actually change
the background tint this time.
So let's say I want to have a white background.
I would not change the background of the button, but the background tint property of the button.
And this will now give me this white background here.
Now the text itself, of course, will not be very visible here because we have basically made the text
white as well as the background white, so we can change that by changing the text color as well.
So here we can use black, for example.
OK, so we have this button now which has black text and a white background.
Even though I don't like it too much, I would rather have a grayish background color for it.
Or something that just fits our overall user interface colors, so we could again go to this palettes
screen and we could, for example, use this color.
So let's try that out as the background color and see how it's going to look like even though and see
how it's going to look like.
So here I'm going to go to colors and create a new color color name, and I'm going to call this one
button, Biji.
Color like so.
And then I'm going to use this color that I just copied with a hashtag before it.
So it will be similar to this tale that we had before.
But now let's go ahead and use this button Big Color that we just created and let's see how this is
going to be.
And I use it for the text color, unfortunately.
And I wanted to use it for the tint.
And here I'm going to use black, of course, so that we are the tint with this black doesn't look great,
but it's all right.
OK, so now there is a big thing that differs in what we want to have and this and what we have here.
So you can see this button here currently.
While it has white background and the gray color, we can get to there as well, you can play around
with it.
But the thing is, you see that there is a distance here on the edge.
And in order to achieve it, of course, I could change the size of the button.
I could say it should have a little bit of margin on the sides, but a nicer way would be to directly
go ahead and add a padding to the entire parent, which will just say give me a little bit of padding,
which means an internal distance on all directions, as we already had with this thing.
Ye, right?
So just as on the edges, I want to have a distance towards the internal items that I have.
So the inner items, so we can do the same thing with our very top item, which is a linear layout,
which is the parent.
And here you can just go ahead and add a padding of, let's say, sixteenth density pixels.
And if you look at it, this is what it creates this little distance that you now have at the edge.
So if I got rid of this, you could see that the button will take the entire space.
If I added, you can see now we have a little more distance towards all directions.
And by the way, regarding this deep Aspie and so forth stuff, I wanted to demonstrate this with a
beautiful Stack Overflow entry, and by the way, I really recommend that you use Stack Overflow whenever
you get stuck where you want to learn more about it.
So you can see that here we are talking about different screen sizes.
OK, so some of them have a bunch of pixels, others have less pixels and so forth.
So this is an older device.
You can see that the text size is the same no matter what we're using.
So Pixel dpi.
And so this is basically the basis which is used in order to, well, try to achieve the same thing
because now here we have this bigger screen and you see it has a bunch more pixels.
But the DPI and S.P., they look the same size as the screen has more pixels.
The text size with pixels themselves is significantly smaller because there are more pixels and each
pixel is smaller.
That's exactly how it works, right?
And then if you look at this screen here now here we have even a difference between the text size with
dpi and the text size with ESP.
So you can directly see the difference.
And the beauty is you can check out this article.
You will find the more details about here.
You can see pixels corresponds to actual pixels on the screen.
Then you have the AI and settings, which is based on the physical size of a screen in terms of inch
or 2.5 four centimeters.
Then you have millimeters, stencil points and dpi and or dips.
The same thing stands for density independent pixels, and SP stands for scalable pixels or scalable
independent pixels.
OK, and the screen sizes that you see here.
So the density buckets with the screen densities that you usually have is something you see with this
x x HTP and so forth.
And if you look at our project, you will find these as well.
If you go over to your map.
So the ICI launcher, if you look at it, AGP, MVP, API and so forth.
So this launcher is prepared in different sizes for different screen ratios or screen density pixels.
OK, so if you have a very highly density pixel screen with 640 density pixels, this image would be
use, which is significantly sharper than this one, for example.
OK, so that's what these things mean.
I would definitely recommend to check out this article if you are not fully sure if you understood this
correctly yet.
All right, so that's it for this video in the next video, we're going to finalize the user interface
and then after that, finally start with the date picker dialog and on date set listener and so forth.
So see you there.