Come back in this video, we are going to create the user interface for our application.
So let's go ahead and start with that.
Therefore, I'm going to create an empty activity and I hope you try to build that user interface all
by yourself.
Of course, it wasn't easy, but maybe you made it.
And if you did, then congratulations.
Otherwise, otherwise, no worries.
We're going to build it in this video.
So I'm going to call this one Mike my you calculator later, and I will use the package name you tutorials.
And then here, safe location.
You could change that Scotland and minimum SDK API 21.
So then let's go ahead and build that.
So once the Gradle is ready and we can start with the activity Mate X amount where all the action is
going to happen, we can go ahead and get started.
So the first thing that I want to change is that I don't want to use a constraint layout, but instead
a linear layout.
OK, so we're going to use a linear layout, even though the constraint out is what Google prefers in
the sense they are really motivating developers to use it.
But in some cases, the linear layout is just super helpful.
And the goal of this video is, on one hand, for you to build this layout that we want to achieve.
That is at this one here, maybe even with different colors, but that doesn't matter too much.
And on the other hand, I need to teach you weights.
So how the weighting works in depth?
We have used weights before, but we're also going to use nested weights unless it weights or something
where the idea is or our Android Studio is even going to tell us that it's going to be performance consuming
and we're going to check that out and I'm going to really go into depth what that means and why we can
still use it.
And a little bit also about the opinion nation of programming because everyone has an opinion on how
to develop something.
And in the end, if it works and if it's performance enough for what you want to do, then it's good,
right?
And it really depends, of course, on the size of the project because if it's a bigger project, you
will need to follow certain schemas and structures and patterns that will make it easier for you to
work on this with a team and not just on your own.
But as this is just a calculator app and it's super simple, we can really keep it simple here.
And inside of this linear layout, we will need a text you.
OK?
We just had that, but let's just created from scratch.
So the width should match its parents and the height is something that I'm going to define manually.
So I'm just going to say it should be 250 density pixels.
OK, so this will be the text view.
Currently, you can just see it here, how large it's going to be.
It could see better on the right hand screen, which is why the designer has to where you can really
see the different items in more depth, even if they have the same color, right?
So here you can see that there is something at the top which is not there at the bottom.
OK, so that's our thanks to you, and I want to text you to have a greater color.
So you concede has not the white background, but it has a gray background.
And in order to achieve that, I'm just going to give this a background of.
Here, EAFE, FGF, and this is just going to be this grayish color, if you look at this designer now,
you can now see that there is a difference between this white and this light grey color.
So it's a super light gray and you can, of course, go ahead and create a new color inside of your
colors.
Example here you could go ahead and say color name light gray, for example.
Like this or light underscore gray.
However, you want to call it and then use the values that I just said if, OK, so this would be the
light gray.
And then of course, you can go ahead and use this color here.
So at colors, and then you could also just use light gray, and the idea will be smart enough to tell
you what that is.
OK, so that would be the other way of doing it.
Now I'm going to set out a little bit of padding for it as well so that the text that is inside of it
has a little distance to the border.
Let's use a big text size here and see how that's going to look like.
So here I'm going to use 48 for the text size and as the text property, I'm just going to enter a value
here just to see how this is going to look like.
And you can see there is a bit of padding here towards the top and the left hand side, which makes
sure that the text is really, well, distance to the borders.
All right.
Now I would like to make sure that the text is going to be not at the top left side, but at the bottom
right side.
And therefore, I'm going to use gravity.
OK, so here inside of the text view itself, I want the text to appear at the bottom right.
So you can just go with the right and then.
Pipe and bottom.
So what that will achieve is it gives us this right here.
So by the way, if you just do one of them so right, for example, we just put it on the right hand
side.
And then if you add the pipe and bottom, now you have two settings at once and it will put it on the
bottom right hand side.
Now, right, is replaceable with and then you also get rid of this warning because right, it does
work.
But at the same time, the idea says use end instead of right.
All right, then let's just do it.
OK, so right is more, I'd say, humanly readable.
But end is fine as in terms of what it wants from us.
And then you can also see that the text is also highlighted, and that is because you should not hard
code here.
At least that's what they're recommending.
You should put strings into a separate file, which is the strings XML.
So here you could go ahead and create a string, for example, called text.
For example, here and the actual content of the text would be this number.
OK, so just a number from one to nine and then zero.
So we could now, of course, use that here instead.
So here we called it called text, so you could just enter it here and you see you get rid of the warning.
So this is how you do it properly.
But I'm going to sometimes just hardcoded because it's just easier to get the results.
And now you know how to do it correctly.
But we're going to not do it this way all the time because it just eats up a lot of your time watching
this video and it would bore you to death.
Probably if I would go ahead and create these strings manually each time that I just want to hardcoded.
And if we use a bunch of strings, then we're just going to paste them in here real quick.
The five or 10 strings or whatever that we're going to use and then we're going to be good.
OK, and now let's go ahead and display the actual buttons.
OK, so what I want to have are, of course, these buttons here next to each other.
So how do I achieve that?
Well, first of all, we are in a linear layout already, and the cool thing is we can create another
linear layout here.
So I can just say that the new linear layout should match parents and its contents in terms of width
and height, so much in terms of width and rap content in terms of height.
What that just means that it will just be as high as it needs to be, and it will be as wide as there
is space for it in its parent and the parent is the parent linear layout, which takes the entire with.
So now if you have multiple linear layouts, you need to define which direction they will go.
So the orientation?
So here I'm going to say the orientation is going to be vertical, which will now make sure that items
will be on top of each other.
And this linear layout here needs to be horizontal.
So here the orientation will be horizontal, which means the items inside of this linear layout are
going to be next to each other.
All right.
So let's add a button in here, and I'm just going to create a button with an I.D. and the width.
So the width will be zero density pixels, and that doesn't mean that it will not have any width, but
we are going to see how that works in a minute.
And then the height will match its parents, so it will take the height that is available for that linear
layout parent, which is pretty cool because it wraps its content.
So we don't have to bother about that.
And then what I'm going to use here is going to be the layout.
Wait, so here, layout underscore.
Wait.
Which I'm going to said to one.
And by doing so now, my button will currently take the entire available with.
So that's the layout.
Wait, what it does.
And because the button doesn't have any text, it's just going to, well, not be very tall.
But this is to define the predefined height of a button, which is said much parent and the parent doesn't
even have a height.
It's just as it should for web content.
So what is it then?
Well, the content of the button, the height of the buttons pretty font, this being as minimum, this
height by default.
So now if we added text in here, let's say this button will be the seven.
Now you can see it is pretty much the same size.
We could change the text size of the button and so forth.
But let's keep it like this for now.
Now, every button, it's an idea.
So I'm going to add an ID here.
This one will be button seven.
OK?
Because while it is a button button and it has the number seven on it.
So now we can just go ahead and duplicate this button.
And now you will see that all the buttons have the same with.
So all of them are taking a third of the available space because all of them have a weight of one and
one out of the total weight of three is going to be a third.
So it just takes a third of the available space.
So here this one will be button eight.
And this one will be button nine.
Like so.
Of course, accordingly, I want to change the text that will be displayed in them.
Now you see that on one hand, it's already looking different to what we have here.
Here we had, first of all, it's a lot higher.
At the same time, it's a lot grayer.
So the color is gray.
So we're going to see how the change, the color and a bit as well.
And we also need this a divide button.
So this one here and I'm going to call this one button divide.
So the white like, so OK, so now.
If we look at it here, we have our beautiful little buttons, but they are super close together.
And here they had at least a little bit of distance.
Well, the thing is, this was initially developed in an older Android Studio version, where by default,
the buttons would have a little bit of margin surrounding them.
So now let's just go ahead and add a margin towards all directions or just to density pixels for each
of the items.
OK, so let me copy this and each of the buttons to be more precise.
And let me just put it inside of here.
The order doesn't really matter too much, but it's good if you keep the order the same.
So now you can see that the buttons have at least a little bit of distance to each other and they are
not glued to each other, which is really useful.
OK, so now that we have a bunch of buttons, I would like to implement a functionality for the buttons.
So once we click on them, I want to do something.
So let me add the on click property you can see here.
It's crossed out and I will tell you why it's still fine to use it and why it's not fine to use it.
OK, so it's still fine in terms of it's still going to work, but it's not fine in terms of they are
not very happy with using the on click method because it makes your code very difficult to maintain.
But because we are working with an application that is super simple and we know exactly what we're doing
and we have full control over it, we can do it.
But as it is, if somebody else were then to look at your code, it would be a lot more difficult for
them to understand what's up because this is not common practice anymore to use the on click method.
But now imagine we have these 13 buttons and imagine we had to define and click listener for every single
one of those buttons that would go to far right.
But that's what we would have to do, and we would have to do that in our main activity, and this would
make the main activity super large.
But still, let's go ahead and just set it up this method that I want to run once we click on the button.
So therefore, I'm going to create a little method called fun on digit, and it will require a view.
So basically, what clicked on it, the view will be the button itself that clicked on it.
We need to import the Android View View Library.
And then for now, we can just go ahead and display a little text saying button clicked more button
clicked works.
Therefore, I'm going to use a toast that make text and hear the context will be this and button clicked
and the link will be long.
So the post dot length long as well as we need to show this thing.
So now let's use this on digit method or function that we created and put it in here.
So once we click on the seven, it will execute our own digit.
Let's run this real quick.
OK, so there we are.
Let's click on the seven and you see button clicked, worked, so I'm going to use this on digit because
it will make our coding a lot, lot smoother and simpler.
But if you aren't working with a bigger project, you should not use on click OK.
You should use the click listener, as we have seen in other videos, because that's what Android Studio
has decided to not be happy about anymore since Android 12.
Before that was fine, but with the latest Android Studio version, it just says that we should use
instead the click listeners or data binding, and we're going to do both of those things in later projects.
But for this project, it really helps us to use on digital because then the only thing we will need
to do is we will need to have two methods to take care of what should happen once we click on a button
instead of having 13 on click listeners.
OK, so that's just a different way of simplifying our code.
OK, so now let's use this on click and add that to our buttons, so all of our buttons should now have
this on digit method assigned to them.
So you see that here we are defining which method should be called once we click on this button.
So here seven works, eight works, and let's wait until it's gone.
OK, now eight worked until you see length long as like two seconds or so.
So this one worked as well.
And then it's click on the last one and you see that works as well.
So all four buttons now execute this on digit method each time that we click on it.
And that, as I said, is fine, even though Android Studio complaints here.
And by the way, it could very well be that in a future Android Studio version, Android Studio just
decides to not even offer this on click property at all anymore.
OK, so this has been around since the beginning of Android, and I'm teaching you some little tricks
here that you can use.
And by the way, in order to get rid of this warning, you can just click on Suppress ad tools, ignore
using on Click Example Attribute.
And if you click on that, you will see that it will then ignore it for this particular line.
You have to, however, do it for every single one of them if you want to get rid of those warnings.
The same would go for those text here because it's not happy for you to be putting the string directly
there, but you can extract the string directly as well, so the resource name would be on the score.
Seven.
The resource value would be seven.
So if you click Yeah or OK, it will create this new string entry here, which is going to be on the
score seven, which would just be the value of seven.
And you can now do that for every single one of them.
And then it will stop complaining and you will not have any warnings anymore in your user layout.
And here for the Dash, well, there doesn't work.
So the resource name has to then be something like divide.
And I believe it's a divide like so.
OK, so that's it for this video and the next one, we're going to finish this user interface because
otherwise TV would be too long.
What was important for me is to talk about the different opportunities and ways of doing something.
So you cannot always just do it with one way.
There are multiple different solutions on how to get things done.
So see you in the next video.