How to convert all content of a composable to Bitmap in Android Jetpack compose?

Question

I am trying to convert all the content of a LazyColumn to bitmap, and then export it to a pdf file.

I did find this library to take screenshots of what is showing but not for all the content. Content that was not showing is not included. So I also try to draw canvas instead, but we can not apply all styles of the content (like a markdown, custom background,...) So I am thinking that we can have a custom native Android View, it may be possible to do it, but I can't find a way to pass a composable into it.

So anyone done that before or has a solution for this?

Edit 1: I did try to use draw content in compose graphics alpha-02, but the content in the LazyColumn was unable to scroll:

    onDrawWithContent {
        val pictureCanvas = Canvas(picture.beginRecording(width, height))

        draw(this, this.layoutDirection, pictureCanvas, this.size) {
////
        }
        picture.endRecording()

        drawIntoCanvas { canvas -> canvas.nativeCanvas.drawPicture(picture) }
      }

Related post: Jetpack Compose take screenshot of composable function — Mahozad
– Mahozad, Commented Mar 20 at 11:32

Chirag Thummar · Accepted Answer · 2023-12-04 05:16:25Z

8

Steps to Export Bitmaps

Use drawIntoCanvas Method and delegate to

android.graphics.Picture class.
Then save Picture to Local Storage.

First Thing First Add The Latest Release Of Compose Dependency1.6.0-alpha03 or new

implementation "androidx.compose.ui:ui:1.6.0-alpha03"

Modifier.drawWithCache keeps the objects that are created inside of it cached. The objects are cached as long as the size of the drawing area is the same, or any state objects that are read have not changed. This modifier is useful for improving the performance of drawing calls as it avoids the need to reallocate objects (such as: Brush, Shader, Path etc.) that are created on the draw.

val picture = remember { Picture() }
        Column(
            modifier = Modifier
                .padding(padding)
                .fillMaxSize()
                .drawWithCache {
                    // Example that shows how to redirect rendering to an Android Picture and then
                    // draw the picture into the original destination
                    val width = this.size.width.toInt()
                    val height = this.size.height.toInt()
                    onDrawWithContent {
                        val pictureCanvas =
                            androidx.compose.ui.graphics.Canvas(
                                picture.beginRecording(
                                    width,
                                    height
                                )
                            )
                        draw(this, this.layoutDirection, pictureCanvas, this.size) {
                            [email protected]()
                        }
                        picture.endRecording()

                        drawIntoCanvas { canvas -> canvas.nativeCanvas.drawPicture(picture) }
                    }
                }
        ) {
            ScreenContentToCapture()
        }

After drawing the cache into Picture. You can use Picture an object to get the bitmap and export them to Local storage.

Saving the Image

We will use Picture Object to capture the image and draw it into canvas and save that Bitmap to Local storage using the FileWriter.

private fun createBitmapFromPicture(picture: Picture): Bitmap {
    val bitmap = Bitmap.createBitmap(
        picture.width,
        picture.height,
        Bitmap.Config.ARGB_8888
    )

    val canvas = android.graphics.Canvas(bitmap)
    canvas.drawColor(android.graphics.Color.WHITE)
    canvas.drawPicture(picture)
    return bitmap
}

private suspend fun Bitmap.saveToDisk(context: Context): Uri {
    val file = File(
        Environment.getExternalStoragePublicDirectory(Environment.DIRECTORY_PICTURES),
        "screenshot-${System.currentTimeMillis()}.png"
    )

    file.writeBitmap(this, Bitmap.CompressFormat.PNG, 100)

    return scanFilePath(context, file.path) ?: throw Exception("File could not be saved")
}

private fun File.writeBitmap(bitmap: Bitmap, format: Bitmap.CompressFormat, quality: Int) {
    outputStream().use { out ->
        bitmap.compress(format, quality, out)
        out.flush()
    }
}

Here you can refer complete code

https://gist.github.com/chiragthummar/35aa1d15882c4d5a105a3f89be821214

answered Dec 4, 2023 at 5:16

Chirag Thummar

3,5283 gold badges22 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Stevie Over a year ago

This one is not working. We have 2 problems with this: 1 Scrollable content won't be able to scroll, 2 git will get crash for android above API 26

Zimbabaluba Over a year ago

This will capture what is displayed on screen. If you want to capture the composable independent of the screen size, wrap your composable in a custom layout with your desired width & height (ask chat GPT). Pass the wrapped composable to this code, and comment out the line which draws the composable on screen drawIntoCanvas { canvas -> canvas.nativeCanvas.drawPicture(picture) }

Jake Lee Over a year ago

Just a heads-up that the drawWithCache section worked well for me, with the exception of API 28 (26, 27, 29, 30 all work), where any Text inside appears blank!

F.Mysir · Accepted Answer · 2023-12-04 19:48:16Z

1

I had the same requirement like you and wanted to be able to achieve capturing all screen. So I was able to achieve this inside a scrollable view with Capturable

The component which needs to be captured should be placed inside Capturable composable as follows:

@Composable
fun TicketScreen() {
    // I was able to capture the full width of the composable which was not visible on the screen with a scroll modifier on top of the Capturable for example:
    Column(modifier = Modifier.horizontalScroll(rememberScrollState())) {
        Capturable(
            modifier = Modifier,
            controller = controller,
            onCaptured = { bitmap, error ->
                if (state.printVides) {
                    onEvent(ScanPrintEvent.SetImageBitmapVides(bitmap?.asAndroidBitmap()))
                } else {
                    onEvent(ScanPrintEvent.SetImageBitmapNormal(bitmap?.asAndroidBitmap()))
                }
            }
        ) {
           YourComposable()
        }
    }
}

edited Dec 4, 2023 at 19:48

answered Dec 3, 2023 at 20:44

F.Mysir

4,3741 gold badge33 silver badges50 bronze badges

2 Comments

Stevie Over a year ago

I did use the solution in this Library, but it did not work for me (I did try with this one also), the content in Capturable was unable to scroll. Can you show the way you applied it that works for you?

F.Mysir Over a year ago

Alright I have updated my answer good luck with this!

ya man · Accepted Answer · 2024-09-12 14:23:56Z

0

.drawWithCache {
    if (isDownloading) {
        onDrawWithContent {
            graphicsLayer.record {
                [email protected]()
            }
            drawLayer(graphicsLayer)
            coroutineScope?.launch {
                val bitmap = graphicsLayer.toImageBitmap()
                onImageDrawn(bitmap.asAndroidBitmap())
            }
        }
    } else {
        onDrawWithContent {
            drawContent()
        }
    }
}

edited Sep 12, 2024 at 14:23

ya man

5591 gold badge13 silver badges25 bronze badges

answered Aug 29, 2024 at 7:29

Muhammad Awais

14 bronze badges

Collectives™ on Stack Overflow

How to convert all content of a composable to Bitmap in Android Jetpack compose?

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related