IntroductionCreating 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 ProblemWhile 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 OverviewTo 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 ComposableFirst, 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 StickersNow, 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 ImageAfter 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 ProcessTo 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 QuestionsHow 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.ConclusionBy 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!

When starting a web project (especially from scratch), a font is one of the questions that can spill the project into red relatively fast.Understand the Typography evokes emotions and as such it effects how people perceive, relate, trust and make buying decisions about the product, company or service.As a developer you take care about performance, cross platform support and technical accessibility.
First, identify the typeface—and specific font styles—you need to implement (ask your designer if in doubt ?).
Deliver. Start with web-safe fonts, fonts already existing in your UI toolkit/CSS framework)
and fonts hosted on common font hosting platforms such as Google Fonts, Adobe Fonts, Monotype

If dependence on, or access to a 3rd party provider is a concern, self-host your fonts for total control.


High level points:

You need a license to self-host a downloaded type.
There are many font file formats (svg, otf, ttf, woff, woff2).
Modern web format is woff (Web Open Font Format) with ~97% browser support. Version 2 is using Brotli compression and is ~20% - 50% more efficient.



Cool links:

Pair fonts with AI on Fontjoy

Edit Glyphs in glyphr studio

Learn Glyphs on Glyphs




Sandbox Tests:

Fonts 101
Web save fonts
Generic fonts
Google web fonts
Enjoy selecting, managing and deploying fonts faster.
It used to be much harder..

## ? Why I Built Link-Trim.in
A few months ago, I needed a no-nonsense URL shortener for personal projects—something ad-free, lightweight, and easy to deploy. Existing tools felt bloated, so I built Link-Trim.in. Here’s how I went from a domain name to a live app, with some hard-earned lessons along the way.


Step 1: Choosing Binding the Domain

Goal: A short, memorable name.
Went with Link-Trim.in (cheap TLD + clear purpose).
Registrar: Namecheap (for simplicity).
Challenge: DNS propagation delays (tip: test with dig + patience).



Step 2: The Stack

Frontend: Next.js (App Router) + TailwindCSS
Database: MongoDB (free tier)
Hosting: Vercel (with domain binding)
Docs: Single README.md to rule them all
No auth, no SSR, no unnecessary abstractions—just a fast, functional URL shortener.



Step 3: Domain Binding on Vercel

Bought link-trim.in (Namecheap).
Changed nameservers to Vercel’s (or added A/CNAME records).
SSL certs auto-provisioned (love this about Vercel).



Step 4: Try It Out
Link-Trim.in is live—use it, fork it, or roast it!