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 a Simple Android App with Java!
Preview
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
In this video we'll make our first changes to the simple layout file that was automatically created for us.
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
Okay, that's enough about the tools.
0:00
Let's do something.
0:02
We'll talk more about the tools
as we work through this project.
0:03
I'll make sure you understand everything
you need to know to build this app.
0:07
There are two main things we'll
work with in Android Apps.
0:10
The first is the layout of the screen.
0:14
For this, we'll use the design view,
0:16
which allows us to visually manipulate
the layout by dragging and dropping.
0:19
It's pretty helpful.
0:23
We can also manipulate the layout in code.
0:24
And we'll see how to do that as well.
0:26
The other main thing we'll work on is
how our app works behind the scenes.
0:29
That's where we write Java code that
does things like pick a random fun fact.
0:32
I'll explain everything you need to know.
0:37
But if you get confused, remember,
check the teacher's notes for
0:39
help and feel free to ask about
anything in the community.
0:42
Take a look at these mock-ups from
one of our designers at Treehouse.
0:46
You can find this image
in the teacher's notes.
0:50
This shows what the app should
look like when we're finished.
0:52
We'll have text at the top that says,
Did you know?
0:55
Then we'll have one of the fun
facts displayed in the middle.
0:58
And then at the bottom, we'll have
a button to show another fun fact.
1:00
Notice how we're also going to change
the background color for each fact.
1:05
We'll even give our app
an icon to match this one.
1:09
This app is relatively simple,
but it's still a lot of work.
1:12
We're going to tackle it piece by
piece to make it easy to understand.
1:16
Let's start by making
the simplest version possible.
1:20
This is something that
developers do all the time.
1:23
Starting with something simple lets us
make sure the app works as expected.
1:26
Then we can refine it and
make it look more and
1:30
more like what we see
here in the mock-ups.
1:32
We'll start by changing the layout to
show the Did you know text at the top.
1:35
Then we'll build on this piece by piece
to turn it into the full app we see here.
1:39
Before we get started, just to make
things a little easier to see,
1:44
I'm going to close the project pane and
enter full-screen mode.
1:48
We should already have
our layout file open.
1:53
Our app is created just
with one simple screen.
1:55
And the layout of that screen
is defined right here.
1:59
I mentioned that this code is in
a language called XML, which stands for
2:02
eXtensible Markup Language.
2:07
If you're familiar with HTML,
you'll notice it has some similarities.
2:09
The good news is there's a design view for
this layout as well.
2:13
Remember that we can switch back and
forth between XML, text, and
2:16
the design view by clicking
on these tabs down here.
2:20
Changes we make in the design view
update the XML code and vice versa.
2:27
It's up to us to choose
how to edit the file.
2:32
Often, it may be easier to
work visually like this.
2:35
But sometimes,
2:38
we might want the more precise control
we get by editing the XML code directly.
2:39
All right, so
we already have a TextView on our screen.
2:43
Let's change the text to say Did you know,
just like in the mock-ups.
2:47
Click directly on the Hello World
text to select it.
2:51
Then, on the right, we can see a bunch
of properties for this TextView.
2:56
In the middle,
we can find a property called text.
2:59
And it's set to Hello World,
just like we see in the preview.
3:03
Let's delete that and type, Did you know?
3:07
Hit Enter, and there we go.
3:12
Now if we flip to the XML, by using
the text tab, there's our new text.
3:15
We've seen what happens when
we have errors in our code.
3:21
But this yellowish highlighting is what
happens when we have something called
3:24
a warning.
3:28
Warnings aren't as severe as errors.
3:28
We don't have to fix warnings,
but we probably should.
3:31
Errors we do have to fix
before we run the app.
3:35
Now this warning is telling us that
we should use a string resource
3:38
instead of a hard coded string.
3:42
We'll cover how to use string
resources in a later project, so
3:44
we're going to ignore this warning.
3:47
But I encourage you to try and
fix it on your own if you're curious.
3:49
And if you want to ask for
help in the community, please do.
3:53
Also, before we go any further,
3:56
there's one more change we
need to make to our layout.
3:58
Instead of using a constraint layout,
we wanna be using a relative layout.
4:01
So up here at the top,
let's delete this ConstraintLayout bit and
4:06
replace it with RelativeLayout.
4:11
Then let's also delete these
four constraint lines and
4:17
make sure not to delete this closing tag.
4:20
Awesome.
4:27
Finally, let's talk about saving.
4:28
Android Studio will save everything for
you automatically.
4:30
But if you want to explicitly save
a project, you can always go,
4:34
File, Save All, or you can use Cmd+S for
Mac or Ctrl+S for Windows.
4:39
All right, nice work.
4:46
Let's see if you can make that
same change in just the XML.
4:48
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