I receive images from the server that have a 1px red border. Frame is part of the image. The images themselves can be of different sizes, both 50x30 and 300x200. And their frames will be the same - 1px. I need to first crop this frame, and only then stretch the image to fit the width of the screen

Image(
    painter = rememberImagePainter(
        data = URL,
        builder = {
            error(R.drawable.img)
        }
    ),
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .drawWithContent {
            clipRect (
                left = 1f,
                top = 1f,
                right = size.width - 1f,
                bottom = size.height - 1f
            ) {
                [email protected]()
            }
        }
)

I tried doing this, but it doesn't give the desired result. If the picture is small, then the red frame remains when stretched. I believe that this happens because the picture is first stretched and then only cropped

I receive images from the server that have a 1px red border. Frame is part of the image. The images themselves can be of different sizes, both 50x30 and 300x200. And their frames will be the same - 1px. I need to first crop this frame, and only then stretch the image to fit the width of the screen

Image(
    painter = rememberImagePainter(
        data = URL,
        builder = {
            error(R.drawable.img)
        }
    ),
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .drawWithContent {
            clipRect (
                left = 1f,
                top = 1f,
                right = size.width - 1f,
                bottom = size.height - 1f
            ) {
                [email protected]()
            }
        }
)

I tried doing this, but it doesn't give the desired result. If the picture is small, then the red frame remains when stretched. I believe that this happens because the picture is first stretched and then only cropped

• android
• kotlin
• android-jetpack-compose

1 Answer 1

the issue occurs because the scaling happens before the cropping in your current implementation.

You need to pass desired result where the red frame is completely removed before the image is scaled to fit the screen width. You can update the below changes accordingly:

var imageSize by remember { mutableStateOf(IntSize.Zero) }
// Custom painter to handle frame removal before scaling
val painter = rememberImagePainter(
    data = imageUrl,
    builder = {
        error(errorDrawable)
        transformations(object : Transformation {
            override fun key() = "frame_removal"
            override suspend fun transform(input: Bitmap): Bitmap {
                // Create a new bitmap without the frame
                val croppedBitmap = Bitmap.createBitmap(
                    input,
                    1, // left crop
                    1, // top crop
                    input.width - 2, // width minus left and right frame
                    input.height - 2 // height minus top and bottom frame
                )
                imageSize = IntSize(croppedBitmap.width, croppedBitmap.height)
                return croppedBitmap
            }
        })
    }
)

Image(
    painter = painter,
    contentDescription = null,
    modifier = Modifier
        .fillMaxWidth()
        .aspectRatio(
            if (imageSize.width > 0 && imageSize.height > 0)
                imageSize.width.toFloat() / imageSize.height.toFloat()
            else 1f
        ),
    contentScale = ContentScale.FillWidth
)