Welcome back.
And this video, we are going to add this functionality right here, so just as radio group with two
radio buttons and I'm going to use a slightly different approach and show you how to build this.
So I have prepared the code and I'm just going to go through it and I'm going to tell you what every
single aspect is doing.
OK, so what we want is to have this radio group here at the top with two radio buttons.
All right.
How do we get there?
Well, we need to create a radio group in XML and two radio buttons which are inside of this radio group,
because if they are inside of the same radio group, only one of them can be active.
So that's the idea behind radio groups in general.
You can have, for example, five radio buttons within one radio group, which will lead to only one
of them being active at the same time.
So you cannot have multiple radio buttons being active in the same radio group at the same time.
So it's always only going to be one.
And what I want to achieve with this is to have different layouts current.
We're not there yet.
But in the next video, we're going to add that feature as well.
OK, then on top of that, you can see that it's not a generic radio group and radio buttons that you
would usually get.
Usually you would have a little circle there indicating which of them is active and it doesn't look
as sophisticated or advanced as this does here, even though it's not super advanced, but still it's
customized.
Right.
So we are going to see how to create our own custom radio group with custom radio buttons and their
circler here at the site.
So you can see they have this little rounded edge here on both sides and the same goes for the radio
buttons themselves.
And also the text is different.
So you can see we have white text when something is active and great text when something is inactive,
so when the radio button is inactive.
So how do we even create this thing?
Well, let's go to our activity in my example, because that's where they are created.
So underneath the toolbar, that's where we have it.
So we have this radio group which contains two radio buttons.
Our radio group has an idea and takes the whole with it only takes the high that is necessary.
It is underneath our toolbar.
So that's something that we need to consider.
So our radio group is underneath the toolbar because we are in a relative layout.
Then we have a little margin.
So we want to have 10 density pixels distance to everything surrounding it.
And then I'm using this drawable background.
So I'm creating a background, which is a drawable radio group background file, which is this XML file.
So it's basically a shape which is rectangular, which has a solid background color, which is this
whitish background color pretty wide.
That's not fully white, but very close to being white.
And then it has this stroke, which is great.
And the radius of the corners is 30 density pixels, so this radius or these corners here, this is
what creates this radius here at the site.
You can see this is why our corners are rounded and not square.
Then this gray color here is our stroke, which is the stroke that surrounds the whole radio group.
All right, let's go back to the XML file, then we have the two radio buttons and they are the same.
The only difference is that the Texas different, the IDs different.
And then on top, the following attribute is also different, which is checked.
So one of them is check.
The other one is unchecked.
They cannot be checked at the same time.
So not both can be checked at the same time.
Only one of them can be checked.
So one is checked through and the other one is checked.
False.
OK, so the left one left radio button, which is our RB metric units, which is the one having the
text metric units, is going to be the one that is checked the way it is set to zero density pixels.
If you do that, then you should have a wait.
So what we're doing here is we say, OK, I want to have a wait of one for each of the radio buttons
so that they will be equally wide.
Because already a group itself has the orientation of horizontal, so the radio buttons are next to
each other and not on top of each other.
That's what we get with orientation horizontal.
Then you can see we this drawable unit, step selecter background, which is this item, if the state
is checked, said to Drew, then we can see that our shape will be a rectangle, which has a solid background
color, which is our color, except in our case it's green.
And then we have the corners, which is 30 density pixels.
So we have the same corners as we had with our radio group type background.
So that they fit to each other because otherwise it wouldn't fit and they wouldn't really close here
towards the corners.
All right, then I want them to close at the corners.
All right, so that's the background then we said one of them has checked through the gravity should
be centered and well, then we set the text color.
So here, the cool thing is, as I told you earlier, the color is changing.
So the text color of the button is changing depending on whether it's active or not.
And that is something that we don't do in code.
So we don't do that in Scotland, but we are actually doing it in XML code.
So let's look at it.
That's what this drawable units tepp text color selector is doing.
So we're using it selector in which we have two items.
One is for Android State Gitte.
True, and the other one for Android State checked fault's.
So if the state checked through the case, the color should be white, otherwise the color should be
great.
And that's a cool thing because now we don't need to do that in code and kotlin, which would make it
a lot more complicated.
But we simply just have this XML file, which takes care of the color directly.
So it takes care of the state of the color.
Of course we have textiles, the textile, and then there is one thing that you probably haven't seen
yet, and that is this button.
Now, if I get rid of this, let's test it again just to see what the differences.
So I gotten rid of it for our metric units.
And you can see now it has this circle here which indicates that this is a radio button.
You can also see that it fills once we click on it and then it gets empty again once it's checked.
All right.
And that's what you get with this Android button.
Also, I want to get rid of this default functionality, and I just want to use my.
Customized radio button that I created.
This is also useful when you actually have images as your different radio buttons.
So that's also another option.
OK, and now radio button for the US units is pretty much the same, only that it is different, the
Texas different and the checked state is set to follow.
The rest is pretty much the same as for the other radio button.
All right, and that's already it.
So now you can see how you can create your very own radio group, that is custom.
Now if you implement the code, just like the code that you have seen here, you probably will run into
one issue.
And that is because the linear layout underneath the radio group, of course, needs to be below the
R.G. units because the before it before we implemented this additional code, it was underneath the
toolbar BMI activity.
So if you haven't changed it in here, what you will get is that they overlap.
So those two layouts, they overlap and then you get this weird behavior that you can see here.
OK, so that is something that you can.
Avoid if you change this to be the radio group units.
All right, and that's it.
So I'd say let's go to the next video where we are going to implement the functionality that underlies
it, because for now, it's just doing nothing, right?
It's just changing the radio button itself.
But what I want to have is I actually want to change the text fields here, the added text for both.
So it should not say weight in KG, but weight in pounds, for example, and hydrotherapy in centimeters.
But we want to have the height in feet and also in inches.
So see you in the next video.