1
00:00:01,350 --> 00:00:06,840
Back in this video, we are going to see how we can set such a background while setting the background

2
00:00:06,840 --> 00:00:10,140
would be easy, but we are also going to be able to draw on top.

3
00:00:10,500 --> 00:00:15,030
You can see here we have this little background, we can change to size still and all of that.

4
00:00:15,360 --> 00:00:21,060
And now we can try to draw the Eiffel Tower and stuff like that.

5
00:00:21,360 --> 00:00:21,750
All right.

6
00:00:21,900 --> 00:00:24,980
So let's go ahead and implement this feature.

7
00:00:24,990 --> 00:00:29,470
And what we're going to require for that will be a frame, a layout.

8
00:00:29,490 --> 00:00:36,540
So if you want to have multiple layers on top of each other, then you are going to require a frame

9
00:00:36,540 --> 00:00:37,120
layout.

10
00:00:37,160 --> 00:00:42,660
OK, so what I'm going to do is I'm going to go all the way up to the constraint layout highest level

11
00:00:42,660 --> 00:00:47,250
here on top of my drawing view, and I'm going to create a new frame layout.

12
00:00:47,640 --> 00:00:49,650
Now this frame layout will need the width.

13
00:00:49,650 --> 00:00:54,930
I'm going to use the same values that I had here and actually let me cut them out here because the frame

14
00:00:54,930 --> 00:01:02,040
layout is basically going to replace, so to speak, my drawing view, OK, which also means that I

15
00:01:02,040 --> 00:01:11,550
can just go ahead and take all of the constraints here and put them inside of the frame layout properties

16
00:01:11,550 --> 00:01:11,790
here.

17
00:01:12,150 --> 00:01:12,570
All right.

18
00:01:13,320 --> 00:01:15,240
So this is our frame layout.

19
00:01:15,240 --> 00:01:18,960
Accordingly, of course, we can now put our drawing view in there.

20
00:01:19,420 --> 00:01:20,860
Let's look at this a little more.

21
00:01:20,880 --> 00:01:23,940
So our frame layout will have multiple layers.

22
00:01:24,270 --> 00:01:29,490
One of the layers will be the drawing view, and then I will have another layer in here, which will

23
00:01:29,490 --> 00:01:30,480
be an image view.

24
00:01:31,560 --> 00:01:33,510
OK, so let's create that image for you.

25
00:01:33,540 --> 00:01:40,470
It will match the parent and matched apparent in both directions as this image is inside of a frame

26
00:01:40,470 --> 00:01:40,860
layout.

27
00:01:40,860 --> 00:01:44,160
I don't need to add all of this constraint stuff, which is pretty handy.

28
00:01:44,610 --> 00:01:50,280
Then the frame layout is something that I want to be able to access.

29
00:01:50,430 --> 00:01:53,400
And in order to access it, I need to have an idea.

30
00:01:53,520 --> 00:02:01,440
So let's call this one f l drawing view container because this is basically just a container.

31
00:02:01,680 --> 00:02:03,960
That frame layout itself is not going to show anything.

32
00:02:03,960 --> 00:02:08,850
It's just like a linear layout or the constraint layout, really just a container which contains all

33
00:02:08,850 --> 00:02:10,500
of the individual items.

34
00:02:10,949 --> 00:02:15,720
So now I'm going to add a little bit of padding as well because I want to have a little bit of distance

35
00:02:16,110 --> 00:02:17,220
on the edges here.

36
00:02:17,250 --> 00:02:21,240
You can see there is wide little while you can barely see it, it's just one density pixel.

37
00:02:21,450 --> 00:02:29,400
But this will just make a little distance between the content of the frame layout and the frame layout

38
00:02:29,400 --> 00:02:30,090
position itself.

39
00:02:30,600 --> 00:02:38,070
So then I need to assign a background because I want this frame layout to have a beautiful little French

40
00:02:38,430 --> 00:02:41,730
Paris city view background kind of thing.

41
00:02:42,120 --> 00:02:44,820
And therefore, I'm just going to use this image.

42
00:02:44,820 --> 00:02:47,430
Let me draw that in here or copy that in here.

43
00:02:47,670 --> 00:02:49,440
This will be the image that I'm going to use.

44
00:02:49,650 --> 00:02:50,070
All right.

45
00:02:50,490 --> 00:02:55,800
And I'm going to set that image as the background for my frame layout.

46
00:02:56,340 --> 00:02:58,950
Now that by itself is nice and all the.

47
00:03:01,030 --> 00:03:08,140
Top to bottom of is still fine, and here this one will, of course, not be fined any more because

48
00:03:08,140 --> 00:03:13,180
it needs to be at the bottom of the drawing view container.

49
00:03:13,750 --> 00:03:19,720
So now there's kids drawing view needs to be adjusted because, well, it's unhappy, right?

50
00:03:19,720 --> 00:03:24,670
And it's unhappy because it doesn't have a whiff and it doesn't have a height.

51
00:03:24,820 --> 00:03:29,950
So it's a required property, so we need to assigned with as well as the height.

52
00:03:30,310 --> 00:03:34,720
You see, it says required if you hover over here, see required.

53
00:03:35,350 --> 00:03:40,540
OK, so we need to add those and they're going to be much apparent in both directions.

54
00:03:41,020 --> 00:03:46,360
Now the background here, in order to see it for now, will be a layer.

55
00:03:46,360 --> 00:03:52,480
So I'm going to add a little layer to it, which will be hash Haiti.

56
00:03:53,740 --> 00:04:00,940
And six of this will create this gray layer, which will be on top of the imagery that we're going to

57
00:04:00,940 --> 00:04:01,630
draw next.

58
00:04:02,080 --> 00:04:05,380
And this layer will be on top of this image view here.

59
00:04:05,860 --> 00:04:08,060
So let's design this image for you.

60
00:04:08,080 --> 00:04:13,170
So first of all, it needs an I.D. because I want to be able to access it if I don't add an ID.

61
00:04:13,870 --> 00:04:16,120
It will not be something that I can change.

62
00:04:16,180 --> 00:04:23,110
So let's call it Ivy background so that we can later on selected manually from our folder on the phone

63
00:04:23,110 --> 00:04:25,810
and just select an image that we want to use here.

64
00:04:26,740 --> 00:04:34,360
Then I'm going to scale the image and I'm going to scale it towards the center and crop it.

65
00:04:34,510 --> 00:04:40,390
So as you see here, it just cropping the image, even though the image itself looks very different.

66
00:04:40,400 --> 00:04:45,610
So let me go over to the image and I believe I have to go here.

67
00:04:45,790 --> 00:04:50,470
All right, a close, did you see just takes this center part here and drops the rest?

68
00:04:50,590 --> 00:04:54,160
So that's what the center crop option of scale type does for us.

69
00:04:54,910 --> 00:05:00,970
OK, so now that we have that, I also want to set a source for this.

70
00:05:01,330 --> 00:05:06,760
So here I source for this image view as RC, which will be this image.

71
00:05:07,300 --> 00:05:12,040
And actually the background here, I realized that this background shouldn't be the image.

72
00:05:12,580 --> 00:05:18,310
The background of the frame layout itself should be the layout that we had before for the drawing view,

73
00:05:18,730 --> 00:05:25,900
which was the background drawing view layout which we created, which was basically just this white

74
00:05:26,140 --> 00:05:30,400
background which has this regular shape and the little stroke.

75
00:05:30,850 --> 00:05:34,550
OK, so there's just this background drawing view layout.

76
00:05:35,230 --> 00:05:40,810
So what we have now is a frame layout which has a background, which is this drawing you layout, then

77
00:05:40,810 --> 00:05:43,900
an image view which is inside of it, which just uses this image.

78
00:05:44,170 --> 00:05:48,760
And then on top of that, in terms of layers, which is going to be the top layer.

79
00:05:48,760 --> 00:05:54,970
So the one that we see as as most so to speak will be our drawing view, which will have this grayish

80
00:05:54,970 --> 00:05:57,760
color on top of it, which will make it a little hazy.

81
00:05:58,150 --> 00:06:00,430
OK, so let's look at this real quick.

82
00:06:01,750 --> 00:06:08,170
And we will see we have the background as well as this hazy grayish thingy around it or on top of it.

83
00:06:08,500 --> 00:06:12,130
And you can, of course, get rid of that if you don't want to have that grayish thing.

84
00:06:12,370 --> 00:06:17,110
But I just want to have it on the canvas so that we can see it better, that we actually have a canvas

85
00:06:17,110 --> 00:06:17,350
here.

86
00:06:17,560 --> 00:06:18,050
OK.

87
00:06:18,070 --> 00:06:26,710
So let me select the yellow color here and you can see what my mouse I'm not able to draw straight lines

88
00:06:26,710 --> 00:06:29,980
or even like slightly curved lines.

89
00:06:30,430 --> 00:06:32,320
So this is my Eiffel Tower now.

90
00:06:32,350 --> 00:06:33,190
Beautiful, isn't it?

91
00:06:34,120 --> 00:06:41,530
So anyways, so that's going to be it for this video and by the way, in case you had a property called

92
00:06:41,530 --> 00:06:50,230
layout margin bottom here of A2DP from an earlier stage of this course, you can just get rid of this

93
00:06:50,230 --> 00:06:52,750
because otherwise it would have a different layout.

94
00:06:52,750 --> 00:06:57,670
It would just look slightly differently, and it wouldn't work with our current structure that we have

95
00:06:57,670 --> 00:06:58,270
defined.

96
00:06:58,630 --> 00:07:03,160
So get rid of it and then your frame layout will look great.

97
00:07:05,820 --> 00:07:06,240
All right.

98
00:07:06,450 --> 00:07:07,830
So that's it for this video.

99
00:07:07,950 --> 00:07:08,940
See you in the next one.