How to Save Composite Images with Stickers in Kotlin Compose?

Introduction

Creating an interactive image-editing application in Android using Jetpack Compose is an exciting project, especially when it involves allowing users to add stickers to their photos before saving the final composite image. In this article, we will explore how to manage and save a background image with overlaid stickers in a Kotlin Compose application.

Understanding the Problem

While constructing your Compose UI, you've successfully managed the selection of a photo from the gallery and added stickers that users can manipulate. But you face challenges with the saving mechanism, specifically how to merge the background image and stickers into a single image file. This is a common requirement for developers crafting engaging photo editing apps.

Solution Overview

To save an image that includes stickers, we must take a few strategic steps. This involves rendering the composables to a Bitmap, merging them, and then saving the resulting Bitmap to the device storage. Below, we'll break down the process into clear steps.

Step 1: Create a Bitmap from Composable

First, we need to define a function that captures the current Compose UI as a Bitmap. This is achieved using the GraphicsLayer and Canvas APIs.

fun captureComposableToBitmap(composable: @Composable () -> Unit): Bitmap {
    val density = LocalDensity.current.density
    val bitmap = Bitmap.createBitmap((imageSize.value.width * density).toInt(), (imageSize.value.height * density).toInt(), Bitmap.Config.ARGB_8888)
    val canvas = Canvas(bitmap)

    // Creating a composable scope to draw the UI into Bitmap  
    val composition = rememberCompositionLocalOf { -1 }
    composition.apply { composable() }
    Layout(content = composable, modifier = Modifier.size( bitmap.width.toDp(), bitmap.height.toDp() ))

    return bitmap
}

Step 2: Merge the Background and Stickers

Now, after obtaining a Bitmap representation of your composables, you’ll want to overlay the stickers onto this Bitmap. Here’s how you can do this:

fun drawStickersOnBitmap(original: Bitmap, stickers: List): Bitmap {
    val canvas = Canvas(original)
    val paint = Paint().apply { isAntiAlias = true }

    for (sticker in stickers) {
        val stickerBitmap = BitmapFactory.decodeResource(context.resources, sticker.resourceId)
        canvas.drawBitmap(stickerBitmap, sticker.x, sticker.y, paint) // you can also adjust scale and rotation here
    }

    return original
}

Step 3: Save the Final Composite Image

After merging, you can save the resulting Bitmap. We will use the MediaStore or a file output stream to write the bitmap to storage. Here’s how:

fun saveImageToGallery(bitmap: Bitmap, context: Context) {
    val savedImageURI = MediaStore.Images.Media.insertImage(
        context.contentResolver,
        bitmap,
        "Composite_Image",
        "Composite Image with Stickers"
    )
    if (savedImageURI != null) {
        Toast.makeText(context, "Image Saved Successfully!", Toast.LENGTH_SHORT).show()
    } else {
        Toast.makeText(context, "Image Saving Failed!", Toast.LENGTH_SHORT).show()
    }
}

Complete Saving Process

To execute these methods, you can create a function that will capture the composable, merge stickers, and save it all:

fun saveCompositeImage(composable: @Composable () -> Unit, stickers: List, context: Context) {
    val bitmap = captureComposableToBitmap(composable)
    val finalImage = drawStickersOnBitmap(bitmap, stickers)
    saveImageToGallery(finalImage, context)
}

Frequently Asked Questions

How do I manage the permissions to save images?

It's crucial to request runtime permissions for writing to external storage. Ensure you handle these permissions gracefully in your application.

Can I adjust the size/scale of the stickers before saving?

Yes, you can store the size and rotation values for each sticker in your StickerModel and apply these when drawing them on the canvas.

Conclusion

By following these steps, you can effectively create and save composite images with stickers in a Kotlin Compose application. This capability adds a significant interactive feature that can greatly enhance user engagement. Enjoy creating captivating image-editing applications with Kotlin and Jetpack Compose!