Stay organized with collections
Save and categorize content based on your preferences.
In Compose, a Painter object is used to represent something that can be drawn
(a replacement to the Drawable APIs defined in Android) and influence
measurement and layout of the corresponding composable that is using it . A
BitmapPainter takes an ImageBitmap that can draw a Bitmap on screen.
For most use cases, using the painterResource() above returns the correct
painter for the asset (i.e. BitmapPainter or VectorPainter). For more
information on the differences between the two - read the ImageBitmap vs ImageVector section.
A Painter is different from a DrawModifier, which strictly draws within the
bounds that are given to it and has no influence on the measurement or layout of
the composable.
To create a custom painter, extend the Painter class, and implement the
onDraw method, which allows access to the DrawScope to draw custom
graphics. You can also override the intrinsicSize, which will be used to
influence the Composable that it is contained in:
classOverlayImagePainterconstructor(privatevalimage:ImageBitmap,privatevalimageOverlay:ImageBitmap,privatevalsrcOffset:IntOffset=IntOffset.Zero,privatevalsrcSize:IntSize=IntSize(image.width,image.height),privatevaloverlaySize:IntSize=IntSize(imageOverlay.width,imageOverlay.height)):Painter(){privatevalsize:IntSize=validateSize(srcOffset,srcSize)overridefunDrawScope.onDraw(){// draw the first image without any blend modedrawImage(image,srcOffset,srcSize,dstSize=IntSize(this@onDraw.size.width.roundToInt(),this@onDraw.size.height.roundToInt()))// draw the second image with an Overlay blend mode to blend the two togetherdrawImage(imageOverlay,srcOffset,overlaySize,dstSize=IntSize(this@onDraw.size.width.roundToInt(),this@onDraw.size.height.roundToInt()),blendMode=BlendMode.Overlay)}/** * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height */overridevalintrinsicSize:Sizeget()=size.toSize()privatefunvalidateSize(srcOffset:IntOffset,srcSize:IntSize):IntSize{require(srcOffset.x>=0&&
srcOffset.y>=0&&
srcSize.width>=0&&
srcSize.height>=0&&
srcSize.width<=image.width&&
srcSize.height<=image.height)returnsrcSize}}
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-08-26 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-26 UTC."],[],[],null,["In Compose, a `Painter` object is used to represent something that can be drawn\n(a replacement to the `Drawable` APIs defined in Android) and influence\nmeasurement and layout of the corresponding composable that is using it . A\n`BitmapPainter` takes an `ImageBitmap` that can draw a `Bitmap` on screen.\n\nFor most use cases, using the `painterResource()` above returns the correct\npainter for the asset (i.e. `BitmapPainter` or `VectorPainter`). For more\ninformation on the differences between the two - read the [ImageBitmap vs ImageVector](/develop/ui/compose/graphics/images/compare) section.\n\nA `Painter` is different from a `DrawModifier`, which strictly draws within the\nbounds that are given to it and has no influence on the measurement or layout of\nthe composable.\n\nTo create a custom painter, extend the `Painter` class, and implement the\n`onDraw` method, which allows access to the `DrawScope` to draw custom\ngraphics. You can also override the `intrinsicSize`, which will be used to\ninfluence the Composable that it is contained in:\n\n\n```kotlin\nclass OverlayImagePainter constructor(\n private val image: ImageBitmap,\n private val imageOverlay: ImageBitmap,\n private val srcOffset: IntOffset = IntOffset.Zero,\n private val srcSize: IntSize = IntSize(image.width, image.height),\n private val overlaySize: IntSize = IntSize(imageOverlay.width, imageOverlay.height)\n) : Painter() {\n\n private val size: IntSize = validateSize(srcOffset, srcSize)\n override fun DrawScope.onDraw() {\n // draw the first image without any blend mode\n drawImage(\n image,\n srcOffset,\n srcSize,\n dstSize = IntSize(\n this@onDraw.size.width.roundToInt(),\n this@onDraw.size.height.roundToInt()\n )\n )\n // draw the second image with an Overlay blend mode to blend the two together\n drawImage(\n imageOverlay,\n srcOffset,\n overlaySize,\n dstSize = IntSize(\n this@onDraw.size.width.roundToInt(),\n this@onDraw.size.height.roundToInt()\n ),\n blendMode = BlendMode.Overlay\n )\n }\n\n /**\n * Return the dimension of the underlying [ImageBitmap] as it's intrinsic width and height\n */\n override val intrinsicSize: Size get() = size.toSize()\n\n private fun validateSize(srcOffset: IntOffset, srcSize: IntSize): IntSize {\n require(\n srcOffset.x \u003e= 0 &&\n srcOffset.y \u003e= 0 &&\n srcSize.width \u003e= 0 &&\n srcSize.height \u003e= 0 &&\n srcSize.width \u003c= image.width &&\n srcSize.height \u003c= image.height\n )\n return srcSize\n }\n}https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/CustomPainterSnippets.kt#L79-L128\n```\n\n\u003cbr /\u003e\n\nNow that we have our custom `Painter`, we can overlay any image on top of our\nsource image as follows:\n\n\n```kotlin\nval rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)\nval dogImage = ImageBitmap.imageResource(id = R.drawable.dog)\nval customPainter = remember {\n OverlayImagePainter(dogImage, rainbowImage)\n}\nImage(\n painter = customPainter,\n contentDescription = stringResource(id = R.string.dog_content_description),\n contentScale = ContentScale.Crop,\n modifier = Modifier.wrapContentSize()\n)https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/CustomPainterSnippets.kt#L64-L74\n```\n\n\u003cbr /\u003e\n\nThe output of combining the two images with a custom painter can be seen below:\n**Figure 1**: Custom Painter that overlays two images on top of each other\n\nA custom painter can also be used with the [`Modifier.paint(customPainter)`](/reference/kotlin/androidx/compose/ui/draw/package-summary#(androidx.compose.ui.Modifier).paint(androidx.compose.ui.graphics.painter.Painter,kotlin.Boolean,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter))\nto draw the content to a composable as follows:\n\n\n```kotlin\nval rainbowImage = ImageBitmap.imageResource(id = R.drawable.rainbow)\nval dogImage = ImageBitmap.imageResource(id = R.drawable.dog)\nval customPainter = remember {\n OverlayImagePainter(dogImage, rainbowImage)\n}\nBox(\n modifier =\n Modifier.background(color = Color.Gray)\n .padding(30.dp)\n .background(color = Color.Yellow)\n .paint(customPainter)\n) { /** intentionally empty **/ }https://github.com/android/snippets/blob/dd30aee903e8c247786c064faab1a9ca8d10b46e/compose/snippets/src/main/java/com/example/compose/snippets/images/CustomPainterSnippets.kt#L135-L146\n```\n\n\u003cbr /\u003e\n\n| **Note:** The above custom Painter can also be implemented using a `DrawModifier`. If you need to influence measurement or layout, then you should use a `Painter`. If you are only expecting to render in the bounds you are given, then you should use a `DrawModifier` instead.\n\nRecommended for you\n\n- Note: link text is displayed when JavaScript is off\n- [ImageBitmap vs ImageVector {:#bitmap-vs-vector}](/develop/ui/compose/graphics/images/compare)\n- [Graphics in Compose](/develop/ui/compose/graphics/draw/overview)\n- [Loading images {:#loading-images}](/develop/ui/compose/graphics/images/loading)"]]