All right,

hello everyone. So now, where do we go from here? Checkboxes always lead to radio buttons. So, we're going to do radio buttons in this video. So, radio buttons are very similar to checkboxes that we did last time, but radio buttons are inside a group and users can choose one option from the group. Radio buttons are separated from checkboxes because of this feature. So, for example, you can use radio buttons on a test application. Users can only choose one option from the answers. You can also use radio buttons to take some information from the user, just like checkboxes. But in the checkbox there is two options. For one checkbox, checked or unchecked. But when you use a radio button, the user has to choose one option from the group. Also, one option is chosen by default. Okay, so that's enough information. We've all used radio buttons, but now let's go to Android Studio and practice what to do with them. So, for this lesson, I have now created a new project, and the name of this project is RadioButtons.

You can also create a new project or continue from the previous one, it's up to you. But what I do want to do is show you the sample application that we're going to be doing so you know where we're going. So, as you can see here, there are three radio buttons on the screen. The names of the radio buttons are Green, Yellow, Red. Now there's also a button here. The user will select one of the options and then click on the button. So, the background color of the application will change, depending. All right, let's do it. Now if you notice, our main layout is ConstraintLayout, but I'm going to use a LinearLayout in this lesson. So, my goal here is to learn how to use both the ConstraintLayout and the LinearLayout and you'll just know it backwards and forwards. So remembering, of course, that we've used the ConstraintLayout in the previous lesson, now I'm going to change to the LinearLayout in this lesson.

All right. So, let's go ahead and open up the XML side and change the ConstraintLayout to LinearLayout. I just write LinearLayout here. Now also, I'm sure you remember that we had to specify the orientation while we were working with the LinearLayout. So, that means I'm going to just make the orientation property vertical. And let's go ahead and create the application design completely using XML code. I think you're ready. Come on, as an Android developer, you should know how to use XML code. Okay. So first of all, since I'm going to add the components into this LinearLayout, we should also close the tag of the LinearLayout as follows. So, I'm deleting the > and / right here. Now, I'll close the tag by pressing the 'Shift' and '<' keys on the keyboard same time. All right. So now, I can add the component that I want to into the LinearLayout. So, what we'll do first is change the background color  of the LinearLayout.

Now, you do remember that we were using the background property for this? So, when we start typing background here, the code editor does offer us some options. Cool. So, from here, I select 'android:background' feature, press 'Enter'. Now I can choose a color and you can write the code of the color that you want or just add it directly with the # at the beginning. You could also choose any of the colors defined in Android. For this, I'll just type android in here and select the '@android:' option here. And there you see the code editor offers us a host of colors. So here, just choose any color you want. I'm going to choose color 'holo_blue_dark', and as you can see the background color of the design area immediately changes. All right, so now let's add some of the other components into the design area. So first, I'm going to add radio buttons because that's what we're doing. Now of course, we should not add radio buttons directly to the design area. Remember, first I need to add a radio group. Then, I will add the radio buttons to this radio group.

I'll open up a new tag, pressing the '<' key on the keyboard. Then I write RadioGroup in here and press 'Enter'. I'll make the width and the height of the radio group wrap_content. Now I'm going to close the tag of the radio group and add the radio buttons inside. I press 'Shift' and '<' keys on the keyboard. And I need to create a new tag for the radio button, so I'll press the '<' key and type RadioButton. The width and the height of the radio button can be wrap_content. Also, let's change the text of the first radio button. So, I'll type text, select the 'android:text' option. Let the text of the first radio button be Green. All right, let's also change the text size. And here, I'll just type size, select the 'android:textSize' feature and the text size can be 20. Let's change the text color. I'll type color and select 'android:textColor' property. All right, so here you can specify any color you want of course, I'm just going to choose white defined in the color.xml file.

Now when we type white in here, we're presented with the color white option. So I'll choose it. And as you can see, the text color of the radio button has changed immediately. All right so now, yes, we have created the first radio button. But we're in a group, so we've got to create two more radio buttons. But all I need to do is copy and paste the code here twice. Right? Because radio buttons are going to have all these similar properties. So as you can see, we have now three radio buttons in the design area. Of course, there is one thing left to do. I got to change their text. The text of the second radio button is going to be Yellow. Text in the third radio button will be Red. All right, so there's our radio buttons. Now, we've got to create a button. Okay, of course we've got to create this button outside of the radio group and inside of our LinearLayout. So for that, I will open a new tag and write Button, and the width and the height of the button can be wrap_content. So now, let's change some of the properties of the button.

For example, we can make the text size 20, and we can use the android:textSize feature and we'll change the text. For example, we can write Change Background in the text of the button. And now, if you pay attention to this, all the letters are written in capitals on the design area. And you can also change that if you want. So, we use the textAllCaps property for this. So, if you set this property to false, it's going to appear in the design area the same way that you specify the text of the button. All right. Finally, let's change the background color of the button. Now if you remember, we used the backgroundTint property for the background color of the button. For the background color of the button, let's just write a color code this time. Now again, you've got to be familiar with this usage. Right? So for this, I'll just write the code of the color that I want to add after this # sign. For example, I'm writing the following code in red tones. Of course, you can get these codes just by doing a simple search in your favorite search engine to scour the World Wide Web.

You don't really need to memorize these codes, but when you use them enough, you tend to remember what your favorites are. Anyway, we've created our components. Let's now arrange the location of the components a little bit better in the design area. So, I will now make the gravity property of the LinearLayout 'center_horizontal'. That way, all the components will be centered on the horizontal plane, right? Now let's move the RadioButton component down a little bit. For this, I can set the marginTop value to, let's say, 75. Also want some distance between the radio buttons themselves. So, for this, I can use the marginTop feature. I set the marginTop value to five for the first button, and now I can just copy this line of code and I can paste it into the other two radio buttons. And there you see that there's some distance between the radio buttons. All right, so that's cool. Now finally, I'm going to make a marginTop feature of the button 50dp. So there you can see, design looks a little nicer. But in fact, I'm just finished with the design entirely. But I do want to add one more feature. So, you can make any of the radio button selected by default. All right, for example, let's make the first radio button selected by default. And for that we can just use the checked property. So, here if you set this property to true, the radio button will be selected by default. So, finally, let's define the ids of the components. And I will first define the id of the linear layout. So, here I write id select the 'android id' feature. Then select '@+id/' and percenter. Now we can select the id. The id of the LinearLayout can be linearLayout. And now let's define the id of the other components.

The id of the first radio button can be radioButtonGreen. The id of the second radio button could be radioButtonYellow. Id of the third radio button can also be radioButtonRed.  All right. So, finally we'll determine the id of the Button and we'll let the id of the Button be buttonChange. All right, my friends,  yeah  that completely finishes this design. So, as you can see, you can design your application using XML codes without even knowing it. That's cool. Good job. You can do the same things we did here using the attributes section. But anyway, now let's open the 'MainActivity.kt' file and begin coding.

All right, so first of all, what do we need to do? Define the components. So, I will define the linear layout. Now by the way, I got to mention in this, if you remember, we did not specify the ids of the layouts in our previous lessons. We did not define the layouts here. This is because we never use layouts while coding. So, in other words, if you are not going to use a component in the design field while coding, you do not need to define it here. But since we will change the background color of the layout by using the radio buttons in this lesson, we have given the linear layout an id and we need to define it here.

Follow? Yeah.

So, let's start defining the layout now. I'll write, lateinit var. I'll write, linearLayout as the variable name. Then after the colon, I'll write linearLayout. Now, I will define the radio button. lateinit var. The name can be green for the first radio button. After the colon, I'll write RadioButton. And for the second radio button, I'll write lateinit Var_ yellow : Radiobutton. Last radio button, I'll write lateinit Var_red : Radiobutton. All right? Now, lastly, we have got to define the button so I'll write, lateinit var, the name of the button can be change after the colon, I'll write Button. So, after all that, I need to define ids  for these variables in the onCreate function. So, I'm going to write linearLayout =  findViewById(R.id.linearLayout) And here, green = findViewById(R.id.radioButtonGreen) For yellow, yellow = findViewById (R.id.radioButtonYellow). And for the red, red=findViewById(R.id.radioButtonRed). Now, we got the button, so change = findViewById (R.id.buttonChange). All right, so we've defined the components. But what do we want to do after that? Well, let's see. When the user chooses a color and clicks a button, the color of the layout has got to change. So, to do this, I need to add a ClickListener to the button change, and that I will write here change.setOnClickListener  and then inside the curly braces, I will write my conditions. All right. If the green radio button is checked, it means that if the user selects the green option, we should make the background color of the linear layout green.

And so, I will write inside the bracket  {LinearLayout.setBackgroundColor and inside the parentheses I'll write (Color.GREEN). So, that's my first condition. So, if the user chooses the green radio button, the background color will turn green.

All right, so after that I need to write the second condition, else if (yellow.isChecked) linearLayout.setBackgroundColor(Color.YELLOW). And likewise for the third condition, else if (red.isChecked) linearLayout.setBackgroundColor(Color.RED). So far so good. Let's run it and see if it's working or not. So, the application opens. When the 'Green' radio button is selected and click the 'Change Background' color, the background color changes to green. Let me choose 'Yellow'. Background color is yellow. So, let me choose 'Red' and click the button, background color turns red. Wow. Okay, cool. So, you should be able to see that I can choose only one option with these radio buttons. Excellent. So, I don't know about you, but I think radio buttons makes sense. Pretty easy. So, that's enough for now. We're going to get to something else in the next video. So, I'll see you then.