1
00:00:00,000 --> 00:00:04,791
[MUSIC]

2
00:00:04,791 --> 00:00:07,760
We have actually completed
the hardest part of this app.

3
00:00:07,760 --> 00:00:11,224
Getting the data model and architecture
correct can sometimes be the hardest,

4
00:00:11,224 --> 00:00:13,605
most time consuming part
of working on an app.

5
00:00:13,605 --> 00:00:16,920
It's an important balance to find, because
you can design things to death without

6
00:00:16,920 --> 00:00:18,835
ever actually working on something.

7
00:00:18,835 --> 00:00:20,890
You'll need to learn
how you work your best.

8
00:00:20,890 --> 00:00:23,100
But always remember that a little
bit of thought ahead of time,

9
00:00:23,100 --> 00:00:25,010
can save you headaches later on.

10
00:00:25,010 --> 00:00:28,250
I personally love jumping into code,
but I often need to remind myself to

11
00:00:28,250 --> 00:00:31,030
think through things before
I just start typing away.

12
00:00:31,030 --> 00:00:33,350
Anyhow, let's take a look at
our current story page layout.

13
00:00:34,400 --> 00:00:40,196
When we created our StoryActivity, we also
got our layout file activity_story.xml.

14
00:00:40,196 --> 00:00:43,020
Time to add some things inside here.

15
00:00:43,020 --> 00:00:47,790
So remember, we said that each page in our
story will consist of an image, text for

16
00:00:47,790 --> 00:00:49,900
the story, and then two choices,

17
00:00:49,900 --> 00:00:52,910
which we will represent with white
buttons at the bottom like this.

18
00:00:52,910 --> 00:00:56,810
I asked our designer to create images
in a horizontal rectangle shape, so

19
00:00:56,810 --> 00:01:00,520
that we could fill them across the top
of the screen in a consistent manner.

20
00:01:00,520 --> 00:01:03,978
The basic layout will be the image at the
top, the story filling up the middle, and

21
00:01:03,978 --> 00:01:06,200
then our button choices at the bottom.

22
00:01:06,200 --> 00:01:09,260
We are going to practice again
with constraint layouts.

23
00:01:09,260 --> 00:01:12,780
Remember that the key idea in using
constraint layouts is to choose things

24
00:01:12,780 --> 00:01:13,900
to anchor to.

25
00:01:13,900 --> 00:01:16,850
In this case we will be anchoring
to the sides of the screen.

26
00:01:16,850 --> 00:01:20,530
Let's start by adding an image view, which
we will anchor to the top left corner and

27
00:01:20,530 --> 00:01:22,140
extend to the right side of the screen.

28
00:01:22,140 --> 00:01:23,710
It will grow in height as needed for

29
00:01:23,710 --> 00:01:27,350
the image, just like we're doing with
the image on the main title screen.

30
00:01:27,350 --> 00:01:29,980
In fact, why don't you treat
this as a mini challenge.

31
00:01:29,980 --> 00:01:33,290
Pause this video and see if you can
configure it this way yourself.

32
00:01:33,290 --> 00:01:35,230
Okay, let's drag a new image view.

33
00:01:35,230 --> 00:01:38,300
I'll select image over here and
then pull in image view, and

34
00:01:38,300 --> 00:01:40,220
I can drop it anywhere on the screen.

35
00:01:40,220 --> 00:01:43,710
And I'm going to pick a place holder
image, I'll use one of the page images.

36
00:01:43,710 --> 00:01:46,580
Let's use page0 and click OK.

37
00:01:46,580 --> 00:01:48,610
So I wasn't too concerned about
where to drop it on the screen,

38
00:01:48,610 --> 00:01:52,600
because I'm going to align it
with the constraints like this.

39
00:01:52,600 --> 00:01:59,671
Left, top, and right, and then over here
I wanna change all the margins to 0.

40
00:02:02,570 --> 00:02:07,747
And then remember, we want to force
a new calculation of the width with 0dp.

41
00:02:07,747 --> 00:02:11,230
And then you might be wondering, hey why
isn't this filling up the available space.

42
00:02:11,230 --> 00:02:13,460
That's because we haven't
changed adjustViewBounds.

43
00:02:13,460 --> 00:02:16,757
So check that and, there we go,
it pops into place, cool.

44
00:02:16,757 --> 00:02:19,555
I'm also going to select
the scale type to be fitXY again,

45
00:02:19,555 --> 00:02:22,680
although it doesn't change
anything on this view.

46
00:02:22,680 --> 00:02:28,923
And let's change the ID to something
more meaningful like storyimageView.

47
00:02:28,923 --> 00:02:31,430
Let's switch over to the XML view for
a moment.

48
00:02:31,430 --> 00:02:36,240
We just set the source for this image
view to be our drawable image, page0.

49
00:02:36,240 --> 00:02:38,450
But we're actually going
to change the image,

50
00:02:38,450 --> 00:02:40,760
based on whichever story we're viewing.

51
00:02:40,760 --> 00:02:44,380
So we don't want to necessarily hard code
it, like this, it's gonna be dynamic.

52
00:02:44,380 --> 00:02:47,700
However, we do want to show
up in the preview over here.

53
00:02:47,700 --> 00:02:53,050
We can accomplish that by using
the tools prefix, like we see up here.

54
00:02:53,050 --> 00:02:56,500
Any can of attribute that we
prefix with tools like this,

55
00:02:56,500 --> 00:02:59,930
will only show within our
tools within Android Studio.

56
00:02:59,930 --> 00:03:02,860
So it's a nice way to use
placeholder images and text.

57
00:03:02,860 --> 00:03:06,704
I'm going to delete this line and
then type tools:src and

58
00:03:06,704 --> 00:03:12,650
then set it equal to @drawable/page0.

59
00:03:12,650 --> 00:03:14,950
Now if I flip back, we should still
see the image and there we go.

60
00:03:14,950 --> 00:03:17,555
We see it in the Tools, but
if we ran this page right now,

61
00:03:17,555 --> 00:03:21,056
there would be no image there because
we didn't dynamically populate it.

62
00:03:21,056 --> 00:03:25,142
All right, so next, let's add a text
view for the text of this page.

63
00:03:25,142 --> 00:03:29,150
We will position it directly below the
image view and change a few properties.

64
00:03:29,150 --> 00:03:32,800
So here, under All,
we've got a TextView at the very top.

65
00:03:32,800 --> 00:03:36,190
Pull it in here, and
it dropped here in the upper corner.

66
00:03:36,190 --> 00:03:39,820
I'm gonna pull it down and
start to resize it, go to the left.

67
00:03:39,820 --> 00:03:42,540
This one I wanna hook up
right here to the image view.

68
00:03:42,540 --> 00:03:46,180
So it is now constrained to
the bottom of our image view.

69
00:03:46,180 --> 00:03:51,055
Pull that right over,
Change all these margins, actually for

70
00:03:51,055 --> 00:03:54,900
the textView we wanna use
margin of 16 all around it.

71
00:03:54,900 --> 00:03:57,340
That will provide a little
bit of space around the text.

72
00:03:58,460 --> 00:04:02,460
Now the width,
we do want to recalculate with 0dp.

73
00:04:02,460 --> 00:04:06,280
And for the text, let's change that to
more placeholder text in the XML view,

74
00:04:06,280 --> 00:04:07,480
in just a moment.

75
00:04:07,480 --> 00:04:09,150
I wanna bump up the font
size just a little bit.

76
00:04:09,150 --> 00:04:14,113
Right now the default is 14sp, but I
wanna switch that to, let's go with 16sp.

77
00:04:14,113 --> 00:04:16,320
I'm gonna type in a different value, 16sp.

78
00:04:17,670 --> 00:04:22,910
Remember that we use SP instead of DP for
text, because that will take into account

79
00:04:22,910 --> 00:04:28,840
any individual preferences users have set
for how text is displayed on their screen.

80
00:04:28,840 --> 00:04:31,610
So for example, if they want all
text to be a little bit bigger,

81
00:04:31,610 --> 00:04:33,740
the SP settings will
take that into account.

82
00:04:33,740 --> 00:04:37,170
Whereas if we used DP settings,
it would remain consistent,

83
00:04:37,170 --> 00:04:38,699
no matter what their user settings were.

84
00:04:40,420 --> 00:04:41,560
Let's go down here and

85
00:04:41,560 --> 00:04:43,970
let's change one more thing,
this, I'm gonna pull this over.

86
00:04:43,970 --> 00:04:45,990
This says lineSpacingExtra,

87
00:04:45,990 --> 00:04:51,130
this creates a little bit of room between
lines of text, so let's set this to 8sp.

88
00:04:51,130 --> 00:04:54,770
Pull this back, and
let's switch to the text view.

89
00:04:54,770 --> 00:05:00,042
And here I want to add, instead of this
android:text, this hard-coded text,

90
00:05:00,042 --> 00:05:05,254
let's switch this to tools and let's plug
in one of our strings from the story.

91
00:05:05,254 --> 00:05:10,070
So type @string/, and let's use page0,
and see how it looks.

92
00:05:11,650 --> 00:05:15,050
Cool, okay lets take a short break here
and then we'll come back to finish

93
00:05:15,050 --> 00:05:18,500
the rest of the layout including a few
updates to our main title layout.