Compose ScreenshotBox

Screenshot Composables and convert to Bitmap on user action or periodically.

Screenshot with State	Single Screenshot	Periodic Screenshot

Gradle Setup

To get a Git project into your build:

Step 1. Add the JitPack repository to your build file Add it in your root build.gradle at the end of repositories:

allprojects {
  repositories {
      ...
      maven { url 'https://jitpack.io' }
  }
}

Step 2. Add the dependency

dependencies {
    implementation 'com.github.SmartToolFactory:Compose-Screenshot:Tag'
}

Implementation

Single Shot

Create a ScreenshotBox which covers your Composables you want to take screenshot of

ScreenshotBox(screenshotState = screenshotState) {
    Column(
        modifier = Modifier
            .border(2.dp, Color.Green)
            .padding(5.dp)
    ) {

        Image(
            bitmap = ImageBitmap.imageResource(
                LocalContext.current.resources,
                R.drawable.landscape
            ),
            contentDescription = null,
            modifier = Modifier
                .background(Color.LightGray)
                .fillMaxWidth()
                // This is for displaying different ratio, optional
                .aspectRatio(4f / 3),
            contentScale = ContentScale.Crop
        )

        Text(text = "Counter: $counter")
        Slider(value = progress, onValueChange = { progress = it })
    }
}

Provide a ScreenshotState which stores Bitmap

val screenshotState = rememberScreenshotState()

Take screenshot by calling screenshotState.capture()

Button(
    onClick = {
        screenshotState.capture()
    }
) {
    Text(text = "Take Screenshot")
}

Get Bitmap or ImageBitmap as

screenshotState.imageBitmap?.let {
    Image(
        modifier = Modifier
            .width(200.dp)
            .height(150.dp),
        bitmap = it,
        contentDescription = null
    )
}

initially Bitmap is null because onGloballyPositioned might not return correct coordinates initially, experienced this with Pager first few calls return incorrect position then actual position is returned, or sometimes width or height is returned zero, nullable makes sure that you get the latest one after calling screenshotState.capture() from a Composable that is laid out.

Success or Error State

ImageResult Sealed class return data as Bitmap or Exception if you are interested in displaying error result if any has occurred

sealed class ImageResult {
    object Initial : ImageResult()
    data class Error(val exception: Exception) : ImageResult()
    data class Success(val data: Bitmap) : ImageResult()
}

ImageState of ScreenshotState has val imageState = mutableStateOf<ImageResult>(ImageResult.Initial) that can be observed as

when (imageResult) {
    is ImageResult.Success -> {
        Image(bitmap = imageResult.data.asImageBitmap(), contentDescription = null)
    }
    is ImageResult.Error -> {
        Text(text = "Error: ${imageResult.exception.message}")
    }
    else -> {}
}

Periodic Screenshot

Collect screenshotState.liveScreenshotFlow to get periodic screenshots of your composables with

LaunchedEffect(Unit) {
    screenshotState.liveScreenshotFlow
        .onEach { bitmap: ImageBitmap ->
            imageBitmap = bitmap
        }
        .launchIn(this)
}

ScreenshotState

Set a delay after each shot by setting delayInMillis

/**
 * Create a State of screenshot of composable that is used with that is kept on each recomposition.
 * @param delayInMillis delay before each screenshot if [liveScreenshotFlow] is collected.
 */
@Composable
fun rememberScreenshotState(delayInMillis: Long = 20) = remember {
        ScreenshotState(delayInMillis)
    }

/**
 * State of screenshot of composable that is used with.
 * @param timeInMillis delay before each screenshot if [liveScreenshotFlow] is collected.
 */
class ScreenshotState internal constructor(
    private val timeInMillis: Long = 20,
) {
    val imageState = mutableStateOf<ImageResult>(ImageResult.Initial)

    internal var callback: (() -> Unit)? = null

    /**
     * Captures current state of Composables inside [ScreenshotBox]
     */
    fun capture() {
        callback?.invoke()
    }

    val liveScreenshotFlow = flow {
        while (true) {
            callback?.invoke()
            delay(timeInMillis)
            bitmapState.value?.let {
                emit(it)
            }
        }
    }
        .map {
            it.asImageBitmap()
        }
        .flowOn(Dispatchers.Default)

    internal val bitmapState = mutableStateOf<Bitmap?>(null)

    val bitmap: Bitmap?
        get() = bitmapState.value

    val imageBitmap: ImageBitmap?
        get() = bitmap?.asImageBitmap()
}

Standalone Functions

If you wish to use function instead of ScreenshotBox you can use it as

val view: View = LocalView.current

val imageResult:ImageResult = view.screenshot(bounds)

bounds is Compose rectangle that covers bounds of view that is needed to be screenshow which should be retrieved using Modifier.onGloballyPositioned()

Modifier.onGloballyPositioned {
    composableBounds = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {
        it.boundsInWindow()
    } else {
        it.boundsInRoot()
    }
}

fun View.screenshot(
    bounds: Rect
): ImageResult {

    try {

        val bitmap = Bitmap.createBitmap(
            bounds.width.toInt(),
            bounds.height.toInt(),
            Bitmap.Config.ARGB_8888,
        )

        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.O) {

            // Above Android O not using PixelCopy throws exception
            // https://stackoverflow.com/questions/58314397/java-lang-illegalstateexception-software-rendering-doesnt-support-hardware-bit
            PixelCopy.request(
                (this.context as Activity).window,
                bounds.toAndroidRect(),
                bitmap,
                {},
                Handler(Looper.getMainLooper())
            )
        } else {
            val canvas = Canvas(bitmap)
                .apply {
                    translate(-bounds.left, -bounds.top)
                }
            this.draw(canvas)
            canvas.setBitmap(null)
        }
        return ImageResult.Success(bitmap)
    } catch (e: Exception) {
        return ImageResult.Error(e)
    }
}

SmartToolFactory/Compose-Screenshot