Welcome back in this video, we are going to build the BMI calculator and you can see that's what we
want to get as a result, we have the calculator button and then here you will see the result.
So I'm currently at 72 kilos, 169 in height, and then I can calculate it and you can see I'm overweight
by just a little.
So let's say I lose one kilo, then I'm going to be normal.
All right.
So it really depends on when I weigh myself.
And there you see whether I'm in good shape or not, I can try it for yourself.
You will even get a little bit of a motivational sentence or just basically a sentence.
Oops, you really need to take care of yourself.
Work workout?
Maybe.
All right.
So thank you very much for this advice.
Even the workout is not going to be the key.
The key is nutrition, so eating better helps.
And now have let's go over them and built this.
So you see what you need.
You need an added text.
Another added text.
You need a bunch of text views and then just calculate button underneath it.
So yeah, I would recommend you try to build this yourself.
There's really nothing too fancy of maybe one or two things that will be tough along the way, but I
would recommend that you try to build as much as possible yourself at this point and then check out
how I do it.
I'm going to go over the individual points a little bit, even though the UI will be something that
I'm going to mainly copy over, even though we are using all relative layouts.
So I believe it makes sense to look into it a little bit.
So in the last video, I added this orientation in the relative layout that doesn't make any sense.
So let's delete that real quickly because in the relative layout, that doesn't have any effect.
OK, so let's not use it then.
I'm going to have a text input layout with an added text, and how that works is you use a text input
layout like so you can give it the width and height and stuff.
So I'm going to match the parent in terms of width and wrap the content in terms of height.
Then I'm going to give it an idea so that I can access it and I'm going to call this one tile text input
layout metric unit weight.
OK, so if you don't use the metric system, you already can assume that there will be a different system
altogether.
I'm going to add a layout margin of 10 density pixels.
I'm going to use the box stroke color of green, which is our color accent.
So if you look at it, this box has a stroke color, which is this box stroke color property.
And the hint text color will also be this color primary.
OK.
Or actually it was accent, right?
Color accent.
So here, if you look at it, the hint here is this hint text color here at the top.
OK, so that's the green color that I'm using.
And as a style, there are multiple different styles that you can use.
I'm going to use text input layout outline box this one here widget material components text input layout.
Outline Box.
OK.
And actually, this is going to be like this and inside of it, we can then have an app compared added
to text here added text, but have compared to competition, which will work very well on older devices
as well.
So I'm going to match parents and rap content here again for width and height.
I'm going to give this an idea as well.
So let's call this one metric unit weight.
And then as a hint, I'm going to write something like, wait.
In CG kg.
And the input type, so here this is something where you can define what kind of input the user can
give.
And I'm going to make sure that it will only be decimal values or not.
No, that is decimal.
And text size.
Let's use 16 p here.
OK, so this will be my.
Edit text, and now I just need another one.
And let me just copy it from my project.
It will basically be the same thing.
Like so OK, so it will also be a text input layout, and it's going to be called text input layer metric
unit, right?
OK.
And it's going to be below the text input layout metric unit weight.
OK, so that's what the relative layout does.
You can just use the layout below now to upload this ID here, so you can already see that this is what
we get.
We get this top piece, this bottom piece.
And that's exactly what I wanted.
So you can check out the values.
I'm using a margin of 10 density pixels.
Actually, I can get rid of this here.
Then I have a height of rep content width of my parents using the color accents as we did before outlined
again.
And the text to show says height in centimeters.
The type is also no decimal, and it's called eight metric unit height.
I know, and then if we had those text views, OK, so I'm going to use a linear layout to put those
text use just next to each other underneath each other with a predefined setting that I'm going to give
this linear layout.
So let's look over it.
I have this linear layout with a little bit of padding then.
I'm going to say it's underneath the metric unit height.
It has an ID level display beam result would be my result with of my apparent height of rap content
margin towards the top so that it has enough distance.
You see here, maybe twenty five is actually too much.
Sixteen is probably going to be better.
Orientation is going to be vertical, so items are underneath each other.
It's going to be invisible by default.
In the tools, however, it will be visible.
OK, so we want to make sure that we only make it visible.
Once the user has clicked on calculate, then we have the text views that are inside of this linear
layout.
So TV, your BMI, which just shows to your BMI, everything is in caps.
You see here text all caps is said to trousseau.
All letters in.
There are going to be high caps and then text size is 16.
We have another text to you, which is the one that says the actual BMI value.
So by default, in the tools, we're going to set that to 15, even though we don't have it as an actual
text for the application.
I have a little bit of margin towards top for each of the text you so that they are not too close to
each other.
Then we have the overweight text.
Which is this one here, TV bear my type.
And then we have the BMI description, so TBE BMI description, which will show the description of what's
up here, so they're not bold.
Only this one here is going to be bold as textile.
OK, and then we, of course, need to have our button at the very bottom.
OK, so we're going to say this one.
This button will be underneath our linear layout display my results.
So layout below.
It has it the idea of button calculate units.
Then we have our width and height and content layer of gravity towards the bottom.
So you see it's gravitating towards the bottom.
The margin towards top is 35 deep, so quite a distance, that's something you can play around with,
of course.
Texas calculate text color is white, the background color is this green color, our accent color and
the text size is 18 has p.
And again, these are all values you can play around with.
OK, so that is our exit, Mel file.
Now let's go over to the BMI activity where the actual magic is going to happen, and here we have to
do a lot of things.
So first of all, let's start with creating a method that will validate our metric units, so we'll
check whether we have entered something or not.
OK, so here private fun.
Validate metric units and not metric with an A, but with an E.
Metric units will return a Boolean, so it will return either.
It was valid for entry that the user has given, so he has entered something.
So for example, if I enter nothing, please enter.
Valid values will be displayed.
That's what I want to achieve and therefore I'm going to create this his valid variable, which will
be set to true by default.
And then I'm going to get the values from our view binding.
So binding that 80 metric unit white dot text.
And this is a Nullarbor.
So he had a question mark, got text to string is empty.
So.
Is it empty?
If that's the case, then that is valid too false?
OK, because if the user didn't enter anything in there, then I want to say that is valid is false.
Else if.
The same thing here, but for our.
Other property names, so here is that E.T. metric unit height takes to string is empty and then also
is valid is going to be false and then return is valid.
So this is just a way for us to check whether the user has entered something or not.
And we want to do that each time we click on the button, we want to check if the user has done it correctly.
So now let's take care of the calculations and we could create an entire function for that.
But we can also put it just in the create method that will be fine either way.
So here, finding the right button, calculate units.
So we have this button and it's this big green button here and now we have to think what should happen
once we click on this button.
So on one hand, it should take the weight and height and then do a calculation.
It should, of course, check whether they are empty or not, which is why we have this method that
checks for valid entries.
And then based on that, we calculate the BMI and based on the value that we get there, we're going
to fill these text fields here.
OK.
So let's implement all of that.
All right.
So let's add an anklet listener here.
So this is another bill as well.
One click listener.
And we only will do anything if validate metric units will return true.
Otherwise, we don't do anything inside of this method, pretty much so.
I will check the height value, which will be a float, so we get the value from the user and that will
be of type.
Float.
And then I'm going to get that from, well, you guessed it, hopefully a metric unit height.
Okay, so I'm you getting the height value first here.
So let's get the text to a string to a float.
And divide that by 100.
OK, because we are entering the value in kilograms and then we are going to divide it by 100.
Then let's do the same thing with our height, so we can just copy this and or actually wait, sorry.
We're going to do that with the weight.
No weight value et.
Matrix unit weight.
And we're going to divide the weight, not by 100, so.
Why do we divide by 100 with our height, because we are entering in centimeters?
And we want to get it in meters, so dividing centimeters by 100 is going to give you the meters.
All right, that's what we do here.
And then we can calculate the BMI because the BMI is actually a super simple calculation.
Though, if you search for the formula, you will find that it is weight divided by height in meters
squared.
OK, so weight divided by height, divided by height times 10000.
That's the alternative way.
And when you're working with centimeters, right?
But we're just going to use the meters version, which is why we are dividing by 100 here.
So let's implement that.
Get the weights value and divide it by the Heidfeld value times.
The height volume, which will be height value.
And quite I think I've written it incorrectly, I'm missing the age here, like so OK, so high value
times, high value will give us the BMI.
So this is the calculation for it.
And then what I want to do is I want to display those results.
And this is if the metrics were valid, if they were not valid.
So if we didn't enter anything, then I want to display a toast message.
OK, so I'm just going to use this toast match message, which will say, please enter a valid values.
OK, just toast will be displayed for a short period of time.
And that's pretty much it.
So now here, that's where we want to display the BMI results.
OK, now let's create the function, which will prepare everything for that.
OK.
So I'm going to call this one.
Private fun.
Display BMI results with BMI.
Being a float value that has to be passed as a parameter because, well, I need to use this BMI, which
I just calculate it to then display something onto the screen and I'm going to do it this way.
So of course, you can go ahead and already prepare everything that you want to display.
And we can use binding here to.
Displayed the El Al display BMI result, because currently it's invisible, so we're going to set that
to visible, so you're not visible.
And why is it invisible?
Well, if you look at it, we said it's here to invisible.
And now we're making it visible.
And then we need to set the values accordingly.
We get the BMI value and so forth here, and we then do the calculation and based on the value that
we get there, we are going to write the text.
So let's prepare all of this.
What I'm going to do it like is I'm going to create this BMI label variable, which will be of type
string.
And then I'm going to have a BMI description also of type string.
And I'm going to assign a value to it based on the BMI value.
So the cool thing is I can just use the compare to method.
So there's this compared to method, which allows me to.
Get a value compared to and here I'm going to compare my BMI to 15, so if my BMI is less or equal 15,
then I'm going to say, all right.
Very severely underweight.
And the description will be, oops, you really need to take better care of yourself, eat more.
OK, so that's the case if the BMI is going to be under 15.
So BMI compare if you look at it, so compares this well, you with the specified value for order return
zero.
If this value is equal to the specified other value, a negative number if it's less and the positive
number if it's greater, then.
So if it's zero or less than we know, the BMI is actually going to be less than 15.
OK, and if it's going to be a higher number, then it's going to be bigger.
OK, now of course, you could have just used direct comparison not using this compared to method,
but this is just one way of doing it, OK?
And now we need to do the same thing where we compare it with all the different types of values.
So I'm going to compare it with between is it between 15 and 16?
If that's the case, then we're severely underweight, not very severely on the weight, but severely
underweight.
And then if it's between 16 and eighteen point five, then it's just underweight.
If it's between eighteen point five and twenty five, that's what they call the normal state.
OK, so this is the normal BMI, so it's over eighteen point five, but it's less than 25.
So we have this double and comparison here, and that is going to be what we are checking.
OK.
So this is our next else.
If normal, congratulations, you're in good shape.
Even though that's not necessarily the case, the BMI is not really a good indicator of whether you
are in good shape or not.
OK, and then I'm just going to add the other options in here, OK?
So let's look over them.
If you're between 25 and 30, then you're overweight.
If you're between 30 and 35, then you're obese, class one, moderately obese.
And then if you're between 35 and 40, you're obese class to severely obese and anything higher than
that.
So over 40 is going to be very severely obese.
So there's something wrong with your psyche, probably, and you're eating too much, if that's the
case.
So now what we're doing is we are making our linear layout that we should display this information visible.
But then we also need to make sure that we assign the values to the right properties.
So here or to our right elements that we have.
So we have the BMI description, type and value.
OK, so let's use the value first, which will be just a text that we get from our BMI value and let
me actually calculate this BMI value.
So how do we calculate it as a string?
Because we need to get the BMI value, which is a float that we pass here?
This one, we need to get it into the right format, and in order to do that, we create a new calculation.
Here we can use this big decimal calculation, this method where we get the BMI, we convert it into
a double and then we set the scale to have two values.
So as separator, we look at it and two values pass the comma.
So we're basically cutting anything off past decimal point.
And it's not a comma, it's the dot in English, but in Germany, it's a comma.
And then we can say what kind of rounding mode we want to do, and I'm going to use half even.
OK, and then we convert that into a string.
OK, so quite long calculation, but basically what we're doing is we're taking this float and then
we're breaking it down into a value that will not display anything like twenty five point to one one
one one one three three or whatever, but it will be just cutting it off.
All right.
And now we can use this BMI value to assign it as the BMI value text view.
So this one here?
OK.
And now we just need to set this one and that one.
So let's do that binding.
TV.
And we had the.
Type here.
So let's set the text for the type to be the BMI label.
So this one here, obese class and so forth.
And then finally.
Just need to set the description as well, which is a Nullarbor, so we at the question mark and this
will be the EMI description.
OK, so that's pretty much what our display BMI value method should do.
And here we just need to call this method once we click on the button.
OK, and here we need to pass the BMI, and that should pretty much do the trick.
So let's see.
If this is going to work for our application as well.
So that we are let's click on BMI and there's still something wrong with my positioning there.
But let's just test if it works technically.
So here's 70 to hide, 169 again, calculate and we see it all seems to be fine.
OK, so now it just seems to my.
Texts should be underneath the activity.
I my toolbar should be on top of the other item here, so.
So actually, I want my toolbar to be on top off.
So this means that this one should be below.
So below.
Lay out below and it should be the toolbar.
BMI calculation, so let me see if that fixes the problem and if that's the case, then we're done for
this video and not the exercise, but the BMI calculator.
Yeah, we're good to go.
So that's pretty much it.
Now you could, of course, also use the button and put it just here, somewhere directly underneath
the edit text or even at the bottom of the screen.
So it's really up to you how you want to position all of your user interface items.
So that's it for this video.
See you in the next one.