---
title: "Image"
description: "A composable that lays out and draws a given [ImageBitmap]. This will attempt to size the
composable according to the [ImageBitmap]'s given width and height. However, an optional
[Modifier] parameter can be provided to adjust sizing or draw additional content (ex.
background). Any unspecified dimension will leverage the [ImageBitmap]'s size as a minimum
constraint.
The following sample shows basic usage of an Image composable to position and draw an
[ImageBitmap] on screen
For use cases that require drawing a rectangular subset of the [ImageBitmap] consumers can use
overload that consumes a [Painter] parameter shown in this sample"
type: "composable"
---
Composable Function
Common
> **Deprecated** Consider usage of the Image composable that consumes an optional FilterQuality parameter
```kotlin
@Composable
fun Image(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
)
```
A composable that lays out and draws a given `ImageBitmap`. This will attempt to size the
composable according to the `ImageBitmap`'s given width and height. However, an optional
`Modifier` parameter can be provided to adjust sizing or draw additional content (ex.
background). Any unspecified dimension will leverage the `ImageBitmap`'s size as a minimum
constraint.
The following sample shows basic usage of an Image composable to position and draw an
`ImageBitmap` on screen
For use cases that require drawing a rectangular subset of the `ImageBitmap` consumers can use
overload that consumes a `Painter` parameter shown in this sample
#### Parameters
| | |
| --- | --- |
| bitmap | The `ImageBitmap` to draw |
| contentDescription | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| modifier | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| alignment | Optional alignment parameter used to place the `ImageBitmap` in the given bounds defined by the width and height |
| contentScale | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `ImageBitmap` |
| alpha | Optional opacity to be applied to the `ImageBitmap` when it is rendered onscreen |
| colorFilter | Optional ColorFilter to apply for the `ImageBitmap` when it is rendered onscreen |
Common
```kotlin
@Composable
fun Image(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
filterQuality: FilterQuality = DefaultFilterQuality,
)
```
A composable that lays out and draws a given `ImageBitmap`. This will attempt to size the
composable according to the `ImageBitmap`'s given width and height. However, an optional
`Modifier` parameter can be provided to adjust sizing or draw additional content (ex.
background). Any unspecified dimension will leverage the `ImageBitmap`'s size as a minimum
constraint.
The following sample shows basic usage of an Image composable to position and draw an
`ImageBitmap` on screen
For use cases that require drawing a rectangular subset of the `ImageBitmap` consumers can use
overload that consumes a `Painter` parameter shown in this sample
#### Parameters
| | |
| --- | --- |
| bitmap | The `ImageBitmap` to draw |
| contentDescription | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| modifier | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| alignment | Optional alignment parameter used to place the `ImageBitmap` in the given bounds defined by the width and height |
| contentScale | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `ImageBitmap` |
| alpha | Optional opacity to be applied to the `ImageBitmap` when it is rendered onscreen |
| colorFilter | Optional ColorFilter to apply for the `ImageBitmap` when it is rendered onscreen |
| filterQuality | Sampling algorithm applied to the `bitmap` when it is scaled and drawn into the destination. The default is `FilterQuality.Low` which scales using a bilinear sampling algorithm |
Common
```kotlin
@Composable
fun Image(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
) =
Image(
painter = rememberVectorPainter(imageVector),
contentDescription = contentDescription,
modifier = modifier,
alignment = alignment,
contentScale = contentScale,
alpha = alpha,
colorFilter = colorFilter,
)
```
A composable that lays out and draws a given `ImageVector`. This will attempt to size the
composable according to the `ImageVector`'s given width and height. However, an optional
`Modifier` parameter can be provided to adjust sizing or draw additional content (ex.
background). Any unspecified dimension will leverage the `ImageVector`'s size as a minimum
constraint.
#### Parameters
| | |
| --- | --- |
| imageVector | The `ImageVector` to draw |
| contentDescription | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| modifier | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| alignment | Optional alignment parameter used to place the `ImageVector` in the given bounds defined by the width and height |
| contentScale | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `ImageVector` |
| alpha | Optional opacity to be applied to the `ImageVector` when it is rendered onscreen |
| colorFilter | Optional ColorFilter to apply for the `ImageVector` when it is rendered onscreen |
Common
```kotlin
@Composable
fun Image(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null,
)
```
Creates a composable that lays out and draws a given `Painter`. This will attempt to size the
composable according to the `Painter`'s intrinsic size. However, an optional `Modifier` parameter
can be provided to adjust sizing or draw additional content (ex. background)
**NOTE** a Painter might not have an intrinsic size, so if no LayoutModifier is provided as part
of the Modifier chain this might size the `Image` composable to a width and height of zero and
will not draw any content. This can happen for Painter implementations that always attempt to
fill the bounds like `ColorPainter`
#### Parameters
| | |
| --- | --- |
| painter | to draw |
| contentDescription | text used by accessibility services to describe what this image represents. This should always be provided unless this image is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using `androidx.compose.ui.res.stringResource` or similar |
| modifier | Modifier used to adjust the layout algorithm or draw decoration content (ex. background) |
| alignment | Optional alignment parameter used to place the `Painter` in the given bounds defined by the width and height. |
| contentScale | Optional scale parameter used to determine the aspect ratio scaling to be used if the bounds are a different size from the intrinsic size of the `Painter` |
| alpha | Optional opacity to be applied to the `Painter` when it is rendered onscreen the default renders the `Painter` completely opaque |
| colorFilter | Optional colorFilter to apply for the `Painter` when it is rendered onscreen |
## Code Examples
### BitmapPainterSample
```kotlin
@Composable
fun BitmapPainterSample() {
val customPainter = remember {
object : Painter() {
override val intrinsicSize: Size
get() = Size(100.0f, 100.0f)
override fun DrawScope.onDraw() {
drawRect(color = Color.Cyan)
}
}
}
Image(
painter = customPainter,
contentDescription = "Localized description",
modifier = Modifier.size(100.dp, 100.dp),
)
}
```
### BitmapPainterSubsectionSample
```kotlin
@Composable
fun BitmapPainterSubsectionSample() {
val ImageBitmap = createTestImage()
// Lays out and draws an image sized to the rectangular subsection of the ImageBitmap
Image(
painter = BitmapPainter(ImageBitmap, IntOffset(10, 12), IntSize(50, 60)),
contentDescription = "Localized description",
)
}
```
### ImageSample
```kotlin
@Composable
fun ImageSample() {
val ImageBitmap = createTestImage()
// Lays out and draws an image sized to the dimensions of the ImageBitmap
Image(bitmap = ImageBitmap, contentDescription = "Localized description")
}
```