Another core feature of this app is that you can select an image for the background and then draw on
top of it.
So that is something that we can easily create.
But before we do so, before we add the feature where we can actually select the image and then put
it as a background, we should start with something where we, first of all, create the background
itself, so where we create a view which is behind it.
So we're going to layer our views.
So the idea is that we have an image you just behind our drawing view.
So you can see here we have our drawing view here and now.
Of course, our goal is to add an image you just behind it.
And in order to do so, what we're going to use is something called a frame layout.
So a frame layout is another layout type which allows us to put stuff on top of each other.
So we're going to use it here.
So I'm going to start with the frame layout here, frame layout.
And then this frame layout needs to have a bunch of settings that we can pretty much take from our kids
drawing you because it's going to take over many of them.
For example, it's going to take over this whole layout with and height.
So I'm just going to use it here and also the margin.
Then I'm going to add a little bit of padding.
And here I'm going to say that this should be one density pixel and then we need to set a background,
so I'm going to use a background.
And that should be the admirable background drawing view layout.
All right, so this is the.
Lay out that we created here.
In our travel background, trying to lay out.
And then I need to give you an idea so that I can talk to it, so I'm just going to give it an idea
at the very top and I'm going to call this one full setting for frame a layout drawing view container.
Next, I will cut the whole part here with the constraint.
And I'm going to put it underneath the background, and we need all of those things because we are in
a constrained layout, right?
So this is a little bit of a challenge, as we saw earlier.
We need to be careful here.
But the thing is that our frame layout should be at the same position as our drawing view was before.
So now let's take our drawing view and put it inside of the frame layout, because in there we have
the space for it.
Now, the drawing view is complaining because it doesn't have a within height.
So let's create a layout with of each parent and a layout height of also each parent.
And then I would like to change the background here of this image to be a color.
So I'm just going to use 80 f f f f f so six s.
What that will do is it will create a transparent layer, so to speak, on top of our image that we
want to add.
So of course they'll need the image.
So I'm going to add an image view here, which should be.
Just on top of our kids drawing up this meeting here on top in the coat means that it's going to be
underneath.
The drive view, OK, so the order is always that it's the lowest layer starts from the top.
All right.
So the lowest layer will be our image to you.
And then on top of that, we put our drawing you.
So now we, of course, need to set a with and decide for our image of you, and I'm going to say that
it should match the parent so much parent and the same goes for the little tight match parent.
And here.
We can track it all in a little bit so that it's all aligned correctly.
All right.
So the next thing is that this image of unity background.
So I'm going to give it a source as our see, which should then be the background.
But here I'm going to use an image.
So instead of creating something again, I'm just going to use a drawable and I need to drag it into
the project so you can download it.
In this lecture.
And should be in the drawer, this folder, so I'm pasting it into the drawable folder and I just call
it image.
So now I'm just going to say that I want to use adorable image.
Then this image needs an I.D. because we want to talk to this image, you we want to be able to change
its image because for now, we're going to use this image.
Which is this Paris image here of the Eiffel Tower.
And later on, we want to be able to change this image.
So we will need to talk to the image of you and we can talk in the code by accessing it via the ID.
So I'm just going to call this one.
I've aircraft.
So now there's one more thing that we definitely need to add, and that is the scale type.
So how do we want to scale the image to want it to FedEx and why do we want to center it?
And what I want to do is I want to center corrupted.
So it should be centered and then corrupt so that it fits into the screen size or into the size of our
frame layout.
All right.
And then, of course, whenever we are using image views or image buttons, we can add a content description.
And I'm just going to say background image.
All right.
Now, if you look at it in this book, we can see wait for a building to finish.
So this will take forever because we have an ebook here still.
And that is if we look at it here, layout constrained top to bottom of drawing view.
So the idea, drawing view is not available anymore, even though the idea itself is still available.
So we still have the idea drawing added view, but the drug is hidden inside of our frame layout.
So now I need to use the frame layout.
And here, so instead of the drawing, you were going to use the frame layout and then you can see the
arrow disappeared.
So that's something that is super important because otherwise we will run into errors here.
All right.
And once all of that is done, we can test our application and see if our app is actually going to have
the right background.
So this was just a preview test here we had of the project that I prepared and I would see how it's
going to look for our actual app that we built together.
All right.
So there we are.
We have our drawing here that we can draw on top of, and that is all great.
But now let's try to draw here at the bottom.
And you could see up there's something wrong here.
So what is wrong?
Well, we have a whole area here at the bottom, which is not part of our drawing view, as it seems.
So I cannot draw on top of it.
So why is that?
Well, make a quick pause or pause the video and try to figure it out yourself, because these kind
of bugs are very common and they are not so easy to figure out sometimes, but still just give it a
couple of minutes to try to figure out why that is.
All right, so I hope you tried it, so the idea is that we use an image of you underneath our drawing
view and the drawing viewer seems to not be as big as the image of you.
So it has to do something with either the image you being incorrect or the drawing viewer being incorrect.
But if we look at our EP again, we could see that the drawing view is the problem because the imagery
itself is totally fine.
It's going all the way down to the bottom here, so it must have to do with our drawing view.
So what could be the property that creates this problem?
Well, it's this margined bottom because we are creating a little margin of 80 pixels at the bottom
there and we create that beforehand because we needed that for our bottom elements here.
But now our frame layout is take care of that.
So now we don't need that anymore so we can get rid of our layer, margin, bottom.
So let's get rid of it and then run our code again.
And we will see that now it's going to work.
So now let's draw here at the bottom.
You can see it's working totally fine.
Cool.
So let's try to draw here with another color, with green, for example, you could see here at the
bottom we cannot draw, but as soon as we are inside of the screen, that's where we can draw.
OK, so that was how we can have an image as the background and we just created the UI for it.
But the next thing we need to do is to add a button which allows us to select an image from our device.
And in order to do so, we need to access something on the device.
And when we need to access something on the device or features such as, for example, the Internet
connection or the chips or things like that or the camera, even then, of course, we need to ask for
permission.
And that is what we're going to look at in the next video.
So see you there.