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() )}
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: