Alright, hello everyone. We're going to work on a toggle button in this video. So, the toggle button pretty much gives two options to the user. It's basically on and off. Now, you define what needs to be done when the user takes it to the on position. But it is fairly easy to use. So, why don't we just go to Android Studio and practice with it? Now, I have created a new project for this lesson, and the name of this project is ToggleButton, but you can always create a new project or continue with radio buttons or whatever your previous project is called.

So, why don't we just first have a look at the sample application that we're going to be doing. It gives you an idea of where we're going to go. So, as you can see there is one image view, one text view, one toggle Button. Also, the text of the toggle button is HIDE IMAGE. Alright. So, when we click on the toggle button, the image disappears. The text of the text view changes to "The image is invisible." Now also, the text of the toggle button changes to SHOW IMAGE. So, if I click on the toggle button again, the image comes back to me just like that. The text of the text view changes to "The image is visible." And also, the text of the toggle button changes to HIDE IMAGE. Alright, so that's what it looks like.

Let's get started. Now first off, of course, you're going to need to add an image. So, I'm going to add the image that I'm going to use in my project to the drawable folder. I copy the image to add, and right click on the 'drawable' folder, and select the 'Paste' option. And from here, of course, you must select the drawable folder, and I'm not going to change the name of the picture so I'll just add the picture to the drawable folder by pressing the 'OK' button. Al right so now, let's design the application. So first, I'm going to change the background color of the ConstraintLayout and again I want to choose the hollow_blue_dark color that I've always chosen because I like it. You can choose any color that you want.

Okay. So now, I can add an ImageView component to the design area. I'll just drag it from the palette and drop it right here. So now, I can select an image from this window. So, I select the picture that I just added and press the 'OK' button. Of course, the size of the picture was so large that it took up the entire screen. So, I'm going to need to make the width of the ImageView component 300. I'm also going to make the height 200. Alright, so now let's add a TextView component. I will make the width of the TextView component 300. And I'm going to make the height 50.

Okay. So now, let's change the text. So, I'm going to type in "The image is visible", and I'll set the textSize to 20. Make the textColor black. And I'm going to change the background color to white. Alright, so let's center the text in the TextView component. I will use the gravity feature for this. I'm sending the gravity value to the center. Now, we can add a toggle button. All right. So, you can see the ToggleButton and it's under the Button section. So, I'm just going to drag a ToggleButton and drop it under text view.

Alright, so the ToggleButton also takes two different options. I'll define what will happen when it takes the on position and also what's going to happen when it takes the off position. But before we do all that we can change the text of the toggle button. Now, where do you do that? Well, you know that we've changed all of the text of the buttons that we've done from text attributes, but we're not going to do this for the ToggleButton, there's an other text attribute. It is the textOff, the textOn property.

All right. So, we're going to define a text in the textOff section. So that, when the position of the toggle button is off, textOff also will define the text when the position of the toggle button is on, and I'm going to write "Hide Image" for the textOff, and the "Show Image" for the textOn. All right. Now, since our main layout is this ConstraintLayout, I've got to determine the constraint values of the components. But first, I'll center all three components horizontally. After selecting the ImageView component, I'll press the ctrl key on the keyboard and select the 'textView' and 'toggleButton' components.

All right. So now, that I've selected all the components, I'll now right click and select the 'Center', Horizontally' option. Very cool. So, there we have now centered all of the components horizontally. So now, we've got to determine the constraint values of the components in the vertical plane. So, I set the top constraint value of imageView to 50. Set the top constraint value of the textView to 20. And finally, I'll set the top constraint value for the toggleButton to 30. Okay, cool.

So, we've now completed the design. Now, I got to determine the ids of the components. So, let's make the id of the imageView component. The image and we'll let the id of the textView component be result. I'm not going to change the id of toggleButton. Alright. So now, let's open up 'MainActivity.kt' file. So that, we can start coding. Very cool. So, first of all, I'll need to define the components. So, I'll write lateinit var image : ImageView. On the next line, I'll write lateinit var result : TextView. And lastly, I'll come in here and write 'lateinit var toggle button : ToggleButton. And, of course, you can give it another name if you want. But after that I'll define their ids inside the onCreate function. Write here, toggleButton = findViewById. And inside the parentheses (R.id.toggleButton). For the image view, image = findViewById(R.id.image), and for the text view, 'result = findViewById(R.id.result). Now, we can do operations on the toggle button. So, I'll need to add a listener.

Now, normally I would add a click listener. But for the toggle button we need to add the checked change listener. Alright, so right here toggleButton.setOnCheckedChangeListener. And as you can see the code editor offers us some options. So, from here, we can select the option with the curly brackets next to them. So choosing this, creates two parameters, as you can see. The first parameter is the parameter from the compoundButton class. The second parameter is a Boolean parameter. So, that is when the position of the toggle button changes this change is automatically detected and returns true or false.

So here, we're going to get this returned value from the parameter, and we'll change the name of this parameter for better understanding. So, I'll just type isChecked here. So now, when the checked position of the button has changed, the listener will detect this change and apply the codes that I wrote here. And it's going to take two positions checked and unchecked. So, that means when the toggleButton is on, it takes checked; and toggleButton is off, it's going to take uncheck. So here, I'm going to write if(isChecked) and inside the brackets I will hide the image. All right, so how do I do that? I just write in here 'Image.visibility = View.INVISIBLE. And then also, I want to change the text of the text view. So, I'll write here result.text = "The image is invisible." After that, I will write the else condition. That means when the toggle button takes the off position again. Alright, I will write here image.visibility = View.VISIBLE. Also, I've got to change the text of the textView again, and I'll write result.text = "The image is visible."

So, let's run the app. See if it works. So now, when the application opens, you see the toggle button, the text is HIDE IMAGE. When I click on the toggle button, the image is hidden and the text of the text view changes. Cool. So also, the text of the toggle button changes. So, when I click it again, the image is shown text of the text view changes again. And so does the text of the toggle button changes back to hide image. Alright. So, it's kind of easy, right? I think it's enough for now. So, we'll take a short break, and I'll see you in the next video.