This course will be retired on July 14, 2025.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Build an Interactive Story App!
You have completed Build an Interactive Story App!
Preview
Next we want to learn about getting text input from a user via a new view called EditText.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up