Compose Imageview - How to show Image in Imageview

Last updated Aug 10, 2021


In this Jetpack compose tutorial we will learn how to show Image in Image View in Android application.

Displays image resources, for example Bitmap or Drawable resources. 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’s similar to an ImageView in the classic Android View system.

 

 

Download Source code

 

Let's get started

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

Load Image

we can use painterResource to load an image from the resources

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

To Load Image Using Url we are going to use Glide

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

<uses-permission android:name="android.permission.INTERNET"/>

 

 

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

 

 

Image

Compose Imageview

 


Article Contributed By :
https://www.rrtutors.com/site_assets/profile/assets/img/avataaars.svg

93 Views

Subscribe For Daily Updates

Flutter Questions
Android Questions