This course will be retired on June 1, 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
Preview
Start a free Courses trial
to watch this video
Continuing with Views and Widgets, let's see how to add a Button to our layout!
Documentation
- UI Overview
- View
- Supporting Different Densities - Excellent Video
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
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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up