1
00:00:00,118 --> 00:00:02,477
Okay, that's enough about the tools.

2
00:00:02,477 --> 00:00:03,956
Let's do something.

3
00:00:03,956 --> 00:00:07,630
We'll talk more about the tools
as we work through this project.

4
00:00:07,630 --> 00:00:10,610
I'll make sure you understand everything
you need to know to build this app.

5
00:00:10,610 --> 00:00:14,500
There are two main things we'll
work with in Android Apps.

6
00:00:14,500 --> 00:00:16,830
The first is the layout of the screen.

7
00:00:16,830 --> 00:00:19,010
For this, we'll use the design view,

8
00:00:19,010 --> 00:00:23,110
which allows us to visually manipulate
the layout by dragging and dropping.

9
00:00:23,110 --> 00:00:24,640
It's pretty helpful.

10
00:00:24,640 --> 00:00:26,430
We can also manipulate the layout in code.

11
00:00:26,430 --> 00:00:29,150
And we'll see how to do that as well.

12
00:00:29,150 --> 00:00:32,980
The other main thing we'll work on is
how our app works behind the scenes.

13
00:00:32,980 --> 00:00:37,260
That's where we write Java code that
does things like pick a random fun fact.

14
00:00:37,260 --> 00:00:39,290
I'll explain everything you need to know.

15
00:00:39,290 --> 00:00:42,280
But if you get confused, remember,
check the teacher's notes for

16
00:00:42,280 --> 00:00:45,690
help and feel free to ask about
anything in the community.

17
00:00:46,940 --> 00:00:50,260
Take a look at these mock-ups from
one of our designers at Treehouse.

18
00:00:50,260 --> 00:00:52,404
You can find this image
in the teacher's notes.

19
00:00:52,404 --> 00:00:55,430
This shows what the app should
look like when we're finished.

20
00:00:55,430 --> 00:00:58,800
We'll have text at the top that says,
Did you know?

21
00:00:58,800 --> 00:01:00,890
Then we'll have one of the fun
facts displayed in the middle.

22
00:01:00,890 --> 00:01:05,590
And then at the bottom, we'll have
a button to show another fun fact.

23
00:01:05,590 --> 00:01:09,700
Notice how we're also going to change
the background color for each fact.

24
00:01:09,700 --> 00:01:12,636
We'll even give our app
an icon to match this one.

25
00:01:12,636 --> 00:01:16,500
This app is relatively simple,
but it's still a lot of work.

26
00:01:16,500 --> 00:01:20,340
We're going to tackle it piece by
piece to make it easy to understand.

27
00:01:20,340 --> 00:01:23,540
Let's start by making
the simplest version possible.

28
00:01:23,540 --> 00:01:26,330
This is something that
developers do all the time.

29
00:01:26,330 --> 00:01:30,216
Starting with something simple lets us
make sure the app works as expected.

30
00:01:30,216 --> 00:01:32,712
Then we can refine it and
make it look more and

31
00:01:32,712 --> 00:01:35,240
more like what we see
here in the mock-ups.

32
00:01:35,240 --> 00:01:39,540
We'll start by changing the layout to
show the Did you know text at the top.

33
00:01:39,540 --> 00:01:43,710
Then we'll build on this piece by piece
to turn it into the full app we see here.

34
00:01:44,780 --> 00:01:48,270
Before we get started, just to make
things a little easier to see,

35
00:01:48,270 --> 00:01:51,138
I'm going to close the project pane and
enter full-screen mode.

36
00:01:53,500 --> 00:01:55,752
We should already have
our layout file open.

37
00:01:55,752 --> 00:01:59,040
Our app is created just
with one simple screen.

38
00:01:59,040 --> 00:02:01,490
And the layout of that screen
is defined right here.

39
00:02:02,520 --> 00:02:07,060
I mentioned that this code is in
a language called XML, which stands for

40
00:02:07,060 --> 00:02:09,210
eXtensible Markup Language.

41
00:02:09,210 --> 00:02:12,680
If you're familiar with HTML,
you'll notice it has some similarities.

42
00:02:13,690 --> 00:02:16,612
The good news is there's a design view for
this layout as well.

43
00:02:16,612 --> 00:02:20,566
Remember that we can switch back and
forth between XML, text, and

44
00:02:20,566 --> 00:02:23,686
the design view by clicking
on these tabs down here.

45
00:02:27,683 --> 00:02:32,740
Changes we make in the design view
update the XML code and vice versa.

46
00:02:32,740 --> 00:02:35,040
It's up to us to choose
how to edit the file.

47
00:02:35,040 --> 00:02:38,740
Often, it may be easier to
work visually like this.

48
00:02:38,740 --> 00:02:39,617
But sometimes,

49
00:02:39,617 --> 00:02:43,755
we might want the more precise control
we get by editing the XML code directly.

50
00:02:43,755 --> 00:02:47,231
All right, so
we already have a TextView on our screen.

51
00:02:47,231 --> 00:02:51,680
Let's change the text to say Did you know,
just like in the mock-ups.

52
00:02:51,680 --> 00:02:54,220
Click directly on the Hello World
text to select it.

53
00:02:56,150 --> 00:02:59,780
Then, on the right, we can see a bunch
of properties for this TextView.

54
00:02:59,780 --> 00:03:02,830
In the middle,
we can find a property called text.

55
00:03:03,970 --> 00:03:07,970
And it's set to Hello World,
just like we see in the preview.

56
00:03:07,970 --> 00:03:10,289
Let's delete that and type, Did you know?

57
00:03:12,725 --> 00:03:15,311
Hit Enter, and there we go.

58
00:03:15,311 --> 00:03:21,777
Now if we flip to the XML, by using
the text tab, there's our new text.

59
00:03:21,777 --> 00:03:24,670
We've seen what happens when
we have errors in our code.

60
00:03:24,670 --> 00:03:28,420
But this yellowish highlighting is what
happens when we have something called

61
00:03:28,420 --> 00:03:28,998
a warning.

62
00:03:28,998 --> 00:03:31,540
Warnings aren't as severe as errors.

63
00:03:31,540 --> 00:03:35,230
We don't have to fix warnings,
but we probably should.

64
00:03:35,230 --> 00:03:37,190
Errors we do have to fix
before we run the app.

65
00:03:38,870 --> 00:03:42,290
Now this warning is telling us that
we should use a string resource

66
00:03:42,290 --> 00:03:44,550
instead of a hard coded string.

67
00:03:44,550 --> 00:03:47,820
We'll cover how to use string
resources in a later project, so

68
00:03:47,820 --> 00:03:49,640
we're going to ignore this warning.

69
00:03:49,640 --> 00:03:53,085
But I encourage you to try and
fix it on your own if you're curious.

70
00:03:53,085 --> 00:03:55,470
And if you want to ask for
help in the community, please do.

71
00:03:56,620 --> 00:03:58,780
Also, before we go any further,

72
00:03:58,780 --> 00:04:01,620
there's one more change we
need to make to our layout.

73
00:04:01,620 --> 00:04:06,910
Instead of using a constraint layout,
we wanna be using a relative layout.

74
00:04:06,910 --> 00:04:11,372
So up here at the top,
let's delete this ConstraintLayout bit and

75
00:04:11,372 --> 00:04:13,689
replace it with RelativeLayout.

76
00:04:17,628 --> 00:04:20,940
Then let's also delete these
four constraint lines and

77
00:04:20,940 --> 00:04:23,417
make sure not to delete this closing tag.

78
00:04:27,257 --> 00:04:28,275
Awesome.

79
00:04:28,275 --> 00:04:30,850
Finally, let's talk about saving.

80
00:04:30,850 --> 00:04:34,240
Android Studio will save everything for
you automatically.

81
00:04:34,240 --> 00:04:39,719
But if you want to explicitly save
a project, you can always go,

82
00:04:39,719 --> 00:04:45,720
File, Save All, or you can use Cmd+S for
Mac or Ctrl+S for Windows.

83
00:04:46,720 --> 00:04:48,620
All right, nice work.

84
00:04:48,620 --> 00:04:51,620
Let's see if you can make that
same change in just the XML.