In this video I'll show you how to include a button to your graphical user interface, and how to associate an action with it. We'll be using the example provided by the application "Block 1". This application presents two buttons. When you click on the pink button, a pop-up message is displayed at the bottom of the screen. And when you click on the blue button, it disappears. Let's start a new Android Studio project. Let's call the application Block01, click next, I'll keep the Minimum SDK to the API level 16 because it will allow our application to run on more than 90% of the phones out there. Click next. Choose the empty activity, it's one of the simplest skeleton you can get for an activity. And then click next. The code for the only activity of our application will be in the file MainActivity.java. And AndroidStudio can also generate an XML file for us in order to define the graphical user interface. This file will be activiy_main.xml. Click Finish. Android studio opens with two of the files that it generated for us. And in fact, these will be the only files we'll be editing today. The MainActivity.java file, we'll come back to this one later, and activity_main.xml. So this is where we will define the graphical user interface. Let's make sure that here we are using the API level 16. Okay, so now let's get rid of this default "Hello world" TextView and instead drag a button here to the upper left corner. Now I can change some of the properties of this button. Like its width. I want it to match the parent in order to have a large button. Next I need to change the background color. So if I want a nice blue, I can use AED2FF, it should do the trick. Yes. If I keep scrolling down, I'll find the ID of the button. So remember this ID will allow you to refer to this particular View later on. I like to call my views by using the type of the view, so "button", followed by something related to the action or the information associated with the view. So, this button is blue and sometimes, during the execution of the application, and will disappear, so let's call it "button_blueInvisible". Okay, and you notice that here in the component tree, you can see that the ID of the button was modified. I keep scrolling down, and here I find the text which is displayed on the button. Let's change that as well so the button reads "The Invisible Man's To Do List". [SOUND] Okay. Now we need a second button, almost the same as this one, except it reads something else and it's pink, and we want it right below the first one. So we can either do the same operations, take a button here and drag it there, or I can display the XML file, hitting the "Text" tab here. And I can just copy the existing button, and paste this code underneath. So of course, Android Studio complains because now I have two views with the same ID. So let's change the second one so instead of button_blueInvisible it's button_pinkPanther. Okay let's change also the text displayed on the button. It's not "The Invisible Man's To Do List", it's "The Pink Panther's To Do List". We need to change the color as well, so I need a pink, #FG9BF3. And you can see here the resulting color. So it's fine. Let's go back to the design view. Oh, here I see that the second button is placed on top of the first one. That's not what we want. So here, instead of aligning the pink button with the parent, with the top of the parent, instead I will put it below the first button. And see here how it's useful to have an ID for the view, because I'm able to say, I want to be below the button_blueInvisible. Let's go back to the design view. Okay, looks fine. Now let's try that on the emulator. So I hit the AVD manager and start my emulator. Okay now that my emulator started let's run the application on it and click the run button here. And wait for the app... oh yep, I need to specify I want the application to run on the emulator. I don't want to be asked this question anymore okay, so now it takes a while before the application is deployed on the emulator. Okay, it looks exactly like we wanted it to! But now of course nothing happens when I click on the buttons because we didn't attach any action with them yet. So now it's time to do that. Let's go back to the Java code. With the blue button selected, I'm looking for the onClick property here. And here I specify the name of the method that I want to be called when this button is clicked. Let's call it "toDo". And let's do the same for the second button. Or instead let me show you how to do that in the XML file. See that, the new line which was generated is this one. So I can just copy that and paste it for the pink button. So now, both buttons will call the "toDo" method when clicked, and we're now going to define this method in the MainActivity.java file. So this method should have the following signature: It's a public method which returns nothing, and it takes one parameter of type View. And this parameter, in fact, indicates the view which was clicked, view which triggered the call to the toDo method. So here we need to be able to distinguish whether v is the blue button or the pink button because we won't perform the same action for each button. So first I need to retrieve a reference to each button in order to compare V to the two references. So let's create two buttons, button_blue, and button_pink, In the onCreate method I will use the findViewById method to associate the button_blue to the view that we've defined in the XML file. findViewById I use the ID that we defined in the XML file: button_blueInvisible. The findViewById method returns a View, a generic view, and instead we want something more specific, a Button. So I just need to cast the result to a Button and I do the same for the second button, button_pink, so that will be a Button, and I get it by using its ID which was button_pinkPanther. Ok, now that I have my two references, I am able to compare v to one of these references. So if v.equals(button_blue), then I'll do the invisibility stuff. And now if v equals the pink button. then I'll do the pop-up thing. Okay, now let me show you how to turn a view invisible. In fact it's really easy. Each view proposes a method called setVisibility, and of course there are two possible values: It's either visible or invisible. So when the blue button is clicked, it'll call the toDo method, with a reference to the blue button itself. So this test will succeed, and the visibility of the button will be changed to invisible. Now what about the pop up? In Android, the pop-up are provided by a class named "Toast". And this class defines a static method called "makeText". So you need to provide the context of this toast. Then the second parameter is the text that you want to be displayed in the pop up. So in our case it's "to do... To do. To do." And the third and last parameter indicates the duration you want the pop up to be displayed on the screen. So you've got two predefined values, it's either a short time for a short interval or a long one. Let me put a short one. Okay, now our toast is ready, but it won't display on the screen until I call the "show" method. Okay, now our code is complete. Let's try it again on the emulator. Now if I click the pink button, I've got my little pop up displaying at the bottom of the screen for a short period of time. And if I click the blue button, it disappears. Now let me show you a different solution to add an action to a button.
