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