How to load Image from drawable in Jetpack compose?

Question

I have tried below code but it reflects nothing in the UI, I'm missing anything here?

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                Image(
                    (ResourcesCompat.getDrawable(
                        resources,
                        R.mipmap.ic_launcher,
                        null
                    ) as BitmapDrawable).bitmap
                )
            }
        }
    }
}

Gabriele Mariotti · Accepted Answer · 2022-01-11T08:02:01.070

144

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

edited Jan 11 '22 at 08:02

answered Oct 25 '19 at 06:34

Gabriele Mariotti

320,139
94
887
841

How can u get imageresource from a url via picasso? Picasso.load u can pass on a imageview to it – Jono Oct 07 '20 at 15:13
6

Or `vectorResource` if it's a vector image. – Daniels Šatcs Nov 09 '20 at 20:33
2

And use Coil for remote image urls. – Alt-Cat Sep 01 '21 at 17:33
1

Can you point to some doc that explains other types of images generally used in Android. I want to know which type of images are not supported with this. – Tushar Kathuria Jan 21 '22 at 08:21
1

In case anyone is struggling with the import `import androidx.compose.foundation.Image` – Yash Mar 18 '23 at 05:31

score 27 · Answer 2 · edited Feb 28 '21 at 07:09

27

Starting at version 1.0.0-beta01:

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

edited Feb 28 '21 at 07:09

riggaroo

2,584
20
34

answered Feb 25 '21 at 20:10

Cristan

12,083
7
65
69

score 11 · Answer 3 · edited Jul 06 '22 at 22:22

11

Try This one but if you copy the code and then paste it I don't know why but it won't work so just type it as it is and replace the image id

Image(
  painter = painterResource(id = R.drawable.tanjim),
  contentDescription = null,
)

edited Jul 06 '22 at 22:22

Jared Burrows

54,294
25
151
185

answered Aug 21 '21 at 15:46

Tanjim ahmed

473
4
15

score 8 · Answer 4 · answered Mar 27 '21 at 09:37

As imageResourceis not available anymore, the solutions with painterResource are indeed correct, e.g.

Image(painter = painterResource(R.drawable.ic_heart), contentDescription = "content description")

But you can actually still use Bitmap instead of drawable if you need so:

Image(bitmap = bitmap.asImageBitmap())

.asImageBitmap() is an extensions on Bitmap that compose provides and it creates an ImageBitmap from the given Bitmap.

Ali Azaz Alam · Answer 5 · 2020-07-05T11:32:58.743

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:

`imageResource` in not available anymore – MSpeed Nov 17 '21 at 12:19 — MSpeed, Nov 17 '21 at 12:19

score 4 · Answer 6 · answered Mar 01 '21 at 10:02

4

version=1.0.0-beta01,use painterResource,imageResource has been deleted.

example

Image(
    painterResource(R.drawable.ic_vector_or_png),
    contentDescription = null,
    modifier = Modifier.requiredSize(50.dp)
)

android developer doc

answered Mar 01 '21 at 10:02

Lgufan

95
4

score 3 · Answer 7 · edited Jul 06 '22 at 22:21

3

With version 1.0.0-beta01

It's like below

Image(
  painter = painterResource(R.drawable.header),
  contentDescription = null,
)

edited Jul 06 '22 at 22:21

Jared Burrows

54,294
25
151
185

answered Feb 25 '21 at 21:01

salih

727
13
36

score 2 · Answer 8 · answered Oct 24 '19 at 10:35

@Composable
fun loadUi() {
val image = +imageResource(R.drawable.header)
    CraneWrapper {
        MaterialTheme {
            Container(expanded = true,height = 180.dp) {
                //Use the Clip() function to round the corners of the image
                Clip(shape = RoundedCornerShape(8.dp)) {
                //call DrawImage() to add the graphic to the app
                    DrawImage(image)
                }
            }
        }
    }
}

I don't think DrawImage is available anymore :( – methodsignature Apr 24 '20 at 23:53 — methodsignature, Apr 24 '20 at 23:53

score 1 · Answer 9 · answered Jun 28 '19 at 13:02

1

I found that there is a function imageFromResource() in AndroidImage.kt:

fun imageFromResource(res: Resources, resId: Int): Image {
    return AndroidImage(BitmapFactory.decodeResource(res, resId))
}

so your code would be:

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        loadUi()
    }
}

@Composable
fun loadUi() {
    CraneWrapper {
        MaterialTheme {
            val image = imageFromResource(resources, R.mipmap.ic_launcher)
            SimpleImage(image)
        }
    }
}

}

answered Jun 28 '19 at 13:02

Mihaela Romanca

1,368
2
14
23

I'm not able to get `AndroidImage` can you please share the reference? – Maddy Jul 04 '19 at 13:07
I think it's internal, you should only use val image = imageFromResource(resources, R.mipmap.ic_launcher) – Mihaela Romanca Jul 08 '19 at 07:41
1

It is showing compile time error, because of `imageFromResource` is nowhere to be found. Can you share the internal class name where this method is defined? – Maddy Jul 08 '19 at 10:13
1

You may have an older version of compose. I have followed the steps from here: https://android.jlelse.eu/jetpack-compose-primer-92ff005b7ce2. The imageFromResource function is in androidx.ui.painting.AndroidImage.kt. Here it is: https://android.googlesource.com/platform/frameworks/support/+/refs/heads/androidx-master-dev/ui/core/src/main/java/androidx/ui/painting/AndroidImage.kt – Mihaela Romanca Jul 09 '19 at 07:40
1

From where is ```resources```? Can't find any here. – Lucas Sousa Dec 12 '19 at 14:10
Not seeing this anywhere. Please include what package this is coming from. – lostintranslation May 17 '23 at 18:28

score 0 · Answer 10 · answered Jun 27 '19 at 09:03

I found SimpleImage class from jetpack compose library to load the image but this is a temporary solution, and I didn't find any styling option with this yet.

// TODO(Andrey) Temporary. Should be replaced with our proper Image component when it available
@Composable
fun SimpleImage(
    image: Image
) {
    // TODO b132071873: WithDensity should be able to use the DSL syntax
    WithDensity(block = {
        Container(width = image.width.toDp(), height = image.height.toDp()) {
            Draw { canvas, _ ->
                canvas.drawImage(image, Offset.zero, Paint())
            }
        }
    })
}

I have used it in this way

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            loadUi()
        }
    }

    @Composable
    fun loadUi() {
        CraneWrapper {
            MaterialTheme {
                val bitmap = (ResourcesCompat.getDrawable(
                        resources,
                        R.mipmap.ic_launcher,
                        null
                    ) as BitmapDrawable).bitmap
                SimpleImage(Image(bitmap))
            }
        }
    }
}

Still, I'm not sure this is the correct way of loading image from drawables.

score 0 · Answer 11 · answered May 23 '23 at 10:06

If you have a Drawable instance, you can use Accompanist Drawable Painter:

https://google.github.io/accompanist/drawablepainter/

dependencies {
    implementation("com.google.accompanist:accompanist-drawablepainter:<version>") // TODO: Replace <version> with actual version
}

Example:

Image(
    painter = rememberDrawablePainter(drawable = yourDrawable),
    contentDescription = yourContentDescriptionIfAny,
)

score -1 · Answer 12 · answered Dec 16 '19 at 11:02

Google updated their API. For 0.1.0-dev03 loading images is synchronous and is done this way

val icon = +imageResource(R.drawable.ic_xxx)

To draw the image

Container(modifier = Height(100.dp) wraps Expanded) {
   DrawImage(icon)
}

Currently the above code relies on you specifying either the exact height or width. It seems that scaling the image is not supported if you want for example 100 dp height and wrap_content instead of Expanded which expands the full width. Does any one know how to solve this issue? Also is possible to fit the image inside it's container like old way scaleType=fitCenter?

How to load Image from drawable in Jetpack compose?

12 Answers12

Linked

Related