How to use a 9 patch drawable (.9.png) in my screen using Jetpack Compose?

user_9260623 0
Viewed 2646

I'm trying to use a .9.png file in Image composable as :

            Image(
            painter = painterResource(id = R.drawable.shadow_faq),
            contentDescription = "Faq card 1",
            modifier = Modifier
                .constrainAs(imgGeneral) {
                    top.linkTo(glImgGeneralTop)
                    bottom.linkTo(glImgBottom)
                    start.linkTo(glImgLeft)
                    end.linkTo(glImgRight)
                    height = Dimension.fillToConstraints
                    width = Dimension.fillToConstraints
                }
        )

But on doing this I get a render problem that says java.lang.IllegalArgumentException: Only VectorDrawables and rasterized asset types are supported ex. PNG, JPG

How do I use a .9.png file with Jetpack Compose?

android-jetpack-compose nine-patch android image
3 Answers

You can use the DrawablePainter from Accompanist that returns a Painter which draws an Android Drawable.

Image(
    rememberDrawablePainter(drawable = ContextCompat.getDrawable(context,R.drawable.xxxx) ),
    contentDescription = "Faq card 1"
)

Update: Starting with 1.0.0-rc02 and accompanist 0.14.0 you can use the coil-compose version:

Image(
    rememberImagePainter(ContextCompat.getDrawable(context,R.drawable.xxx)),
    contentDescription = "Faq card 1",
)
user_20165620

Edited: Please, use Gabriele answer.

I tried the Gabriele solution, but didn't work for me when I set a specific size like 100x200.

Here's my solution...

val context = LocalContext.current
val (w, h) = with(LocalDensity.current) {
    200.dp.roundToPx() to 100.dp.roundToPx()
}
val image = remember {
    ContextCompat.getDrawable(context, R.drawable.balao)?.toBitmap(w, h)?.asImageBitmap()!!
}
Image(image, contentDescription = null)
user_10943330

sometimes ,we load 9.png to be a background of Views, just like the message item on your chat apps. And we could do like this:

first we load 9.png as a drawable:

 val bgImg = ContextCompat.getDrawable(
    LocalContext.current,
    if (isFromMe) R.drawable.chat_message_right else R.drawable.chat_message_left
)

second we could use Modifier#drawBehind() method to set a background :

Text(text = "This my message",
    modifier = Modifier
        .drawBehind {
            bgImg?.updateBounds(0, 0, size.width.toInt(), size.height.toInt())
            bgImg?.draw(drawContext.canvas.nativeCanvas)
        }
        .padding(8.dp)
)

At last ,you will get the effect you want .

user_69144850
Related