Welcome back.
And this video, we're going to finalize our user interface, and therefore we can just do a bunch of
copy and pasting, which is super useful.
And that's why I wanted to use linear layouts because with a constraint layout, it wouldn't be possible
and what would be so much more work to get this same layout done.
So what we can do is we can just add weighting here.
So layout weight, for example, and set that to one for our linear layout.
And you see that it will now, while its children will now take the entire space available because currently
the weight is just one inside of what we're looking at here.
This is the linear layout, the outer linear layout, which is oriented vertically so its children are
on top of each other because there is only one big child inside of the linear layout.
It will basically take the entire height available.
Now what we can do is we can just take this a linear layout now and duplicate it and duplicated once
again.
So what we need to do, of course, change now will be the entries of the buttons.
So the first linear layout that we have will have the seven, eight and nine, and the second linear
layout that we have will have a four.
Which will accordingly have the value, the tax value of four, so let's hard, cold or create this
string for us, then we will have a five here in the center.
And accordingly, we will need to change the tax to five.
And if we really want to, we can go ahead and create a strong resource for that as well.
And this one will be six.
So let's change that string to six as well.
And extract the string resource, and then finally, this one will not be divide, but let's say multiply.
For example, and this will allow us to, of course, have to change here.
This string, so I want it to be a star.
So let's go ahead and create a resource name which will be multi line.
OK, and now let's do that for the bottom row as well.
So here I'll have the value of one being it the left hand side, which also means that the string should
be changed to one and we can.
Extract the string this one will be to.
So here, button to.
And extract the string accordingly as well here.
And finally, button three and accordingly changed a string here.
And by finally, I mean finally fought for the numbers and also we still don't have the zero.
So I guess we will need another line here, but that's fine for now, so here.
This one will be a button subtract.
OK, so here is correct and text will be a minus, which we then accordingly have to hardcoded into
minus.
Like so.
OK, so now.
You see, by the way, that these tools ignore using on click an extra HTML has been added to all of
those, and that's why it's ignoring their errors.
So now let's add another roll down here.
So you see, this final row will now have to display the zero.
So this one button?
Zero.
Or you could call it null.
For example, if you come from Great Britain and then here, the text would be zero.
And now let's create a string resource from it as well.
So this would be the zero.
And now I will need less buttons.
So let me get rid of this additional button here.
Let me add the here see button seal will stand for clear and the text will just be C.F.R., which I
that create an extra string for me.
And then finally, we have to add button, which will just have the text of plus like, so OK.
So that by itself is cool and all.
And here let's call this one plus.
But I would like to make sure that the zero button is going to be wider because it really looks all
that.
We have four items in the role.
But here we only have three items in there.
It really looks off.
How can we achieve that?
Well, as you might know, we are working with weights here.
OK, so this button zero has a weight of one.
This button has a weight of one.
So the SEAL R. And this other button has a weight of one, and they'll actually get to the point where
we will understand how weights work.
So because they all have a weight of one, they are equally white.
So what could you do if you wanted to for one of them to be twice as wide as the other ones, while
you could just add the weight of two?
So let's do that for our buttons.
Zero?
And that's it.
So now Button Zero will be twice as wide as you are and the plus button, which now makes this look
a lot smoother.
And yeah, that pretty much makes our UI look pretty clean at say.
And finally, we will just need another line here, which will be the equal button, so let me just
copy this linear layout once again.
Let me put that in there and get rid of all of the unnecessary buttons and after I have added the equal
button, which will have this string on or off an equal sign here.
Let's extract that into a separate resource here equal.
And now we can get rid of all the other buttons that are not going to be necessary in there.
So that's pretty much it.
That's our UI.
Now, in our test application, you could see that the buttons were gray.
So how could we change that?
Well, let's go ahead and go over to our themes because that's where the color is defined and you can
see that this colored we have here looks pretty much like, I believe, this one color primary.
So if we, instead of using purple here, were to use this grayish color, then our entire application
would look different.
So let's go ahead and create a new color and call this one color.
Name, let's just call it Grey.
This value here.
So hashtag nine zero eight four A.
And while this might not be exactly the same grain that we had in the other example, but it is a good
gray, I'd say.
So you can really decide which grey you want to use.
Let's look at it, and this is going to be the great if I'm going to use here.
OK, so that is basically our user interface here.
Now we could also use this great color for our applications theme here, and that is this primary color
variant.
We could also just use gray here, because then if you run it again, you will see that this bar at
the top there also now has this same color.
So before that, there was this purple color, but that's basically what the variant is used for in
our particular theme here.
OK.
So that's it for this video and the next one, we are going to look at how to actually.
Just on click properly, and we're going to implement the R functionality.
So see you there.