← Compose Multiplatform Component in Compose Foundation
Image
Common
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.
Last updated:
Installation
dependencies {
implementation("androidx.compose.foundation:foundation:1.7.0-beta04")
}
Overloads
@NonRestartableComposable
@Deprecated(
"Consider usage of the Image composable that consumes an optional FilterQuality parameter",
level = DeprecationLevel.HIDDEN,
replaceWith = ReplaceWith(
expression = "Image(bitmap, contentDescription, modifier, alignment, contentScale, " +
"alpha, colorFilter, DefaultFilterQuality)",
"androidx.compose.foundation",
"androidx.compose.ui.graphics.DefaultAlpha",
"androidx.compose.ui.Alignment",
"androidx.compose.ui.graphics.drawscope.DrawScope.Companion.DefaultFilterQuality",
"androidx.compose.ui.layout.ContentScale.Fit"
)
@Composable
fun Image(
bitmap: ImageBitmap,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
Parameters
| name | description |
|---|---|
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 |
@NonRestartableComposable
@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
)
Parameters
| name | description |
|---|---|
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 |
@NonRestartableComposable
@Composable
fun Image(
imageVector: ImageVector,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
Parameters
| name | description |
|---|---|
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 |
@Composable
fun Image(
painter: Painter,
contentDescription: String?,
modifier: Modifier = Modifier,
alignment: Alignment = Alignment.Center,
contentScale: ContentScale = ContentScale.Fit,
alpha: Float = DefaultAlpha,
colorFilter: ColorFilter? = null
)
Parameters
| name | description |
|---|---|
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
ImageSample
@Composable
@Sampled
fun ImageSample() {
val ImageBitmap = createTestImage()
// Lays out and draws an image sized to the dimensions of the ImageBitmap
Image(bitmap = ImageBitmap, contentDescription = "Localized description")
}
BitmapPainterSubsectionSample
@Composable
@Sampled
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"
)
}
BitmapPainterSample
@Composable
@Sampled
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)
)
}
