Kapture - A small library for Jetpack Compose to capture Composable content to Android Bitmap

Overview

kapture

CI

A small utility library for Jetpack Compose to capture Composable content to Android Bitmap.

The way this work is we listen to the coordinates of the Composable through Modifier.onGloballyPositioned & crop the bitmap to the coordinates we get from the callback from the nearest root composable attached to LocalView.current.

The working is similar to SemanticsNodeInteraction.captureToImage() which we use for screenshot testing.

Implementation

Check the sample in /app directory which demonstrates the full usage of the library.

Gradle Setup

Maven Central

In your module's build.gradle, include the dependency.

dependencies {
    implementation "io.github.kaustubhpatange:kapture:$version"
}

Check the release notes for latest version here.

Usage

  • Capturing to Android Bitmap is managed by ScreenshotController class. You can obtain it as follows,
@Composable
fun TestScreen() {
    val screenshotController = rememberScreenshotController()
    ...
}
  • Attach this controller to the Composable through a Modifier extension function attachController(...). Through this we can capture the content for this composable including it's child heirarchy.
@Composable
fun TestScreen() {
    val screenshotController = rememberScreenshotController() // <--

    Column(modifier = Modifier
        .attachController(screenshotController)) {  // <--
        Text(...)
        Icon(...)
    }
}
  • To capture the content just call ScreenshotController.captureToBitmap(). It is a suspending function so make sure to run it in a coroutine scope or in an implicit scope provided by LaunchedEffect.
@Composable
fun TestScreen() {
    val screenshotController = rememberScreenshotController() // <--

    Column(modifier = Modifier
        .attachController(screenshotController)) {  // <--
        Text(...)
        Icon(...)
    }

    LaunchedEffect(...) { // implicit coroutine scope
        val bitmap: Result<Bitmap> = screenshotController.captureToBitmap(
            config = Bitmap.Config.ARGB_8888 // optional
        )
        ...
    }
}
  • The call returns a kotlin.Result<Bitmap> which has a bitmap if successful otherwise a throwable.
  • I'll advice you to check Tests for some more deeper understanding.

Contribute

If you want to contribute to this project, you're always welcome! See Contributing Guidelines.

License

Copyright 2022 Kaustubh Patange

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

https://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
You might also like...
A Jetpack Compose Collapsing Top Bar, that expands or collapses based on the scrolling of a content
A Jetpack Compose Collapsing Top Bar, that expands or collapses based on the scrolling of a content

CollapsingTopBarCompose A Jetpack Compose Collapsing Top Bar, that expands or collapses based on the scrolling of a content Centered expanded title an

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen
Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen

Gmail clone project, that uses Jetpack Compose to draw UI content for gmail home screen following Udemy course: Android 12 Jetpack Compose Developer Course - From 0 To Hero

Simple composable for rendering transitions between backstacks.
Simple composable for rendering transitions between backstacks.

compose-backstack Simple library for Jetpack Compose for rendering backstacks of screens and animated transitions when the stack changes. It is not a

Boat - A scoped and composable way to navigate

Boat Boat is an implementation of a scoped, simple and composable way to navigat

Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.
Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI.

Pinocchio Pinocchio is a group of libraries for various common UI components. It could contain Composable, View, and everything related to UI. All UI

GlassmorphicColumn @Composable
GlassmorphicColumn @Composable

glassmorphic-composables GlassmorphicColumn @Composable GlassmorphicRow @Composable With Non-Image background Setup Gradle: allprojects { reposito

Small code generating library for safe Jetpack Compose navigation with no boilerplate.

Compose Destinations A KSP library to use alongside compose navigation. It reduces boilerplate code and is less error-prone since passing arguments be

Forget about bunch of XML files for maintaining UIs. Jetpack Compose is Android’s modern toolkit for building native UI. Here is a small example to get started.
Forget about bunch of XML files for maintaining UIs. Jetpack Compose is Android’s modern toolkit for building native UI. Here is a small example to get started.

Jetpack Compose Sample Description This repository is to get started with new Jetpack Compose Toolkit for Android. By using Jetpack Compose you no nee

Small Android project demonstrating some navigation components for Jetpack Compose.
Small Android project demonstrating some navigation components for Jetpack Compose.

Small Android project demonstrating some navigation components for Jetpack Compose. Created this for presenting about this topic for a GDG meetup.

Owner
Kaustubh Patange
Kaustubh Patange
Sample app that shows how to create a bitmap from a Jetpack composable

Creating Bitmaps From Jetpack Composables This app demonstrates how to create a bitmap from a Jetpack composable without the need to display the compo

Johann Blake 14 Nov 29, 2022
A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

A library that enables Safe Navigation for you Composable destinations when using Jetpack Compose Navigation

Roman Levinzon 59 Oct 19, 2022
Flippable - A Jetpack Compose utility library to create flipping Composable views with 2 sides

?? Flippable A Jetpack Compose utility library to create flipping Composable views with 2 sides. Built with ❤︎ by Wajahat Karim and contributors Demo

Wajahat Karim 298 Dec 23, 2022
a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens

This library provides a set of Settings like composable items to help android Jetpack Compose developers build complex settings screens without all the boilerplate

Bernat Borrás Paronella 178 Jan 4, 2023
Jetpack Compose Text composable to show html text from resources

HtmlText Current Compose Version: 1.0.3 Compose HtmlText Text composable to show html text from resources Add to your project Add actual HtmlText libr

Alexander Karkossa 57 Dec 23, 2022
This is a simple video games discovery app showcasing UI using Jetpack Compose with Clean Architecture and also tests for composable UI.

Jetpack-Compose-Video-Games-Example ?? This is a simple video games discovery app showcasing UI using Jetpack Compose and also tests for composable UI

Ruben Quadros 60 Dec 27, 2022
Mocking with Jetpack Compose - stubbing and verification of Composable functions

Mockposable A companion to mocking libraries that enables stubbing and verification of functions annotated with @androidx.compose.runtime.Composable.

Jesper Åman 21 Nov 15, 2022
Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Row Coloumn Box Compose Constraint Layout Modifier.xyz Animator Tween animation MutableState Creating custom composable Corners Canvas LaunchedEffect

Shivaraj M Patil 1 Apr 13, 2022
Drawing text around other content in Jetpack Compose

TextAroundContent Drawing text around other content in Jetpack Compose Installat

Dmitry Mysenko 8 Feb 9, 2022
Icontent - Jetpack Compose component to show all random content sended by Inmersoft guide backend

icontent IContent is a library that allows loading audio visual content generica

Orlando Novas Rodriguez 3 Nov 3, 2022