Back in this video, we are going to see how we can set such a background while setting the background
would be easy, but we are also going to be able to draw on top.
You can see here we have this little background, we can change to size still and all of that.
And now we can try to draw the Eiffel Tower and stuff like that.
All right.
So let's go ahead and implement this feature.
And what we're going to require for that will be a frame, a layout.
So if you want to have multiple layers on top of each other, then you are going to require a frame
layout.
OK, so what I'm going to do is I'm going to go all the way up to the constraint layout highest level
here on top of my drawing view, and I'm going to create a new frame layout.
Now this frame layout will need the width.
I'm going to use the same values that I had here and actually let me cut them out here because the frame
layout is basically going to replace, so to speak, my drawing view, OK, which also means that I
can just go ahead and take all of the constraints here and put them inside of the frame layout properties
here.
All right.
So this is our frame layout.
Accordingly, of course, we can now put our drawing view in there.
Let's look at this a little more.
So our frame layout will have multiple layers.
One of the layers will be the drawing view, and then I will have another layer in here, which will
be an image view.
OK, so let's create that image for you.
It will match the parent and matched apparent in both directions as this image is inside of a frame
layout.
I don't need to add all of this constraint stuff, which is pretty handy.
Then the frame layout is something that I want to be able to access.
And in order to access it, I need to have an idea.
So let's call this one f l drawing view container because this is basically just a container.
That frame layout itself is not going to show anything.
It's just like a linear layout or the constraint layout, really just a container which contains all
of the individual items.
So now I'm going to add a little bit of padding as well because I want to have a little bit of distance
on the edges here.
You can see there is wide little while you can barely see it, it's just one density pixel.
But this will just make a little distance between the content of the frame layout and the frame layout
position itself.
So then I need to assign a background because I want this frame layout to have a beautiful little French
Paris city view background kind of thing.
And therefore, I'm just going to use this image.
Let me draw that in here or copy that in here.
This will be the image that I'm going to use.
All right.
And I'm going to set that image as the background for my frame layout.
Now that by itself is nice and all the.
Top to bottom of is still fine, and here this one will, of course, not be fined any more because
it needs to be at the bottom of the drawing view container.
So now there's kids drawing view needs to be adjusted because, well, it's unhappy, right?
And it's unhappy because it doesn't have a whiff and it doesn't have a height.
So it's a required property, so we need to assigned with as well as the height.
You see, it says required if you hover over here, see required.
OK, so we need to add those and they're going to be much apparent in both directions.
Now the background here, in order to see it for now, will be a layer.
So I'm going to add a little layer to it, which will be hash Haiti.
And six of this will create this gray layer, which will be on top of the imagery that we're going to
draw next.
And this layer will be on top of this image view here.
So let's design this image for you.
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.
It will not be something that I can change.
So let's call it Ivy background so that we can later on selected manually from our folder on the phone
and just select an image that we want to use here.
Then I'm going to scale the image and I'm going to scale it towards the center and crop it.
So as you see here, it just cropping the image, even though the image itself looks very different.
So let me go over to the image and I believe I have to go here.
All right, a close, did you see just takes this center part here and drops the rest?
So that's what the center crop option of scale type does for us.
OK, so now that we have that, I also want to set a source for this.
So here I source for this image view as RC, which will be this image.
And actually the background here, I realized that this background shouldn't be the image.
The background of the frame layout itself should be the layout that we had before for the drawing view,
which was the background drawing view layout which we created, which was basically just this white
background which has this regular shape and the little stroke.
OK, so there's just this background drawing view layout.
So what we have now is a frame layout which has a background, which is this drawing you layout, then
an image view which is inside of it, which just uses this image.
And then on top of that, in terms of layers, which is going to be the top layer.
So the one that we see as as most so to speak will be our drawing view, which will have this grayish
color on top of it, which will make it a little hazy.
OK, so let's look at this real quick.
And we will see we have the background as well as this hazy grayish thingy around it or on top of it.
And you can, of course, get rid of that if you don't want to have that grayish thing.
But I just want to have it on the canvas so that we can see it better, that we actually have a canvas
here.
OK.
So let me select the yellow color here and you can see what my mouse I'm not able to draw straight lines
or even like slightly curved lines.
So this is my Eiffel Tower now.
Beautiful, isn't it?
So anyways, so that's going to be it for this video and by the way, in case you had a property called
layout margin bottom here of A2DP from an earlier stage of this course, you can just get rid of this
because otherwise it would have a different layout.
It would just look slightly differently, and it wouldn't work with our current structure that we have
defined.
So get rid of it and then your frame layout will look great.
All right.
So that's it for this video.
See you in the next one.