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

Build a Simple Android App with Kotlin

Well done!

You have completed Build a Simple Android App with Kotlin!

Sign up for Treehouse Back to Library
Preview
Video Player
00:00
00:00
00:00
  1. 2x 2x
  2. 1.75x 1.75x
  3. 1.5x 1.5x
  4. 1.25x 1.25x
  5. 1.1x 1.1x
  6. 1x 1x
  7. 0.75x 0.75x
  8. 0.5x 0.5x
Use Up/Down Arrow keys to increase or decrease volume.

Adding a Button

4: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