All right, hello everyone. I want to talk to you about the CheckBox. So, the CheckBox is a different type of component in Android Studio. It's a kind of a button. It's going to take two positions: Checked or unchecked, and it's a frequently used component when you're developing Android applications. For example, when we develop a survey application or note taking application, we can use CheckBoxes. So, we'll go to Android studio and see it in practice and learn a few things at the same time. Alright, my friends. So, we can create a new project for this lesson. And how do you create a new project? Just click the 'New Project' button here and from this page I can select the 'Empty Activity' option from 'Tablet and Phone' section and press on the 'Next' button. We will configure our project from this page,  I'll  set the name of the project

to be CheckBox. I'm not going to change the project package name or the file path. The programming language will be Kotlin. Minimum SDK level can be 23, so that's all good. And we can create our project just by clicking on the 'Finish' button. So, our project is now being created, and of course could take a little while, but please again, let me just repeat that. Don't do anything before the project's fully created. You might get some errors. You might not but you might, and it's not necessarily consistent either. But that way, yes, you'll be error free.

Okay, my friends. As you can see our project is now created. So, we can open up the 'activity_main.xml' file and we can just close the project directory. First of all, you see the eye icon. We're going to go up here and select 'Show System UI' for my options. Now so, our project will basically look like this. Okay so, as you can see there is a TextView in it. And it contains, "What is your gender?" So, there are also two CheckBoxes just below the TextView component: Male, Female. If you want to, you can add Others. But we're going to just keep it simple for now and we'll click the 'Male' CheckBox. TextView, the "Your gender is male" statement will be written. And, if we click on the 'Female' CheckBox, the "Your gender is female" statement will be written. So, that's what it looks like very simply.

Let's get started. So first off, why don't we just change the background color design area? So, I'll choose 'Constraint Layout' from the Component Tree section and I select the 'background' property from the Attributes section, and from here you can choose any color that you want. I'm going to choose a color like this for now. Press the 'OK' button. So now, let's edit the TextView component in the design area. So, I'm going to first delete the bottom constraint. And we can also make this top constraint value 150dp. And we'll make the width of the TextView component 300dp. And we'll make the height 60dp.

Now, let's change the text of the TextView components. So here I'm going to write, "What is your gender?" And let's increase the textSize. And I'll make the textSize property 24. All right, so let's change the textColor to white and let's also change the background color. Now if you click here, the color palette will open and here you can choose whatever color you want. I'm just going to choose a color in the red shade family. And finally, we're going to align the text in the TextView. So, for this I'm going to use "gravity" and "padding". So, I will make the gravity property of the TextView component- 'center_vertical'. And now, I do want to leave some space to the left of the text. So for this, I'm going to just change the paddingLeft property to seven. That's pretty much okay.

So, now let's add two CheckBox components to the design area. You can find the CheckBox component in the Buttons section of the palette and I can just drag and drop it into the design area. Place the CheckBoxes just below the TextView component and I'll add one more CheckBox in the same way. And of course, you could add another few if you need to, right? Okay so first, let's change the text of these CheckBox components. Text of the first CheckBox will be Male and I'll also make the text of the second CheckBox Female. And I'm just going to keep it simple for now. I'm going to make the marginStart values the same to keep them aligned. And I'll set the marginStart value of the first CheckBox to 160dp. And likewise, I can set the marginStart value of the second CheckBox to 160dp.

Now also, since our main layout is the constraint layout, I got to specify at least one vertical constraint. So, I'll write the top constraint value of the first CheckBox as 20dp. All right, so I'm going to make the top constraint value of the second box 10dp. And lastly, we'll increase the textSize of the CheckBoxes. So, for the first Male CheckBox, I'm going to make the textSize 20. The second CheckBox, I will also make the textSize 20. All right, it's rough and ready. I think that design is kind of finished.

So, finally I got to determine the ids of these components. All right, that way, if I didn't do that right, I wouldn't be able to access the components on the Kotlin side. So, I'm going to make the id of the TextView component be textViewResult. So, after typing the id, I press the 'Enter' key on the keyboard. I can choose the 'refactor' option from this warning window that opens, and then similarly let's determine the id of the CheckBox components, but the id of the first CheckBox be checkBoxMale. And then, the id of the second CheckBox be checkBoxFemale. And sure enough, we've now completed this part of the design.

So, we can now go and open the 'MainActivity.kt' file now. So first of all, I will need to define CheckBoxes and TextView. So, I'm going to write here lateinit var. Now, I've got to give a name to this variable. So, I'm going to write male. This name is my choice. So, you can name it whatever you want. And after the  colon, I'm going to write CheckBox. And of course, we've got to define the other CheckBox. I'll write lateinit var female : CheckBox. And then lastly, I define the TextView. I'll write lateinit var result : TextView.

Okay so now, I need to assign ids to these variables. So, I will write male = findViewById (R.id.checkBoxMale). And for the second CheckBox, "female = findViewById (R.id.checkBoxFemale). For the TextView, "result = findViewById (R.id.textViewResult)". So after that, I'll just add the 'ClickListener' to the CheckBoxes. Now wait, when the user clicks on the CheckBox, its going to do some operations. So, I just write in here "male.setOnClickListener. Now I can write my codes inside the {}. And there are two options for the male CheckBox: Checked or unchecked. So I'm going to write if (male.isChecked), this will control CheckBox is checked or unchecked. If it is checked, it will return true. If it is unchecked, it will return false.

So if it is check, what's going to happen? I want to write "your gender is male" on the TextView. So, I just write in here "result.text" = "Your gender is male". Now why did I write the result? Because, we gave the result of the TextView as a name. We don't want to say result. So, if it is unchecked, I will write again the question and for this we need to create an else block. I will write 'else' inside the brackets, "result.text" = "What is your gender? So, I'm going to do the same for the female CheckBox. female.setOnClickListener inside the {}. If female is checked, result.text = "Your gender is female". If the female is unchecked, result.text = And question again, "What is your gender?"

All right, so that's it in a nutshell, let's run it and see what it looks like. So, the application opens and you see if I check the Male CheckBox, the text of the TextView is changing. If I uncheck the Male CheckBox, the text of the TextView is changing the question again. Cool. If I check the Female CheckBox, the text of the TextView is changing and if I uncheck the Female CheckBox, the text of the TextView is changing the question again.

Now, I wonder if you notice, we could have a problem here. What if I were to check both? Now, we're not obviously getting into biology here, but I do want to ask for this example. I'm not going to be able to let the user check both of them. So, how am I going to prevent that? Well, we will need to write it some extra code. So, I'm going to do this in the if block, so follow along. If male is checked, female must be unchecked. So, I will write female.isChecked = false. So, this code defines the position of the text box. If it is true, the text box will be checked. If it is false, the CheckBox will be unchecked. You follow that? So with this code, if the male is checked, the female will be unchecked automatically. So, I need to do that for the second CheckBox as well. This time I will write male.isChecked = false. If the female is checked, the male will be unchecked automatically. All right, so let's run it and see it again. All right so, it's working now and when I checked male, the female is unchecked. When I check female, the male is unchecked. Good. All right so, that's enough for now. We'll take a short break here if you need to and I'll see you in the next video.