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