Preview
Video Player
00:00
00:00
Using EditText for Text Input
7:05Next 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