Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Adding a Button4:31 with Ben Deitch
Continuing with Views and Widgets, let's see how to add a Button to our layout!
All right, now it's my turn. 0:00 I'm going to grab a button from over here in the palette under the widgets category, 0:02 and then drag it to the bottom of the screen. 0:07 And it looks like I'm getting that same mismatch between the orange box and 0:08 my button so I'm just going to place it and then re-pick it up. 0:13 Now I'm looking for 0:17 a solid green line along the bottom to show that I'm aligned to the bottom edge. 0:18 And a vertical dotted line going up the center 0:23 to show that I'm centered horizontally. 0:26 Once I see both of these, I'll drop the button in place. 0:28 Looks good, but we should probably change the word "button" to something else. 0:32 Just like a text view, buttons also have a text property. 0:36 Let's change this text to say, show another fun fact. 0:40 Hit Enter and there is the text. 0:49 Now we'd like our button to stretch to take up the whole width of the screen. 0:51 We can do this by simply clicking on this button up here. 0:55 This toggles a property of the button called LayoutWidth. 0:58 If we look at the top of the properties pane we can see the value change. 1:02 It's currently set to match_parent, which matches the size of its button to its 1:05 parent, which in this case is the whole screen, but if I press the button again. 1:10 It changes to wrap content, which wraps the content of the button It makes it as 1:16 small as possible based on the content that's inside. 1:21 Let's flip that back to match parent. 1:25 Cool, this may not be very pretty yet, but this is the basic structure for 1:27 our screen. 1:31 Let's do one more thing before we make the button actually do something. 1:33 Let's switch to the XML view, by clicking on the text tab at the bottom. 1:36 Notice how we have XML elements called TextView here and 1:41 here that represent our two text views. 1:45 Then down here we have a new button XML element that represents our button. 1:49 When we drag and drop a view onto the screen from the design tab 1:55 this is the kind of XML that gets produced to represent that view. 1:58 If we wanted to, we could have typed this all out instead of dragging and 2:02 dropping to the screen. 2:06 Let's take a look at the second text view, the one with the fun fact. 2:07 It has a property called ID, which is set to @+id/textView. 2:11 This part after the slash, is the actual id textView. 2:18 We can also see that an ID was generated for a button. 2:23 @+id/button, the @+id/ part 2:27 is the prefix that let's Android know that this is an id we can use in the system. 2:33 The id itself is also important because it's what we'll use to refer to these 2:38 views from within our code. 2:42 These generic ids will work, but 2:44 we should really strive to name things more descriptively. 2:46 It will help us make more sense of our code when we revisit it later. 2:48 We can just change them in here. 2:52 But if we do, we'll also need to update every reference to these ids in our code. 2:54 Now, there aren't yet any other references to these IDs. 2:59 But it could be big deal in a more complex project. 3:04 For that reason, it's a good practice to change IDs and 3:07 most other things by doing a refactoring. 3:10 Refactoring is awesome, because we can rename our ID in one place and 3:13 Android Studio will take care of updating every reference to that ID automatically. 3:17 Let's right click on the ID for our fun fact text view and 3:23 then select Refactor and then Rename. 3:26 Then let's change the ID from textView to facttextView. 3:31 Be sure to leave the @+id/prefix and then hit Enter to rename it. 3:36 Let's also change the ID of our button. 3:43 Right click on its ID, select refactor, then rename, 3:46 and let's name it showFactButton 3:51 then hit Enter again, and we're back to the XML view. 3:57 Awesome, let's run our project to make sure that everything looks 4:00 okay in the emulator. 4:05 And this time let's check the Use same selection for future launches check box so 4:06 we aren't presented with this dialog each time we want to run our app. 4:11 Then hit OK to run it. 4:15 All right, we're looking good. 4:21 Okay, so it doesn't do much but 4:23 we can tap on our button down here to our heart's content. 4:25
You need to sign up for Treehouse in order to download course files.Sign up