Using EditText for Text Input7:05 with Ben Jakuben
Next we want to learn about getting text input from a user via a new view called EditText.
Going back to our design view. 0:00 We next want to add a text input field and a button here at the bottom of the screen. 0:02 The constraint layout we are using is a view group. 0:07 A container of views that fills our whole screen. 0:10 We can then position items inside it, relative to its edges or to each other. 0:12 And we can add additional constraints like, for example, 0:16 making the height of one view a ratio of another. 0:19 We can use this kind of positioning to make sure that our app scales well to all 0:22 sorts of screen sizes, even tablets. 0:25 The key idea behind using a constraint layout is to pick anchor points that you 0:27 know will be available on most or all devices. 0:31 So the four sides of the screen are good ones. 0:34 With our image anchored to the top, 0:36 we can safely anchor the other stuff at the bottom of the screen. 0:38 So let's start with the bottom most item first, the button. 0:41 So here in the pallet, we want to select Widgets. 0:44 And then we can find a button. 0:46 Now I occasionally have trouble dragging things from the pallet 0:48 into the constraint layout. 0:51 But looks like it's gonna work this time. 0:52 So I'm gonna take this all the way down to the bottom and 0:53 drop it somewhere down here. 0:56 It doesn't have to be perfect. 0:56 And look at that. 0:58 It dropped in the upper left. 0:58 So now I'm going to move it again. 1:00 Just like we did with our image view, we want to drag the edges over to the side. 1:03 So we'll take the button all the way to the left. 1:07 Take the right side all the way to the right. 1:09 We can set these margins to 0. 1:12 And do you remember how we make it stretch to fill the entire available space? 1:13 That's right, we changed the layout width to 0dp to force it to calculate. 1:18 Now for the bottom, we can do the same thing. 1:23 Pull it down, change this margin to 0. 1:25 And we'll leave the height wrap_content. 1:27 Because it will wrap the button itself. 1:29 Okay, so next let's change the ID. 1:32 We'll call this startButton instead. 1:33 And let's change the text of the button. 1:37 Instead of saying button, scroll down a little bit. 1:39 And in all caps let's have this say instead, START YOUR ADVENTURE. 1:45 Let's take a look at the xml behind the scenes to make sure this is positioned 1:52 exactly how I want it to be. 1:55 So if you scroll down, here's our new button. 1:57 And we can see the ID and the text that we just changed. 1:59 Here, if we hover over the text, 2:02 you can see it's the same warning we have about hardcoded strings. 2:03 And wanting to use an @string resource instead. 2:07 Again, more on that in just a moment. 2:10 So the button is positioned at the bottom. 2:11 Because we are constraining the bottom of the button to the bottom of the parent. 2:13 Which again, is the constraint layout, which is the entire screen. 2:18 All right, so back in the design view, we now want a field for user text input. 2:21 In Android, this is called an EditText. 2:27 An EditText simply a text view that is configure to be editable. 2:30 It has all the properties and methods of a regular text view. 2:33 As well as some that are specific to editing text. 2:36 We can find different ones here in the palette, select Text. 2:39 And then from here, you can see a bunch of different 2:42 edit texts that are configured slightly differently. 2:45 They are all basically the same EditText fields. 2:48 But there is a setting to specify what kind of data you expect from the user. 2:50 This is really helpful, 2:53 because it automatically configures the soft keyboard. 2:54 That pops up on the screen to use the most appropriate keys. 2:56 So if we choose a number, for example. 3:00 The number keyboard will show up by default instead of the regular 3:02 letter keyboard. 3:05 We want users to enter their names. 3:06 So let's use the Plain Text one at the top. 3:07 And we can drag it in just above our button. 3:10 Again, it doesn't have to be perfect because we will constrain it, okay. 3:12 I'll grab it from a corner again. 3:16 And right away, you can see a problem that we're going to fix shortly. 3:18 This screen is not big enough to fit an EditText and a button at the bottom. 3:21 That's because my preview is set to a Nexus 4. 3:25 We're going to address that in just a moment. 3:28 But for now, I want to change this to a Nexus 5 instead. 3:29 That gives us enough room, okay? 3:33 So I'm going to pull the left anchor over to the left. 3:34 Pull the right one all the way to the right side, pull the bottom. 3:39 And this time I want to anchor it to the button itself. 3:41 So if I move this around a little bit. 3:44 This is kinda hard. 3:46 You can see when I get the knob for the button, it shifts up a little bit and 3:47 it's blinking. 3:50 Then I can drop it in place. 3:51 Let's take a look at our margins up at the top. 3:54 Let's reset these all to 0. 3:57 And now, it's sitting atop the button. 4:00 And we wanna change the width to 0dp, to force it to span the entire width. 4:03 Let's change this ID to something more appropriate like nameEditText. 4:09 And then down here we have a field called input Type. 4:15 This is what controls the type of data that we want to see in the EditText. 4:17 So this is set to textPersonName, which is good. 4:22 If we click on it, we can see a bunch of different settings. 4:24 A lot of these are represented over here, but there are some additional ones too. 4:27 We actually want to select textCapWords instead. 4:30 By selecting this, it will start the keyboard with 4:33 capital letters selected instead of regular lower case. 4:36 And next, let's get rid of the text name that's showing up by default. 4:39 So we can just clear this text field out, hit Tab, and now it's gone. 4:44 But now the problem is that the user doesn't know that anything is there. 4:49 So, there is an outline at the bottom of an EditText, but it can be hard to see. 4:52 What we typically do with an EditText is either provide a label for it. 4:55 Or we provide a hint text within the EditText itself. 4:59 So, let's do that. 5:02 We have to scroll down to the bottom, and select View all properties. 5:03 And then this is an alphabetical list of all the properties available for 5:08 the view for this EditText. 5:11 So if we scroll down, we can find hint down here. 5:12 And we can type in anything we want. 5:16 Let's type, Enter your name. 5:18 Now, auto-complete is trying to get me to use the at name string resource. 5:20 I hit Esc and ignore it. 5:24 And then tab out, and 5:26 now we can see the hint in grayed out text, that says Enter your name. 5:28 Now if we left this just as is then the user could type and type and type. 5:31 And fill up this EditText and have a really long name. 5:35 We wanna limit it somehow though. 5:38 So if we scroll out a little bit further, 5:40 we can come to a property called maxLength. 5:41 Let's set this to 30, which still leaves room for a long name but 5:44 doesn't let them go crazy. 5:47 All right before we run this, 5:49 I want to talk briefly about how our EditText is positioned above the button. 5:50 Okay so here we have the button and below it is the EditText. 5:54 Now just because the EditText is below this in the XML view, 5:58 doesn't mean it's below it on the screen. 6:01 It will show up above the button because of the relative position parameters. 6:04 And we can see that here, 6:07 we're constraining the bottom of our EditText to the top of the start button. 6:09 All right, so we should be in pretty good shape. 6:13 Let's run this and see how it looks. 6:15 Okay, once it loads we've got our EditText here. 6:18 And if I start typing, my keyboard is hooked up so 6:21 I can just type from my keyboard directly. 6:25 But I can also tap on it and here we see the soft keyboard. 6:27 It starts out with the capital letter and then automatically flips to lower keys. 6:30 Also notice how when the soft keyboard appeared, 6:34 the entire screen was shifted up. 6:37 So that the EditText stays right above the keyboard, and 6:38 the rest scrolls out of view. 6:40 That's really helpful. 6:42 All right, so to recap. 6:43 Getting comfortable with how to lay things out relative to each other is a little bit 6:44 of an art form. 6:48 But if you have any trouble, just let us know by asking a community question and 6:48 we can help you on your way. 6:52 And remember to check the constraint layout documentation on the Android 6:53 developer site for helpful examples and explanations. 6:56 We're off to a really good start here. 6:59 Let's take a little break, and 7:01 in the next session we'll make a few more changes to this user interface. 7:02
You need to sign up for Treehouse in order to download course files.Sign up