Setting background image to compose Column

Question

I want to set background of a column as image instead of color. We set the background color as this
Column(modifier = Modifier.background(Colors.Blue) )

so instead of this, I want to use an image to set as background.

I tried setting it using painter of the modifier.

val painter = rememberAsyncImagePainter( "imageUrl",contentScale = ContentScale.FillHeight)

Column(modifier = Modifier.paint(painter) ) But this is not setting the image to the complete column height and width.

Is there any way I can set the image directly to the column composable instead of using Box and other composables? I am using coil to download the image

score 1 · Accepted Answer · answered Feb 21 '23 at 16:20

1

You can use the paint modifier applying the contentScale.

Something like:

val painter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data(url)
        .size(ORIGINAL)
        .build(),
    contentScale = ContentScale.FillBounds
)

Column(
    Modifier
        .fillMaxSize()
        .paint(
            painter,
            contentScale = ContentScale.FillBounds
        )
) {
   //content....
}

answered Feb 21 '23 at 16:20

Gabriele Mariotti

320,139
94
887
841

1

Thank you for your answer Gabriele, adding ` contentScale = ContentScale.FillBounds` solved the issue for me. – Sudarshan Bhatt Feb 22 '23 at 05:31

J.K · Answer 2 · 2023-02-21T13:57:15.730

You can use like this for fill height and width, as you use coil (io.coil-kt:coil-compose).


WrapperBoxImage(
                    Modifier
                        .fillMaxSize(),
                    imgUrl = "your image url.....",
                    placeholder = R.drawable.ic_default_class_image,
                    scale = ContentScale.Crop,
                    contentDescription = "course_card_image"
                )

if you need rounded corners just add this .clip(RoundedCornerShape(10.dp)) to modifier of WrapperBoxImage.

Our WrapperBoxImage Implementation will look like,


const val contentDescription_default = "WrapperBox_Image"

@Composable
fun WrapperBoxImage(
    mod: Modifier = Modifier,
    imgUrl: String,
    placeholder: Int = R.drawable.image_video_placeholder,
    scale: ContentScale = ContentScale.Crop,
    contentDescription: String,
    onClick: () -> Unit = {}
) {
    Box(
        modifier = mod.clickable { onClick() }
    ) {
        ImageSpec(imgUrl, placeholder, scale = scale, contentDescription = contentDescription)
    }
}

@Composable
private
fun ImageSpec(
    imgUrl: String,
    placeholder: Int = R.drawable.image_video_placeholder,
    mod: Modifier = Modifier,
    scale: ContentScale = ContentScale.Crop,
    contentDescription: String = contentDescription_default
) {
    Box(
        contentAlignment = Alignment.BottomCenter
    ) {
        val painter = rememberAsyncImagePainter(
            ImageRequest.Builder(LocalContext.current).data(data = imgUrl)
                .apply(block = fun ImageRequest.Builder.() {
                    placeholder(placeholder)
                    scale(Scale.FILL)
                }).build()
        )
        Image(
            painter = painter,
            contentDescription = contentDescription,
            mod.fillMaxSize(),
            contentScale = scale
        )
    }
}

Thank you for the answer J.K but I have to add a background image to the column only. I can not use other composable. Anyway, @2016562 has given a solution and it works. — Sudarshan Bhatt, Feb 22 '23 at 05:34

Setting background image to compose Column

2 Answers2