DEV Community

rrtutors
rrtutors

Posted on • Originally published at rrtutors.com

Jetpack Compose Image Example

In this Jetpack compose example we cover how to load image in Jetpack compose. Jetpack compose provided Image() Composable to work with images in Compose.

ImageView is also commonly used to apply tints to an image and handle image scaling. But In Jetpack Compose there is no ImageView instead we simple have Image which is used to display Images. It is similar to an ImageView in the classic Android View system.

Jetpack compose image
Let's check Image properties

@Composable
fun Image(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha,
    colorFilter: ColorFilter? = null
) 

Enter fullscreen mode Exit fullscreen mode

Let's Load image into composable by below code

@Composable
fun LoadFromResourceDemo(){
    val image: Painter = painterResource(id = R.drawable.image1)
    Image(painter = image,contentDescription = "image",)
}
Enter fullscreen mode Exit fullscreen mode

Read about How to load image from url in Jetpack compose

Discussion (0)