Motivation

The motivation is to create an API to capture specific view hierarchy in a way that can be manipulated or stored by the developer.

Currently it is possible to capture the hierarchy once using the Picture API as follows:

// val picture = Picture()
ComposableComponent(modifier = Modifier.drawWithContent {
    val canvas = Canvas(picture.beginRecording(width, height))
    draw(this, layoutDirection, canvas, size) {
        this@draw.drawContent()
    }
    picture.endRecording()
    drawIntoCanvas {
        it.nativeCanvas.drawPicture(picture)
    }
})

Problem with this approach is that drawContent functionality does not completely correlate with (at least I don't personally think) the View class. Which (again speculating) in turn makes the drawContent keep drawing into the Picture's Canvas.

Modifying the above code to this:

// val picture = Picture()
ComposableComponent(modifier = Modifier.drawWithContent {
    val canvas = Canvas(picture.beginRecording(width, height))
    draw(this, layoutDirection, canvas, size) {
        this@draw.drawContent()
    }
    picture.endRecording()
    drawContent()
})

…is again very problematic since the hierarchy is captured only once and recording has promptly ended capturing a single frame only. Not only that but drawContent is invoked twice which, I can imagine, implies increased runtime costs. Nonetheless the view thereafter not frozen in time.

Proposal

Therefore having the same freedom recording hierarchy and modifying the captured image (with native code - renderscript replacements / shaders, rendereffects, …) would greatly improve options in making beautiful and modern UI effects, analyze test and compare specific segments whilst testing animations frame by frame and more.

If it became pluggable into the Modifier chain, then the API could look very similar to this:

@Composable
fun MyScreen(state: CaptureState = rememberCaptureState()) {
    MyComponent(modifier = Modifier.capture(state))
    LaunchedEffect(state) {
        state.frames.collectLatest { frame: Bitmap ->
            // transform
        }
    }
}

Use Case:

Blur/Glass effect

Note that the Modifier needs to clip to the position in parent, therefore it would be perhaps beneficial to note the coordinates of the captured content on screen and check against global position provided by backgroundBlur.

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun MyScreen(
    state: CaptureState = rememberCaptureState(),
    overlay: Color = Color.White.copy(alpha = .1f)
) = Scaffold(
    topBar = {
        TopAppBar(
            modifier = Modifier.backgroundBlur(state, elevation = 8.dp, overlay = overlay),
            title = { Text("Title") },
            colors = TopAppBarDefaults.topAppBarColors(
                containerColor = Color.Transparent,
                scrolledContainerColor = Color.Transparent
            )
        )
    },
    bottomBar = {
        NavigationBar(
            modifier = Modifier.backgroundBlur(state, elevation = 8.dp, overlay = overlay)
        ) {
            NavigationBarItem(true, {}, {})
            // …
        }
    }
) {
    LazyColumn(
        modifier = Modifier.capture(state),
        contentPadding = it
    ) {
        // …
    }
}

Screen Sampling

Bitmaps are not the best bet I would presume(?) since if not hardware they are retained in app's memory, but it should be preferred to get hardware bitmap with hardware accelerated (vulkan/opengl) transformations.

@Composable
fun MyScreen(onCapture: (Bitmap) -> Unit) {
    val state = rememberCaptureState()
    LaunchedEffect(state) {
        state.frames.sample(1.seconds).collect {
            onCapture(it)
        }
    }
    Column(
        modifier = Modifier.capture(state)
    ) {
        // …
    }
}

But this feels like it will be preferred to be simplified to this:

@Composable
fun MyScreen(onCapture: (Bitmap) -> Unit) {
    Column(
        modifier = Modifier.capture(
            rate = 1.seconds,
            onCapture = onCapture
        )
    ) {
        // …
    }
}

Recording

@Composable
fun MyScreen(onCapture: (InputStream) -> Unit) {
    Column(
        modifier = Modifier.capture(onCapture = onCapture)
    ) {
        // …
    }
}