Welcome back.
And this video, we're going to implement this little radio button here at the top and you can see that
it's very customized.
So we have a custom radio button.
We have in general a very customized appearance here.
And also the color of the text changes based on which one of the two options is active.
And we're going to check out how to build all of this.
I'm going to just go through the code that I used for it so that you can use it for your own projects
in the future as well.
The general idea is that you wanted to create some X some L code where basically using a radio group
here with two radio buttons.
OK, so this really depends on what you want to have.
You can only have one radio button active within a radio group.
So in this case, only one of the two buttons can be active, and the idea is that we can then swap
the layout that is displayed underneath it here.
And the metric units want to have the kg's and then the U.S. units want to have, I think, pounds it
is.
So we're going to see how to implement that later on.
But for now, we're going to focus on this radio group here with the radio buttons here.
So let's check out those radio buttons and troubles that we're going to use.
So we have this droll units tab selector and this is just a selector which has one item in it that has
a rectangular shape with a solid background.
That is our green color and a corner radius of 30 density pixels.
Because if you look at it, this is a quite a rounded corner radius that we have here.
OK, so that's the one draw that we're going to need.
Then the Units tab color selector.
So here I have a selector as well, and you can see that we're using two different items.
OK?
One item for the state checked being true, which makes it white and the other one which makes it gray.
So you see this color here.
So we're going to use this selector for our text here.
You can see that the text of the radio buttons is changing, depending on whether the radio button is
checked true.
So the state is checked or not checked.
OK, so this is what we're going to use for those.
And then we have this radio group tab backgrounds, which is a rectangular shape.
We have this solid color, which is a rather white color with a little bit of gray.
We have this gray stroke with a width of zero point five.
You see this stroke around it, which is this line around our radio group here.
And then the corners are having a radius of 30 dpi, which just creates this situation right here,
you see.
So.
It's round it, that's what we get with that.
OK.
And now we can use it in our example, in our layout email to be precise, the one activity BMI.
And here what I'm doing is I'm using a radio group.
OK, so this radio group has inside of a two radio buttons.
So let's look at the radio group first.
First of all, this radio group is going to have an ID RG units.
It matches the parent in terms of with and reps content in terms of height.
It's underneath our toolbar, BMI Active, which is this toolbar here.
Then we have a margin of 10 density pixels, a background of particularly this dribble that we just
created.
So just draw the Radio Group tab background.
So we're just saying how this radio group should look like.
What the background here.
And it's oriented horizontally because you see there next to each other, not on top of each other.
So you can have radio buttons that are on top of each other.
But in our case, our radio group is going to have them horizontally.
So now let's look at the individual radio buttons.
I'm going to give the radio button and RB metric units are be standing for radio button then.
Layered with zero density pixels, a height of 35, a weight of 0.5, which will make sure that it's
taking half of the available space for two radial groups, so it has half of the weight and this one
also has House of half of the weight.
So you could have also given them both a weight of one.
It would have worked the same way as long as both of them have the same weight.
So both radio buttons, they will have the same with and same size, so to speak.
Then for the background, I'm using this draw that would create it, which is containing this selector
with one item that has a rectangular shape, a corner and is green.
So you see, it's this background shape that we're defining for it.
The button itself is said to know with something that one has true gravitating.
It's towards the centre saying that the text of this button should be metric units, which you can see
here.
And the text colour is using this colour here, which now you can see.
We don't even have to do any state management directly in calling code.
We are doing it in XOM L specifically.
So we're saying here that we want this colour.
So the text colour here for our radio button to be based on its state.
So is it true?
Is it checked?
Then use white colour?
Is it unchecked, then use great colour.
So that's really powerful.
You see, we don't have to create an all click listener in Scotland for this to work, OK?
Of course, we will need to also make sure that the right linear layout and so forth underneath is visible.
But other than that, it's fine.
So by the way, we should change this to be underneath the radio group units.
So there's text input layout should be underneath the radio group IAG units.
Otherwise, the design will be a little mixed up and if it's underneath, it will be fine.
So now the second radio button is basically the same thing as the first one, with the only difference
being US units as the text is being set.
So the text size is 16 and the style is bold and both of the examples here.
OK, now.
We can run this code and we will see that this already does the same functionality here without having
written any code in Scotland, which is pretty cool.
OK, so let's go over to the BMI calculator we see we now have.
This option here, and it works as intended.
OK, so that's it for this video.
See you in the next one where we're going to add the U.S. view elements.