Welcome back, I hope you try to exercise and you built the app.
So what we're going to do is we're going to create a new project, which is an empty activity or which
contains some empty activity as its starting point.
It's going to be my calculator.
So calcu late term and.
You can, of course, change the location and everything else can stay as it is, and then we finish.
Once we're in here, we can go to our activity main, where for now we only have our text view, but
of course we have to wait until the project is loaded because here it shows a bunch of errors until
the project is fully loaded.
All right, so there we are.
We have a you in here and we are not going to use this text to you, so I'm going to get rid of it altogether.
All right.
So let's replace this with a linear layout, because I want everything to be inside of a linear layout
and then.
This whole page should be vertically oriented, so I'm going to add the orientation.
Vertical.
Now, inside of this linear layout, I want to have a text you.
Which is going to be my text at the top.
All right, so the width should be.
Match parent.
So it should take the whole width and to height should be something like 250 density pixels, so I'm
just going to do it like that.
All right, then I'm going to close this text to you and let's look at what we need here.
So this is a text.
So having a text size is a good idea and having a background color and those kind of things will also
be a good idea.
So let's do that background.
And I'm going to use e f f f.
Of course, you could export this to a different file, to the color file or values file here of colors
that XML.
I'm just going to keep it in here.
Then I want to have a text size and I'm going to use 48 Aspey here.
Then I said earlier that I will have a mix length so only 12 digits can be entered there, and then
we also can add an idea and it's always good to add the idea to top.
So I'm going to add an ID called TV input, because this TextView will be important later on so that
we can access it and display the numbers in there.
All right.
So that's the idea behind this TextView.
We might later on style it a little more, but for now, I think this is a good enough text you and
then underneath I want to have all of the different roles.
So let's do that.
Let's create a linear layout.
And in there we are going to use the width of each parent and the height of content.
So should only take as much space as it really requires.
And then.
This linear layout should not be directly closed because I want to add a lot of stuff in there, so
I want to add all of those four buttons inside of this linear layout.
But before we do so, let's actually add a little more properties here.
So, for example, I want to have a margin towards the top of, let's say, two density pixels.
So just a little distance between this linear layout and the text that we have here.
Then I will use the layout weight of one.
I told you that we are going to use this, as you can see now, it's taking the whole available space
here, even though I said wrap content, but delay, I'll wait to a certain degree rights there.
All right.
So what I also want to do is I want to make this linear layout oriented horizontally.
So let's add orientation horizontal.
What that will do is it will put the buttons next to each other.
So the buttons that we will add here at the bottom.
So I want to add a button, so let's add this button here, and it needs a lay up with, as you can
see, and I'm just going to say that the width should be zero density pixels.
Well, that's going to be weird.
Why zero density pixels?
Well, we are going to see what actually happens, even though we give it a width of zero density pixels
because this only works for the button if it has a layout weight assigned to it.
So let's assign a layer weight of one to it.
And suddenly this error with the layer with this appears even though we just gave it the width of one.
So let's close this as well.
This button you can see now, it takes the whole available space because there is only one button in
there.
But now if I.
Add another button, so let me add another button just to show you real quick.
And this one also has a width of zero density pixels and a height of match parent.
And then I add another layer way to it, but say a weight of one again, then you could see the error
disappears and those buttons are equally wide.
So they're exactly the same with they have no text, no entries, nothing like that.
All right.
So you can already see where this is going, because if we add another button, let me just copy and
paste this one.
You could see all three buttons are equally wide as well.
And they take just enough space, which is perfect, because that's exactly what we need, right.
So before I do all of this copy and pasting, I would like to finish one.
But first, I wanted to show you this wait before we go any further, but I need to add a little more
detail to this button.
For example, how about a little text?
Because without text, we cannot see anything on it.
So let's say I start with a seven.
Then I will add an I.D. to this putten.
Because each button needs to have an ID and this one will have an I.D. of seven.
And then what I also want to have for every single button is an unclick event, so there's this unclick
property that we can assign and here I can enter a method or function name not complaining because on
Dugit does not exist.
So let's really quickly implement an on digit function here, which will at least do something for now.
Nothing too fancy.
But let's just add a little function.
Fun on digit.
View, Kolon view, so whenever we use a button, it has to have this functionality where it gets past
a view and then what we can do is for now, just right, a toast.
So toast that make text.
And here it's just going to have the context of this.
So this page is the context.
The text should be button works and then we need to have that length.
So toast length short.
That show.
All right, so this is going to be our button, let's just see what happens if we click on it.
And see if the button works, so this is another approach of implementing a button to your app.
All right, so there we are.
We have the seven, we click on it.
And as you can see, Button works perfect.
So now we have one button and of course, we want to have a bunch more buttons in here.
So let's implement those.
So on digit is still complaining, even though it's there.
And in my case, clicking on it and adding or trying to add an action got rid of the error because it
doesn't make sense.
Sometimes the tool just needs a little while.
All right.
So now I'm going to paste a bunch more buttons.
So now I have four buttons, button one, or in this case, button seven.
Then the next one will be button eight.
Then we have about nine.
And the final one was button divide.
All right, of course, they also have different texts, so seven should be replaced with a slash here
for the bottom line, it should be the value of nine.
And here it should be the value of eight.
The cool thing is now what we can do is we can simply reduce the size of the linear layout and mark
everything, then below it, we paste it in there and we paste it in there again.
So now, as you can see, we have four linear layouts on top of each other and already looks rather
good.
So.
Let's change a bunch of things in here.
So this is the second row.
So if we want to add a comment here, we have to do it like this, so this is the way to comment in
XML.
So I'm going to say road to.
This is going to be.
Row one.
Then let's reduce this, this is a roll three and finally roll for.
All right, now it's a little more understandable what's going on, so this is going to be seven kids
complaining because in Rwanda we have the same names as enrolled to of course, we need to change those.
So instead of putting seven here, we should have something like four.
So button for.
Then the tax should be replaced with a four.
Button five.
They should be replaced with a five.
But six.
And of course, the text should be replaced with these six and then here should be button.
Multiply, so I'm going to multiply here more to fly.
And of course, tax should also change to a multiply sign.
Then the next row, row three, that's the next one, which created some issues, so here, button one
with the text of one.
Then bottom two with a text of two.
And button three with the text of three, and now we finally have this button divide, which then should
be either addition or subtraction.
So here I'm just going to use the correct.
And here, the test should be ionis and later on we will need to change the unclick event because it's
not a digit right.
So neither of those buttons here on the right hand side is a Daejeon.
So that's something that we will need to look into.
All right, now, the final row, at least the final row of those four, because we need the fifth row
with the equal sign.
But now for this row, we have.
Button decimal.
Which is just going to be a dot.
Then, uh, button zero.
Just going to be a zero.
But unclear, which is going to clear our whole application, see alarm, it's going to go right, of
course, this one also will have another unclick event as our own hit is.
This thought will also have another unclick event.
So that's something that we will have to look into then.
But divide instead is going to be button at.
Which is going to have the text of a plus.
All right, so this is our general layout and now at the bottom of it or underneath it, we need another
layout, another linear layout.
And I'm just going to copy the general structure of this linear layout.
Here and not the whole button thingy, so this linear layout.
We'll have just one button.
With a whiff of.
Match parents and a height of match parent.
So this one doesn't need a weight because it just takes the whole weight possible or the whole available
space here pretty much.
And, of course, also needs to be close at one point and then we need to add a text to it.
So I'm just going to use the equal sign for now and we need to give it an ID.
And I'm going to use Button Equal as the idea here.
And something that I realized is that my linear layout with the button and stuff is inside of this other
linear layout, so I need to drag it out.
And now you can see it's not cramped anymore as it was before.
So let me.
Close them down a little bit so you can see a little better.
So now we have.
A bunch of linear layouts here.
Which are inside of linear layouts.
All right, so we have row one, row two or three and so forth, and then the row five is just our equal
sine.
If we now test this application on our device, we will see that it should look good.
And there we are.
So this is our app, as you can see, it works totally fine.
It's looking good.
We have all of the buttons here, equal distance to each other.
We can click on them and it says Button works.
And of course, we haven't implemented the buttons correctly yet, but that's something that we will
do in the next few videos.
So this is the general layout for now.
I hope you manage to do that, at least to a certain degree.
And if not, no worries, because now we're going to because now you see how it's done.
Right.
And we can and we can go ahead and implement the functionality.
So go over to our code and the main activity.