Adding a Button4:30 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, and 0:02 then drag it to the bottom of the screen. 0:05 I'm looking for a solid green line along the bottom to show that I'm aligned to 0:10 the bottom edge, and 0:13 a vertical dotted line going up the center to show that I'm centered horizontally. 0:14 Once I see both of these, I'll drop the button in place. 0:19 Looks good, but we should probably change the word button to something else. 0:22 Just like a text view, buttons also have a text property. 0:28 Let's find this button's text property in the Properties pane, And 0:31 then change it to say show another fun fact. 0:38 Hit Enter and there's the text. 0:43 Now we'd like our button to stretch to take up the whole width of the screen. 0:46 We can do this by simply clicking on this button up here. 0:51 This toggles a property of the button called layout width. 0:55 If we look at the top of the Properties pane, we can see the value change. 0:59 It's currently set to match parent, but if I press the button again 1:02 it changes to wrap content, which wraps the content of the button. 1:07 It makes it as small as possible based on the content that's inside. 1:11 Let's flip that back to match parent. 1:16 Cool, this may not be very pretty yet, but this is the basic structure for 1:18 our screen. 1:22 Let's do one more thing before we make the button actually do something. 1:23 Let's switch to the XML view by clicking on the Text tab at the bottom. 1:28 Notice that we have the XML elements called text view here and 1:33 here that represent our two text views. 1:37 Then down here we have a new button XML element that represents our button. 1:40 When we drag and drop a view onto the screen from the Design tab, 1:46 this is kind of XML that gets produced to represent that view. 1:50 If we wanted to, we could have typed this all out instead of dragging and 1:54 dropping to the screen. 1:57 Let's take a look at this second text view, the one with the fun fact. 1:59 It has a property called id, which for me is set to @+id/textView4. 2:04 This part after the slash is the actual ID. 2:10 We can also see that an ID was generated for a button @+id/button. 2:16 The @+id/ part is the prefix that lets 2:22 Android know that this is an ID we can use in the system. 2:26 The idea itself is also important because it's what we'll use to refer to these 2:31 views from within our code. 2:35 These generic IDs will work, but 2:36 we should really strive to name things more descriptively. 2:40 It will help us make sense of our code when we revisit it later. 2:43 We can just change them in here, but 2:47 if we do we'll also need to update every reference to the IDs in our code. 2:49 Now there aren't yet any other references to these IDs, but 2:55 it could be a big deal in a more complex project. 2:58 For that reason, it's a good practice to change IDs and 3:01 most other things by doing a refactoring. 3:05 Refactoring is awesome because we can rename our ID in one place, and 3:08 Android Studio will take care of updating every other reference to that ID 3:12 automatically. 3:16 Let's right click on the ID for our fun fact text view, 3:18 and then select Refactor and then Rename. 3:21 Then let's change the ID from textView4 to factTextView. 3:26 Be sure to leave the @+id/ prefix and then hit Enter to rename it. 3:34 Let's also change the ID of our button. 3:40 Right click on its ID, select Refactor, then Rename, and 3:43 let's name it, showFactButton. 3:48 Then hit Enter again, and we're back to the XML view. 3:54 Awesome, let's run our project to make sure that everything looks okay on 3:59 the emulator. 4:03 And this time let's check the use same selection for future launches box so 4:06 we aren't presented with this dialogue each time we want to run our app. 4:10 Then hit OK to run it. 4:16 All right, we're looking good. 4:19 Okay, so it doesn't do much, but 4:22 we can tap on our button down here to our hearts content. 4:23
You need to sign up for Treehouse in order to download course files.Sign up