Capturable – Jetpack Compose utility library for capturing Composable

🚀A Jetpack Compose utility library for converting Composable content into Bitmap image 🖼️.

💡Introduction

In the previous View system, drawing Bitmap Image from View was very straightforward. But that’s not the case with Jetpack Compose since it’s different in many aspects from previous system. This library helps easy way to achieve the same results. It’s built upon the ComposeView and uses View‘s APIs to draw the Bitmap image.

🚀 Implementation

You can check /app directory which includes example application for demonstration.

Gradle setup

In build.gradle of app module, include this dependency

dependencies {
    implementation "dev.shreyaspatil:capturable:1.0.3"
}

You can find latest version and changelogs in the releases.

Usage

1. Setup the controller

To be able to capture Composable content, you need instance of CaptureController by which you can decide when to capture the content. You can get the instance as follow.

@Composable
fun TicketScreen() {
    val captureController = rememberCaptureController()
}

rememberCaptureController() is a Composable function.

2. Add the content

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

@Composable
fun TicketScreen() {
    val captureController = rememberCaptureController()
    
    Capturable(
        controller = captureController,
        onCaptured = { bitmap, error ->
           // This is captured bitmap of a content inside Capturable Composable.
           if (bitmap != null) {
               // Bitmap is captured successfully. Do something with it!
           }
            
            if (error != null) {
                // Error occurred. Handle it!
            }
        }
    ) {
        // Composable content to be captured.
        // Here, `MovieTicketContent()` will be get captured
        MovieTicketContent(...)
    }
}

3. Capture the content

To capture the content, use CaptureController#capture() as follows.

Button(onClick = { captureController.capture() }) { ... }

On calling this method, request for capturing the content will be sent and event will be received in callback onCaptured with ImageBitmap as a parameter in the Capturable function.

By default, it captures the Bitmap using Bitmap.Config ARGB_8888. If you want to modify, you can provide config from Bitmap.Config enum.

Example:

captureController.capture(Bitmap.Config.ALPHA_8)

Make sure to call this method as a part of callback function and not as a part of the Composable function itself. Otherwise, it’ll lead to capture bitmaps unnecessarily in recompositions which can degrade the performance of the application.

That’s all needed!

⚠️ Precaution

While capturing the content on the devices having Android OS version O and above (API 26+) and having network images like Coil, Picasso, Glide, etc it may throw error like java.lang.IllegalArgumentException: Software rendering doesn't support hardware bitmaps. To overcome such issues, this library uses PixelCopy API to capture Bitmap as a fallback mechanism. PixelCopy has some limitations such as it can’t generate bitmap if composable content is clipped inside app’s Window, beyond or above screen i.e. due to scrolling, etc. So make sure not to include any UI content inside Composable which uses hardware bitmaps.

Capturable on GitHub: https://github.com/PatilShreyas/Capturable
Platform: Android
⭐️: 742