Few months ago we in our company decided to build a new UI-Kit library module with a new Design system for our main product app from scratch, They picked me to start the development of a new Design System, And at that time the Jetpack Compose was in Beta, so I decided that let's build it with a highly customizable New Modern UI toolkit for Android.

So, after setting up the typography, themes, and colors for Ui-Kit, I’ve developed the core components like Buttons, Text, Badges in Compose.

Then the next task was to Design this screen in Compose.

The purpose of the screen was to only show the exam overview and navigate to the next screen. It has different sections as showing in Figma mockup.

🤔 But why we are discussing all these things are here?

You can see the Social icons in the ExamOverview section which is responsible to share the respected exam to social apps. But the main requirement was,

Product Manager to Me →With Sharing Option The Exam Overview section view should be sharable as Image to social apps, I said, Okay Bro!

This was not a big deal if the screen was in the Android View System but the screen was in Jetpack Compose UI, and as per my research, for now, there is no way to generate a bitmap of Composable View which renders and visible on Screen.

🥱 So What I did to Generate a Bitmap of Composable?

Thanks to AbstractComposeView class which provides Interoperability with Compose UI to Android View and vice-versa.

AbstractComposeView provides the abstract Content() The composable function that accepts the Composable UI. Voila, that's only what we want for our requirement. Now we are gonna passing our ExamOverview Composable UI to this Content() function of AbstractComposeView .

Enough Abstraction, show me the implementation 😒

We will use JetCaptureexample for a new implementation, as shown in the below app, there is ProfileCard and Capture button, this screen is made up of pure Compose UI and I want to share ProfileCard as an Image via Intent.

📝 Steps to Perform

1. Create Compose UI which you want to convert to Bitmap
2. Create CustomView and pass the Above compose UI to it
3. Render created Custom Android view in Compose World
4. Get custom view instance as View and generate Bitmap

So, We are converting our ComposeUI to Android CustomView by wrapping and passing the ProfileCard() Composable to new Class name as ProfileCardView.kt by extending AbstractComposeView , and call Composable UI function which you want to render on screen, code as below

This composable will render on screen as Android View ( Android CustomView for Compose World )

And will use this ProfileCardView customview in our Activity like as below

Here we are following the Android Views in Composebecause our ProfileCardView is now Android View component and we are using it in Compose World now by using AndroidView() Composable function

To get the instance of ProfileCardView we are getting reference of itself after post rendering on screen i.e in postRunnable in MutableState of type ProfileCardView and further in future, we can use this view object to Generate the Bitmap object of View

As you are an Android developer my friend you already know how to generate Bitmap from Android View 😉 if not, below is the gist I am providing

Finally, we have achieved output as following 😍

Complete Sample source code is here 👇🏼

Give a Clap 👏🏽 if you find this article as helpful

❤️ Happy Coding!

Connect with me on Social handles 😀

🐦 Twitter | 👨🏽‍💻 Linkedin | 📱Instagram