How to load Image from drawable in Jetpack compose? How to load Image from drawable in Jetpack compose? android android

How to load Image from drawable in Jetpack compose?


With 1.0.x you can use the painterResource function:

 Image(painterResource(R.drawable.ic_xxxx),"content description")

The resources with the given id must point to either fully rasterized images (ex. PNG or JPG files) or VectorDrawable xml assets.
It means that this method can load either an instance of BitmapPainter or VectorPainter for ImageBitmap based assets or vector based assets respectively.

Example:

Card(    modifier = Modifier.size(48.dp).tag("circle"),    shape = CircleShape,    elevation = 2.dp) {    Image(        painterResource(R.drawable.ic_xxxx),        contentDescription = "",        contentScale = ContentScale.Crop,        modifier = Modifier.fillMaxSize()    )}

enter image description here


Starting at version 1.0.0-beta01:

Image(    painter = painterResource(R.drawable.your_drawable),    contentDescription = "Content description for visually impaired")


Working in 0.1.0-dev14

Loading drawable in Image could be achieve from this:

Image(      imageResource(id = R.drawable.scene_01),      modifier = Modifier.preferredHeightIn(160.dp, 260.dp)                    .fillMaxWidth(),      contentScale = ContentScale.Crop   )

Now, I'm trying to upload drawable in Circle Image that sounds tricky but too easy in JetPack Compose. You can do achieve in this way:

Image(         asset = imageResource(id = R.drawable.scene_01),         modifier = Modifier.drawBackground(                    color = Color.Black,                    style = Stroke(4f),                    shape = CircleShape          ).preferredSize(120.dp)                    .gravity(Alignment.CenterHorizontally)                    .clip(CircleShape),          contentScale = ContentScale.FillHeight      )

Output:

enter image description here