Well, hello everyone. So today, we're going to talk about everybody's favorite subject, and that is Buttons. Buttons are android components, right?

When you click on buttons, buttons will do some sort of specific operation. Buttons are probably one of the most useful components. If I wanted to list you the top three most used components, I would say: Buttons, TextViews, and EditText. Give you some context. In the last video, we spoke about Text Views. In this video, we're going to talk about buttons, and then guess what? Next time, we're going to talk about Edit Text. So, let's just go to Android Studio without using any more time. I've created a new project for this lesson and the name of this project is Buttons. You could also create a new project or continue on the project that we created in previous lesson though. Anyway, let's move the XML code of the TextView component that we created in the previous lesson to the design area of this project. For this, in the previous project, I opened the XML code. I'm selecting and copying the codes that belong to the TextView component here. I'm just going to paste these codes into the Constraint Layout component in our new project. Right? You can add a new TextView Component, but, so that the duration of our lesson isn't too horribly long, I am going to use the design that I created in the previous lesson as well.

All right. Now let's get into the Button component. We're going to add a new Button to this project. You know before that we can create a new Button in two different ways. First one is drag and drop. So, I'll select the Button component from the palette, drag it to the component tree or to the design area directly. Okay, so as you can see, I added a new button. I can drag it wherever I want as well because I'm using the Constraint Layer. All right, so what about the second way? Well, you got to add a new button using XML code. It's pretty simple. So, we'll add a second Button using XML code. Go to the XML side, and you can see right here, the XML code that I added a button. I'm going to add another Button. Inside the ConstraintLayout tag, I'll open a new tag by pressing the < key on the keyboard. I write Button here. I select the button and press ‘Enter’, and look at that. As you can see, the Android Studio will auto-complete. So I'm going to need to define height and width. I'm going to choose match_parent for two of them. You can see here that we've got a second button but it covered the full screen. So, I'm going to change the height to wrap_content. All right. Now the Button covers the screen just from the left to the right. We need to give a text to this Button. So, I'm going to write here ‘text’ and select the Android Text option. Inside the quotation marks, I'm going to write "button 2" as my text, and I can see Button and Button 2 in the design area. All right. So, let's change the width of Button 2 to be wrap_content.

Very good. So, now we've got two buttons. The first one has been created with the drag and drop method. The second one using XML code. So, you can see either way is great. Of course, since our main layout is the Constraint Layout, we do need to determine the constraint values of the components so we add to the design area. Otherwise, when we run the application, the components will move to the (0,0) point of the screen, i.e. ito the upper left hand corner. But this time, I will put the Constraint Values to be automatic. So for this, I'll select a Constraint Layout, click the ‘Infer Constraint’ option, and that is represented with the magic stick. Don't you love a magic stick? All right. So, we can do a lot of operations on these Buttons. We can do those operations in the attributes section. We can find height and width here. We can specify the layout margin from here. We could also define padding here, I can change the text of the button from here. I will, right here, do your magic, and you can see the Button got bigger because the button-width is set to wrap_content. So, when text gets longer, the button will get bigger just to accommodate that text.

All right. Now also, I can change the background color of the Button using the backgroundTint property. Let me just choose a color from here, and Button color will change. Also I can choose clickable or not. You can think why? Why did I put a button in the project, and not make it at all clickable? Well, if I do not click on this button, why did I put a button here? Well, this actually brings us to an important point because you can do regulation on your project, and you can do your Button to be clickable after some operations. But, before those particular operations, the button would not be clickable. You follow? Let me give you an example. Let's say that you design a game, and inside the game there is a Next Section button. But, you don't want the player to pass over to the next section before getting to a specific score. So, you could specify that after the player collects whatever that score might be, the Next Section button could then be clickable. So then, the player could go on to the next level after making that required score. All right. So, we can also change the text color from here.

Change the text size of course from here. Also, another important thing, we can make our Button visible or invisible. If I choose the invisible, the Button's not going to be seen. So, this feature can be used for the same purpose that I mentioned about being clickable or not clickable. Obviously, context will dictate whether you use which. All right, we're going to need to give an ID to these buttons to make sure they work on the Kotlin side. Android Studio gave this button an ID. Now it is button and of course, you could change it if you want. I am going to change it and I'm going to make the ID doMagic. Now the ID of this button is doMagic and the text of this button is Do Your Magic. All right. So, let's give an ID for the second Button. And I'll write myButton here. And now I will need to define the Buttons and the TextView Component in the design area. So first, I'll define the buttons. I'll write: lateinit var here. And of course, I'll need to give a name to this button to work on this button. So, I'll write doMagic, but you can put in whatever name that you want after putting the colon.

All right, Button. Select the Button option that is offered to us by the code editor. And that way we'll import the Button class in our project automatically. And the same way, I'll just define the second Button. All right, lateinit var myButton. After the colon, I'll write: Button. And then, we can define the TextView component. So, I'll write lateinit var myText, and then after dropping in a colon, I'll write TextView and select the 'TextView' option that is offered to us by the code editor. Very generous. And that way, we import the TextView class into our project automatically. Pretty awesome. Now also, I'm going to need to match these components with their IDs inside the onCreate function. All right, so for that, I will write doMagic = findViewByID. After I write findViewByID, I will write inside parenthesis R.id.doMagic because the ID of my first Button was doMagic, right? All right, for the second Button I'm going to write myButton = findViewByID(). And after I write findViewByID, I will write inside parentheses, (R.id.myButton .myButton. For the text view, I will write myText = findViewById() After I write findViewById, I will write inside the parentheses R.id.textExample. All right. So, now I've defined the components on the Kotlin side. I can do everything in here. And I'll write doMagic, and after the dot, look at all the operations I can do. We now add a click listener, and work inside this method. So, I am going to write setOnClickListener, and select this option, and press 'Enter'. So, after that, everything that I write inside the curly braces will be executed when I click on the button.

So, I am going to write doMagic.setBackgroundColor and inside the parentheses, I will write Color.BLACK. So, this code is going to change the background color of the button after I click the button. All right. So, let's run that and let's watch it work. All right. So, you see that it's magic. Well, okay, so you see that it's working anyway. You can do some operations on the other components from here as well. For example, we can change the text of the text view from here. So, I am going to write myText.setText, and inside the quotation marks, I'll write I have done my magic. And let's run the code. So, you see, when I click on the button, the text of the text view changes.

Also, I can, well, make that invisible. So, here I am going to write, myText.isVisible After the equal signs, I'll write false. All right. So, let's run the app. So, here the applications open, click the doMagic button, text view, and button to component disappears. Also the doMagic button moved upwards. Whoa. Did you expect that? Well I did. Why is that though? This is because the constraints we define in the design area. If you can remember way back, we automatically defined the constraint values of the components. So, for this reason, the top constraint of the doMagic button was pinned with the bottom constraint of the text view component.

So, when the text view component became invisible, the position of the other components change too. So, I am just going to delete the constraint of the doMagic button, pin it to the bottom of the screen, and let's go back and test the app out one more time. So, the application opens. When I click on the doMagic button, the text view gets, well, disappears. So, now I am going to do the invisible doMagic button itself. So, this all right, doMagic.isVisible. After the equal sign, I'll write false. Now let's run that code. Application opens. Now I click to doMagic button, and as you can see, the button and text view are invisible now.

So, you can see here there's another button, but when I click it, it's not working because we didn't write any code for this button. So, if you want to, let's go ahead and make the button and text view components visible when you press this button. So, first we'll add a click listener to the button. Here, I am just typing myButton.setOnClickListener. And so after curly braces, I'll write myText.isVisible = true. Similarly, I can write doMagic.isVisible. After equal sign, I'll write true. All right. So, we'll run the application again. And first of all, I'll click on the 'doMagic' button. As you can see the button and the text view are all invisible, so now, let's click on this button and there you go, the components are now visible.

So, we can do a lot. We do many more things here. But I do want to move on to another topic that includes buttons because the design of the buttons is almost as important as its code. All right. So, because of this, you really do need to learn the different types of button designs. Let's say, for example, you would want to shape a button into an oval, or maybe circular, or make it rectangle. So, when we want to change the button design, we do need to create a new xml file under the drawable folder. All right. So, I am just going to right click on the 'drawable folder'. After that, I will choose 'New' 'Drawable Resources File'. And all this will open a new window and I need to give a name to this new xml file.

So, I am going to name it button_shape. All right. So, now that we have this new xml file, and its name is button_shape, there are some codes in here. And these codes are about when we click on the button what its design will be. I am going to delete these codes. I am not even going to worry about it right now. I will change its shape. So, now I am going to define the shape by writing android:shape = "oval">. Also, I need to choose a color for this button. So, for this I am going to define a solid color here. I'll open up a new tag, write solid, and press a 'Slash' key on the keyboard, closes the tag. So, now I can define the color of the shape.

And all right, the color and select the android:color option. I will choose the color/teal_700, but, you can of course choose whatever color you want. So, we've defined the button_shape, but has anything changed on the main activity xml page? Well, we do need to set it as a background because we created the button_shape xml. So, how do I accomplish that? I am going to go to the xml site of the activity main page and I will add the background property. So, I am going to select the button_shape xml file under the drawable folder that we created before.

Now note it, that the shape of the button has changed, but its color has not. So, for this reason, we changed the app background tint property to null, otherwise the shape of the button will change but its background color will not. All right. Now you see that button has taken its oval shape, but we define width and height wrap_content. We need to change that too. I'll change both of them to 150. All right, so the button takes the shape of a ring, and you could make it square or rectangular, that my friends, is up to you.

But now you see what's going on. All right. So, sure enough, that's how you use button components in Android Studio. And really, I think that's enough for this video, don't you? So, let's take a little break. And I'll see you in the next video.