Skip to content

Instantly share code, notes, and snippets.

@Moes81
Created August 22, 2025 09:08
Show Gist options
  • Save Moes81/8dae881230e3af0eb79a07e7cdea0456 to your computer and use it in GitHub Desktop.
Save Moes81/8dae881230e3af0eb79a07e7cdea0456 to your computer and use it in GitHub Desktop.
Compose (Multiplatform) way of using an image as background for a text
// idea taken from: https://slack-chats.kotlinlang.org/t/29746652/hey-guys-i-mask-text-with-an-image-in-compose-multiplatform-#5cc6a195-3c19-4ddf-a3aa-9f7a222ce8fd
val image = ImageBitmap.imageResource(id = R.drawable.download_demo) // your image
Text(
text = "LION",
fontSize = 100.sp,
fontWeight = FontWeight.ExtraBold,
letterSpacing = (-2).sp, // optional, tighter look
modifier = Modifier
// draw text offscreen so blend mode works correctly
.graphicsLayer { compositingStrategy = CompositingStrategy.Offscreen }
.drawWithCache {
val dst = IntSize(size.width.roundToInt(), size.height.roundToInt())
onDrawWithContent {
// 1) draw the text (destination)
drawContent()
// 2) draw the image using SrcIn so it shows only where text exists
drawImage(
image = image,
dstSize = dst,
blendMode = BlendMode.SrcIn
)
}
}
)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment