Welcome back and this video, we are going to add a little more UI elements to our UI.
And before we go any further, I want to very quickly state something that I didn't say in the last
video specifically, but I hope it was clear the XML file is actually this file that we have here.
It is of type XML.
So this is the language, so to say, which is used, which is a language that allows us to write something
that is rather understandable for us humans, but which is also understandable for our application or
our phone, which then has to render all of them.
We have this representation of it that you can see here on the right hand side.
And if we direct something in here from it, the only thing it does is it creates XML code for us.
So, for example, if I drag in a button here, you can see here at the bottom it created this button,
so it just created a new button in there.
And if I get rid of this and make clean the pull it off or turn to turn it off, and if I get rid of
this button, you can see it's also gone in the UI, OK, so interlinked with each other and you can
work with the split screen, but you can also work only in XML or in code, or you can only work in
design.
Now working in design is fine, but it has its limitations, especially if you want to reproduce or
copy something such as the text you, for example.
It's a lot easier to do it in here than to drag a new text view.
And yeah, just enter all of the values again.
Of course, you can go ahead and do copy and paste here as well in the design view and then it will
create a new text.
You, as you can see, created this new text.
You calculate your and this one for now or this one is now not centered.
So there are multiple different ways of handling this.
But what I'm going to do is I'm going to go with the next step.
As you can see now, the with automatically changed to with.
So it's not rap content, but it's much parent.
So what's the difference between those two?
Well, Øvrebø content is only taking as much space as it requires and each parent is taking as much
space as is available.
So if I change the layout height from Øvrebø, content to match parent as well.
You can see now it takes up the whole screen or at least the rest of what is available, as you can
see, of course, our other TextView still stand strong, has its space, has a little margin towards
the top and also a little distance here towards the bottom.
But as you can see here, our other TextView is taking up all of the rest of the space.
All right.
So that's the difference between Øvrebø content and match parent.
And I want to use Øvrebø content.
Because this will only take as much space as it requires, and in my case, prepping the content is
fine so that I could see also sentence it again because our.
Overarching linear layout is actually.
Having the center horizontally, gravity, all right, so centers stuff horizontally, but it didn't
do so before for our second text that we had here, because the text took all of the space.
So it was still centered, but it took all of the space available, at least on a horizontal level.
All right, now let's change this, let's change the tax to age, and then I want to have a background
here.
I want to change the tax color and all those kind of things.
So now we can, of course, go ahead and create a new color property or we can just enter Disvalue here.
So I want to have white text for this and I want to have a background.
So add a background.
And which color are we using?
Well, let's create a new color again.
And I'm going to use this one, a name equals age, text, background, color, so pretty long name,
but it's descriptive.
And here I want to use disvalue here.
So it's going to be hashtag C8 four, six and so forth.
So now what you see is we have even more values here.
So it's not six letters or six digits anymore, but it's in fact, eight digits.
So this is the alpha value them, which means the opacity.
How well can you look through it, so to say?
All right, so here at color and I'm going to use the H text background color.
And of course, you can go ahead and create another color for this one here.
So color name and here age text.
Color is how you could call it.
So now the advantage of having all of your colors in here is that if you want to change colors in your
application, you don't need to go into the XML files, but you can directly adjust it from the colors
that XML file.
And this is very useful, especially when you have bigger applications and when you use a certain color
multiple times.
If you just use a color once, then it's totally fine to just have it in your text view or in your XML
file directly.
You don't need to create an additional color for it, but of course you can do so if you want to.
It's just an additional step.
Now let's compare this to our app that we had and we can see that the H looks a little different.
So here, if we look at it, it doesn't have that much space around it.
So how do we get that?
Well, we can use something called padding.
All right.
So padding.
There's a property called padding, padding, bottom putting and horizontal left, right start top vertical.
So there are different types of Pettys and the padding that I want to use as an overall padding, which
means that I want to have padding in all directions.
And if I do so, I can just add a value in here.
For example, let's say 10 density pixels.
So now I get this little distance towards.
The outside, so to speak, and the text now has a distance to its border, so the border is this blue
line that we can see here and we only see it when we click on it.
Otherwise, this gray line.
But this is generally the border that we have here.
All right.
So if I assume, then maybe it's a little more visible.
So.
Here it is, this little gray border around it and this.
Heading is creating the space inside of the border.
So if you want to have even more space, you could go and say you want to have 20 density pixels or
what you can do as you can, of course, say I want to have more padding towards.
The left than towards all the other directions, so here, for example, 50 density pixels and let's
get rid of this padding here.
I can see I have a lot of padding towards the left, as you can see before it was overwriting it.
So the overall padding is overriding whatever the individual padding stat you create will do.
All right.
So that's just an example, I will keep it with petting tent, that's city pixels.
All right, so now we can go ahead and create this additional text that was underneath it, which said
in minutes, so I'm just going to copy this TextView here.
I'm going to paste it below the other text you that we had.
And here I'm just going to change the text to in what, in minutes?
Right, calculate your age in minutes, then we need a button.
And you can create a button by dragging it from the pellet again, so opened up two buttons, direct
the button in there.
That's one option.
The other option is, of course, you create the button inside of your.
So here, create a new button.
And here it's important that you used to correct casing so button, as you can see, it needs a with
and a height.
So I'm just going to say it should.
The width should match its parent, so it should be a white button and the height should repp its content,
so it should only take as much space as it needs.
Now, as you can see, the button is not really visible properly or this visible, but it doesn't have
a text.
So if you want to change that, you can, of course, add a text to it.
So.
Text.
And here we are going to say select date, because once we click on this button, the user should be
able to select the date.
Now, here, I will again add some more properties, and what's important here is that we close this
button at one point.
What do I mean by this?
Well, we get an error here.
That's because our button is never close our button tag.
So we need this slash and the closing bracket here.
All right, now let's adjust this button a little more, let's change, for example, its margin towards
top.
It should have a distance between this text and the button itself so we can add margin top.
And let's say we use 15 density pixels here, so little distance, then we.
Make the text bold, so text style.
Let's make it bold.
Then the text says, let's change that as well.
So I'm just going to use 20 ASPE and this is a lot bigger now.
By the way, you might wonder what is all of this DPN sp stuff?
DAP stands for density pixels and SP stands for.
Scale independent pixels, if for whatever reason, I'm not explaining a term, then I either did it
before or I will do it later on, so don't worry.
But if I still don't do it or if you want to know it before I explain it, you really want to make sure
you understand everything.
Of course, you can always go ahead and Google it.
That's something that I highly advise because it will help you understand on a deeper level with your
liking, because not everyone wants to know all the details all the time.
Sometimes it's a little overload of information.
Sometimes you just want to get things done and want to see something on the screen.
But sometimes it really makes sense to just look it up.
So here, for example, if you want to know the difference between DPN sp, you can just Google it.
You can see that there is a little image and that on stack overflow.
So there was a question on stack overflow and here it's shows how those pixels are important when it
comes to the UI.
Here you can see the difference between a pixel, a density pixel and a scale independent pixel.
So here these are some examples that we have here on the site.
So, for example, pixels directly on a small screen might look the same.
So this is the.
Default screen size that this whole pixel and density pixel stuff is based on, so, for example, this
is how big 15 pixel look on the screen.
But if you have a bigger screen, which has a lot more pixels, then the text size suddenly appears
super small and you can barely read it.
All right, if the screen gets even bigger than this changes again, so as you can see, if you want
to have something look the same size, you can use density pixels.
And for text, you should use the scale independent pixels, which are great, because what they will
also take into consideration is the settings that you have when it comes to text sizes and will adjust
it so that it looks better on the different screen sizes.
All right.
So if you want to know more about it, check out the stack overflow article.
What's the difference between the EPDP and Hesp?
It's very well explained.
And what's important here is also the screen density, of course, because the newer the screens are,
the better the screen density is, which is measured in DPI, which stands for density pixels per inch
and a higher DPI, of course, means that the individual pixel is going to look smaller to a point where
you can barely see it.
All right.
Coming back to the UI.
So now we have the button and what you can see there's a little difference between the button we have
here in the button there.
So the color is different.
And also there is a little distance here on the left hand side.
Why is that?
Well, you could expect this to be a specific with.
So somebody defined a specific with for this button.
But actually, what's the case is that I have a little distance.
Around the corners towards all of the elements inside of my UI and I can do so by going to my linear
layout here at the top and I can adjust its settings a little bit.
So, for example, I can add a little padding here and let me actually do that here, petting, and
I'm going to add a padding of 16 density pixels.
As you can see now, I have this distance here towards the left and towards the right.
So that's just padding here, which is our linear layout, which is the parent of all of the other layouts
which are inside of our UI in our case.
All right.
So I'd say we make a break here.
And for you as a little exercise, please try to replicate the UI that you see here.
You don't have to take into consideration what you have here at the top.
So to him and his calculator, just text and also this bar that you have here at the top, that something
that you don't need to take care of but take care of the rest of the UI.
So change the color of the button and the text, then add a new text here, another text, another text
and another text.
Try to replicate what you have here and see you in the next video.