Adding Background Image

[00:00:00]
>> Now to finish this offer thing, I want a background image, okay? So we need to see how to create an image and how to import the image here. From the assets.zipfile, you have a couple of images ready to use. So if you go, to that folder for example here, we have the background pattern dot SVG, that's the one I want now.

[00:00:27]
So for that I need to get into the res folder for resources, okay. Inside the resources we have a drawable folder, here I'm gonna put all the things that are drawable including the meshes. So right now there are a couple of drawables and I don't know what they are.

[00:00:48]
But I can right click here and select New Vector Asset, because I'm gonna use SVG. That's vector based. I'm gonna create a new vector asset. I'm gonna import that SVG. You cannot just drag the SVG because android does not support SVG as an asset. We need to convert that into an Android Vector asset.

[00:01:12]
Okay, so right-click, New Vector Asset. And here we can select if we want a clipart that I don't want that I want the local file. It can be SVG or PSD. Be careful with PSD it's not gonna work most of the time. That's a Photoshop file isn't gonna work.

[00:01:29]
Typically SVG is the format you want so I'm going to take, a local file. So I will just look for that file. Its background, underscore pattern SVG, okay? And, this is the name that we have inside Android. By default, it's adding a prefix I see, from icon. Okay?

[00:01:53]
So I don't want that prefix, because it's not an icon actually. So I'm going to remove the IC. I mean just the name but and then next is just previewing how it's going to look like. And I'm good with that. So if you look at the this file, it's actually an XML.

[00:02:12]
Here you have a preview. This is not SVG. It's an Android shape format. So it has have converted the SVG into this format. That's the one that we're going to use. Okay? We don't typically touch those shapes but having mine, it's not the original SVG. That means and this is important if you have an SVG with text, the text is not going to be important that you need to convert text into shapes.

[00:02:42]
So if you're using Adobe Illustrator or Adobe XD or a sketch, typically you have a way to convert the text into shapes and then you export the shapes. Is not text anymore. Okay? It makes sense. So as we see with text will not be important. Okay, so now we need any mesh.

[00:03:02]
So I'm going to add an E-mesh, but where? So in the column if I add the E- mesh in the column within the column let's do that first. Okay, so it's called E- mash. And we need to define a painter. What's a painter, an object that will paint the image.

[00:03:23]
And there is a painter it's called painter resource that will look for a resource in the Resources folder. That's the one we want. And he needs an AV. How can I reference res drawable background pattern from Kotlin? It's like this r.drawable.background pattern. Everything you put in the Rest folder.

[00:03:54]
We have its own reference in this global R option. Our drawable is pointing to everything you have in the rest drawable folder. Okay, that's make sense? So that's how you do that. And then another property is called the description. This is actually the alt in HTML. So this is if the image cannot be loaded, or for accessibility purposes this is a background pattern.

[00:04:23]
It's just a description of the content. Okay, does that make sense? So if I build a refresh. Refresh. There we are. We have the image and then the text but I want the image behind as the background, makes sense? So how can I do that? Of course, this happens because I have the image in the column, what if I take the image out of the column like this?

[00:05:05]
It looks better. Okay. And now they don't have a container but it's fine. We know that will happen is they share the space. So it works. And now we can change some properties for example, with a mode of e-mesh, because the mesh is really to be, so we can add here a modifier and we can say for example that we want content scale.

[00:05:36]
Let me first do this. There is a modifier Called matchParentSize, so it's Modifier.matchParentSize. And also we have fillMaxWidth or MaxSize. So their kind of doing something similar matchparent will actually match the parent and Phil Max will try to in this case the width will try to stretch as much as possible to the borders.

[00:06:06]
Okay and of course there is another one for height. And what if I want to like shrink this a little bit either one is too high now, so I can have another modifier for the height, and I can say so you can try any value DPS and see how it looks like, is it I mean, it's not so bad but what happened with the e-mesh?

[00:06:37]
Well, I have to change how the e-mash is being a scaling so I need to change another property from the e-mash that is contentScale. Okay, contentScale and there are some options that we can use, such as Fillwidth, Crop, FillBounds. So if I wanna fill the Holewidth, nature play with these properties unfortunately we don't have an inspector or something that will tell us everything that is possible here.

[00:07:17]
For now checking into the documentation of each composable or stack overflow, right? So typically that's how it works. Well, first 140, we see it's actually just small. We can play with this until we are happy, okay? When the previous not working anymore, try to refresh with that button there.

[00:07:41]
And most of the time, it solves a problem.