Compose Imageview - How to show Image in Imageview

Last updated Oct 01, 2021

In this Jetpack compose tutorial we will learn how to show Image in Image View in Android application. To work with images in Jetpack Compose we will use Image Composable, which contains differnt properties to load images from drawable folder, load bitmaps and also we can load images from network or Url.

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.

Properties of Image Composable

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

Let's creat jetpack compose image composable example

Step 1: Create android application in android studio

Step 2: Follow step for setup Jetpack Compose with Android Studio

Step 3: Add Image in MainActivity.kt

How do we load Image from Drawable folder with Compose?

To load Images from drawable folder we will use Image() composable function with painter property. To painter property we will asign resource id from drawable folder and create Painter.

load image by painterResource to load an image from the resources

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

Load Image from Network (Url)

To load image from url in Jetpack compose we will use Glide image library similar to normal android application

Glide supports fetching, decoding, and displaying video stills, images, and animated GIFs. Glide includes a flexible API that allows developers to plug in to almost any network stack. By default Glide uses a custom HttpUrlConnection based stack, but also includes utility libraries plug in to Google's Volley project or Square's OkHttp library instead.

Add to your app/build.gradle file:

repositories {
    google()
    mavenCentral()
}

dependencies {
    implementation 'com.github.bumptech.glide:glide:4.12.0'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.12.0'
}

add Internet permission to AppManifest file

add composbale function to load image from url

@Composable
fun LoadFromUrlDemo() {
    val bitmap = remember { mutableStateOf(null) }
    val context = LocalContext.current
    Glide.with(context)
        .asBitmap()
        .load("https://rrtutors.com/uploads/langpostimg/download.jpg")
        .into(object : CustomTarget() {
            override fun onLoadCleared(placeholder: Drawable?) {}
            override fun onResourceReady(
                resource: Bitmap,
                transition: com.bumptech.glide.request.transition.Transition?
            ) {
                bitmap.value = resource
            }
        })
    val value = bitmap.value
    if (value != null)
        Image(value.asImageBitmap(), contentDescription = "image", Modifier.fillMaxWidth())
    else
        Text("Loading Image...")
}

Full Code

package com.example.jetpack

import android.graphics.Bitmap
import android.graphics.drawable.Drawable
import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.graphics.painter.Painter
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.bumptech.glide.Glide
import com.bumptech.glide.request.target.CustomTarget
import com.example.jetpack.ui.theme.JetPackTheme

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MaterialTheme {
                // A surface container using the 'background' color from the theme
                Surface(color = MaterialTheme.colors.background) {
                    ImageDemo()
                }
            }
        }
    }
}


@Composable
fun ImageDemo() {
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text(text = "Load image from resource")
        Spacer(modifier = Modifier.padding(top = 16.dp))
        LoadFromResourceDemo()
        Spacer(modifier = Modifier.padding(top = 16.dp))
        Text(text = "Load image from url")
        Spacer(modifier = Modifier.padding(top = 16.dp))
        LoadFromUrlDemo()
    }
}

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

@Composable
fun LoadFromUrlDemo() {
    val bitmap = remember { mutableStateOf(null) }
    val context = LocalContext.current
    Glide.with(context)
        .asBitmap()
        .load("https://rrtutors.com/uploads/langpostimg/download.jpg")
        .into(object : CustomTarget() {
            override fun onLoadCleared(placeholder: Drawable?) {}
            override fun onResourceReady(
                resource: Bitmap,
                transition: com.bumptech.glide.request.transition.Transition?
            ) {
                bitmap.value = resource
            }
        })
    val value = bitmap.value
    if (value != null)
        Image(value.asImageBitmap(), contentDescription = "image", Modifier.fillMaxWidth())
    else
        Text("Loading Image...")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    JetPackTheme {
        ImageDemo()
    }
}

Output:

Conclusion: In this jetpack compose example we covered how to load image from drawable folder, load image from url using Glid image library. We will convert bitmap from image url using glide and apply to the Image composable .

Article Contributed By :

3896 Views

Projects By category