How to add Image in Android using Jetpack Compose

Question

I am trying to add Image to the activity using Android Jetpack Compose but it is giving error:

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image


class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            Image(bitmap = imageFromResource(res = resources, resId =R.drawable.ic_launcher_background))
        }
    }
}

This is the screenshot of Android Studio

score 8 · Answer 1 · answered Mar 09 '21 at 09:00

most of the cases for local image loading can be done using painterResource in Image

for example:

Image(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "")

or if you are interested in changing the color of the image asset, then use Icon with painterResource

Icon(painter = painterResource(id = R.drawable.ic_launcher_background), contentDescription = "", tint = Color.Red)

or if you want to load from Remote URL then use Coil

add dependency:

implementation "dev.chrisbanes.accompanist:accompanist-coil:0.6.1"

and then use it like below:

 CoilImage(
                data = "https://www.instaily.com/images/android.jpg",
                contentDescription = "android",
                alignment = Alignment.TopCenter,
                modifier = Modifier
                    .fillMaxWidth()
                    .fillMaxHeight(.60f),
                contentScale = ContentScale.Crop,
                loading = {
                    Box(
                        modifier = Modifier.background(
                            shape = RoundedCornerShape(20.dp),
                            color = Teal200
                        )
                    )
                },
                error = {
                    Box(
                        modifier = Modifier.background(
                            shape = RoundedCornerShape(20.dp),
                            color = Teal200
                        )
                    )
                }
            )

score 5 · Accepted Answer · answered Mar 08 '21 at 09:37

Either of these can be used to get the image resource.

Use the painterResource API to load either vector drawables or rasterized asset formats like PNGs. You don't need to know the type of the drawable, simply use painterResource.

import androidx.compose.ui.res.painterResource

        Image(painterResource(id = imageResource), contentDescription = contentDescription)

OR

import androidx.compose.ui.graphics.ImageBitmap
import androidx.compose.ui.res.imageResource

        Image(ImageBitmap.imageResource(id = imageResource), contentDescription = contentDescription)

OR

import androidx.compose.ui.res.vectorResource

        Image(ImageVector.vectorResource(id = imageResource), contentDescription = contentDescription)

score 2 · Answer 3 · answered Mar 08 '21 at 05:52

2

This is another alternative working code for this problem:

Code:

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

Output:

answered Mar 08 '21 at 05:52

Suraj Shende

199
1
2
10

How to add Image in Android using Jetpack Compose

3 Answers3