1
00:00:00,450 --> 00:00:01,440
Welcome back.

2
00:00:01,650 --> 00:00:06,780
And this video, we are going to add this functionality right here, so just as radio group with two

3
00:00:06,780 --> 00:00:12,740
radio buttons and I'm going to use a slightly different approach and show you how to build this.

4
00:00:12,990 --> 00:00:18,540
So I have prepared the code and I'm just going to go through it and I'm going to tell you what every

5
00:00:18,540 --> 00:00:19,990
single aspect is doing.

6
00:00:20,310 --> 00:00:25,740
OK, so what we want is to have this radio group here at the top with two radio buttons.

7
00:00:26,080 --> 00:00:26,450
All right.

8
00:00:26,460 --> 00:00:27,300
How do we get there?

9
00:00:27,540 --> 00:00:35,010
Well, we need to create a radio group in XML and two radio buttons which are inside of this radio group,

10
00:00:35,190 --> 00:00:39,590
because if they are inside of the same radio group, only one of them can be active.

11
00:00:39,840 --> 00:00:42,240
So that's the idea behind radio groups in general.

12
00:00:42,240 --> 00:00:48,060
You can have, for example, five radio buttons within one radio group, which will lead to only one

13
00:00:48,060 --> 00:00:50,530
of them being active at the same time.

14
00:00:50,730 --> 00:00:56,940
So you cannot have multiple radio buttons being active in the same radio group at the same time.

15
00:00:56,970 --> 00:00:59,040
So it's always only going to be one.

16
00:00:59,730 --> 00:01:04,620
And what I want to achieve with this is to have different layouts current.

17
00:01:04,640 --> 00:01:05,519
We're not there yet.

18
00:01:05,519 --> 00:01:08,040
But in the next video, we're going to add that feature as well.

19
00:01:08,650 --> 00:01:14,970
OK, then on top of that, you can see that it's not a generic radio group and radio buttons that you

20
00:01:14,970 --> 00:01:15,750
would usually get.

21
00:01:16,020 --> 00:01:21,570
Usually you would have a little circle there indicating which of them is active and it doesn't look

22
00:01:21,570 --> 00:01:27,630
as sophisticated or advanced as this does here, even though it's not super advanced, but still it's

23
00:01:27,750 --> 00:01:28,500
customized.

24
00:01:28,500 --> 00:01:28,770
Right.

25
00:01:29,070 --> 00:01:36,450
So we are going to see how to create our own custom radio group with custom radio buttons and their

26
00:01:37,050 --> 00:01:39,300
circler here at the site.

27
00:01:39,300 --> 00:01:47,460
So you can see they have this little rounded edge here on both sides and the same goes for the radio

28
00:01:47,460 --> 00:01:48,450
buttons themselves.

29
00:01:48,870 --> 00:01:50,790
And also the text is different.

30
00:01:50,800 --> 00:01:55,280
So you can see we have white text when something is active and great text when something is inactive,

31
00:01:55,650 --> 00:01:57,460
so when the radio button is inactive.

32
00:01:57,990 --> 00:01:59,910
So how do we even create this thing?

33
00:02:00,300 --> 00:02:05,170
Well, let's go to our activity in my example, because that's where they are created.

34
00:02:05,550 --> 00:02:08,070
So underneath the toolbar, that's where we have it.

35
00:02:08,490 --> 00:02:13,230
So we have this radio group which contains two radio buttons.

36
00:02:13,920 --> 00:02:20,670
Our radio group has an idea and takes the whole with it only takes the high that is necessary.

37
00:02:21,000 --> 00:02:23,010
It is underneath our toolbar.

38
00:02:23,020 --> 00:02:25,050
So that's something that we need to consider.

39
00:02:25,080 --> 00:02:30,380
So our radio group is underneath the toolbar because we are in a relative layout.

40
00:02:31,110 --> 00:02:32,790
Then we have a little margin.

41
00:02:33,060 --> 00:02:36,810
So we want to have 10 density pixels distance to everything surrounding it.

42
00:02:37,050 --> 00:02:39,270
And then I'm using this drawable background.

43
00:02:39,270 --> 00:02:45,890
So I'm creating a background, which is a drawable radio group background file, which is this XML file.

44
00:02:46,230 --> 00:02:53,490
So it's basically a shape which is rectangular, which has a solid background color, which is this

45
00:02:53,490 --> 00:02:55,710
whitish background color pretty wide.

46
00:02:55,920 --> 00:02:58,700
That's not fully white, but very close to being white.

47
00:02:59,160 --> 00:03:02,550
And then it has this stroke, which is great.

48
00:03:03,660 --> 00:03:11,400
And the radius of the corners is 30 density pixels, so this radius or these corners here, this is

49
00:03:11,400 --> 00:03:14,340
what creates this radius here at the site.

50
00:03:14,340 --> 00:03:19,640
You can see this is why our corners are rounded and not square.

51
00:03:20,980 --> 00:03:29,200
Then this gray color here is our stroke, which is the stroke that surrounds the whole radio group.

52
00:03:31,240 --> 00:03:36,070
All right, let's go back to the XML file, then we have the two radio buttons and they are the same.

53
00:03:36,310 --> 00:03:39,690
The only difference is that the Texas different, the IDs different.

54
00:03:39,700 --> 00:03:44,890
And then on top, the following attribute is also different, which is checked.

55
00:03:45,370 --> 00:03:46,390
So one of them is check.

56
00:03:46,390 --> 00:03:47,500
The other one is unchecked.

57
00:03:47,500 --> 00:03:49,950
They cannot be checked at the same time.

58
00:03:49,960 --> 00:03:51,900
So not both can be checked at the same time.

59
00:03:51,910 --> 00:03:53,110
Only one of them can be checked.

60
00:03:53,500 --> 00:03:56,590
So one is checked through and the other one is checked.

61
00:03:56,770 --> 00:03:57,340
False.

62
00:03:58,220 --> 00:04:05,770
OK, so the left one left radio button, which is our RB metric units, which is the one having the

63
00:04:05,770 --> 00:04:10,990
text metric units, is going to be the one that is checked the way it is set to zero density pixels.

64
00:04:10,990 --> 00:04:13,420
If you do that, then you should have a wait.

65
00:04:13,750 --> 00:04:19,450
So what we're doing here is we say, OK, I want to have a wait of one for each of the radio buttons

66
00:04:19,450 --> 00:04:22,270
so that they will be equally wide.

67
00:04:23,430 --> 00:04:29,910
Because already a group itself has the orientation of horizontal, so the radio buttons are next to

68
00:04:29,910 --> 00:04:31,450
each other and not on top of each other.

69
00:04:31,830 --> 00:04:34,410
That's what we get with orientation horizontal.

70
00:04:36,330 --> 00:04:44,790
Then you can see we this drawable unit, step selecter background, which is this item, if the state

71
00:04:44,790 --> 00:04:54,840
is checked, said to Drew, then we can see that our shape will be a rectangle, which has a solid background

72
00:04:54,840 --> 00:04:57,500
color, which is our color, except in our case it's green.

73
00:04:58,140 --> 00:05:02,370
And then we have the corners, which is 30 density pixels.

74
00:05:02,370 --> 00:05:07,050
So we have the same corners as we had with our radio group type background.

75
00:05:08,850 --> 00:05:15,450
So that they fit to each other because otherwise it wouldn't fit and they wouldn't really close here

76
00:05:15,870 --> 00:05:16,930
towards the corners.

77
00:05:17,660 --> 00:05:20,010
All right, then I want them to close at the corners.

78
00:05:22,010 --> 00:05:27,830
All right, so that's the background then we said one of them has checked through the gravity should

79
00:05:27,830 --> 00:05:31,630
be centered and well, then we set the text color.

80
00:05:31,970 --> 00:05:36,560
So here, the cool thing is, as I told you earlier, the color is changing.

81
00:05:36,830 --> 00:05:40,940
So the text color of the button is changing depending on whether it's active or not.

82
00:05:41,450 --> 00:05:43,370
And that is something that we don't do in code.

83
00:05:43,370 --> 00:05:47,330
So we don't do that in Scotland, but we are actually doing it in XML code.

84
00:05:47,600 --> 00:05:48,500
So let's look at it.

85
00:05:48,920 --> 00:05:53,140
That's what this drawable units tepp text color selector is doing.

86
00:05:53,150 --> 00:05:56,170
So we're using it selector in which we have two items.

87
00:05:56,750 --> 00:05:59,450
One is for Android State Gitte.

88
00:05:59,630 --> 00:06:02,630
True, and the other one for Android State checked fault's.

89
00:06:03,380 --> 00:06:09,410
So if the state checked through the case, the color should be white, otherwise the color should be

90
00:06:09,410 --> 00:06:09,770
great.

91
00:06:10,460 --> 00:06:16,730
And that's a cool thing because now we don't need to do that in code and kotlin, which would make it

92
00:06:16,730 --> 00:06:17,690
a lot more complicated.

93
00:06:17,690 --> 00:06:21,920
But we simply just have this XML file, which takes care of the color directly.

94
00:06:22,370 --> 00:06:24,740
So it takes care of the state of the color.

95
00:06:25,500 --> 00:06:30,140
Of course we have textiles, the textile, and then there is one thing that you probably haven't seen

96
00:06:30,140 --> 00:06:32,170
yet, and that is this button.

97
00:06:32,170 --> 00:06:37,010
Now, if I get rid of this, let's test it again just to see what the differences.

98
00:06:37,020 --> 00:06:39,620
So I gotten rid of it for our metric units.

99
00:06:40,070 --> 00:06:47,740
And you can see now it has this circle here which indicates that this is a radio button.

100
00:06:47,930 --> 00:06:55,420
You can also see that it fills once we click on it and then it gets empty again once it's checked.

101
00:06:56,180 --> 00:06:56,560
All right.

102
00:06:56,570 --> 00:06:58,600
And that's what you get with this Android button.

103
00:06:58,610 --> 00:07:05,630
Also, I want to get rid of this default functionality, and I just want to use my.

104
00:07:06,480 --> 00:07:09,430
Customized radio button that I created.

105
00:07:09,720 --> 00:07:14,970
This is also useful when you actually have images as your different radio buttons.

106
00:07:15,210 --> 00:07:16,980
So that's also another option.

107
00:07:19,100 --> 00:07:26,600
OK, and now radio button for the US units is pretty much the same, only that it is different, the

108
00:07:26,600 --> 00:07:29,440
Texas different and the checked state is set to follow.

109
00:07:29,720 --> 00:07:33,200
The rest is pretty much the same as for the other radio button.

110
00:07:34,940 --> 00:07:36,660
All right, and that's already it.

111
00:07:36,740 --> 00:07:42,410
So now you can see how you can create your very own radio group, that is custom.

112
00:07:43,130 --> 00:07:49,310
Now if you implement the code, just like the code that you have seen here, you probably will run into

113
00:07:49,310 --> 00:07:50,030
one issue.

114
00:07:50,270 --> 00:07:56,390
And that is because the linear layout underneath the radio group, of course, needs to be below the

115
00:07:56,390 --> 00:08:02,960
R.G. units because the before it before we implemented this additional code, it was underneath the

116
00:08:02,960 --> 00:08:04,430
toolbar BMI activity.

117
00:08:04,440 --> 00:08:09,090
So if you haven't changed it in here, what you will get is that they overlap.

118
00:08:09,200 --> 00:08:14,180
So those two layouts, they overlap and then you get this weird behavior that you can see here.

119
00:08:14,780 --> 00:08:17,210
OK, so that is something that you can.

120
00:08:18,470 --> 00:08:22,970
Avoid if you change this to be the radio group units.

121
00:08:24,950 --> 00:08:26,390
All right, and that's it.

122
00:08:26,510 --> 00:08:32,390
So I'd say let's go to the next video where we are going to implement the functionality that underlies

123
00:08:32,390 --> 00:08:36,450
it, because for now, it's just doing nothing, right?

124
00:08:36,470 --> 00:08:39,620
It's just changing the radio button itself.

125
00:08:39,919 --> 00:08:46,750
But what I want to have is I actually want to change the text fields here, the added text for both.

126
00:08:47,240 --> 00:08:52,150
So it should not say weight in KG, but weight in pounds, for example, and hydrotherapy in centimeters.

127
00:08:52,160 --> 00:08:58,020
But we want to have the height in feet and also in inches.

128
00:08:58,670 --> 00:09:00,230
So see you in the next video.