CODEWITHSUNDEEP
androidandroid-jetpack-composecomposable
Sudarshan Bhatt
Sudarshan Bhatt

Reputation: 220

Setting background image to compose Column

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

Upvotes: 5

Views: 2446

Answers (2)

Gabriele Mariotti
Gabriele Mariotti

Reputation: 364471

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....
}

Upvotes: 6

J.K
J.K

Reputation: 2393

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
        )
    }
}

Upvotes: 0

Related Questions