ImageView in Android using Jetpack Compose

Last Updated : 20 Feb, 2025

Images, graphics, and vectors attract many users as they provide a lot of information in a very informative way. ImageView in Android is used to display different types of images, from drawables to Bitmaps. In this article, we will take a look at the implementation of an ImageView in Android using Jetpack Compose.

Attributes of ImageView Widget

Attributes	Description
painter	the painter resource used to draw the image. Here, painterResource is used to load an image from the resources.
bitmap	to add a bitmap for your image inside imageview.
modifier	to add padding to imageview
contentScale	to add scaling to our image to fit our image inside imageview
alpha	to add alpha to our imageview.
colorFilter	to add colors to our imageview.
blendMode	to add color effects to our imageview.
contentDescription	to describe the content of the image for accessibility.
alignment	to align the content within the bounds of the Image

Step-by-Step Implementation

Step 1: Create a New Project

To create a new project in the Android Studio Canary Version please refer to How to Create a new Project in Android Studio Canary Version with Jetpack Compose.

Step 2: Add an Image to the drawable folder

After creating a new project we have to add an image inside our drawable folder for displaying that image inside our ImageView. Copy your image from your folder's location and go inside our project. Inside our project Navigate to the app > res > drawable > Right-click on the drawable folder and paste your image there.

Step 3: Working with the MainActivity.kt file

After adding this image navigates to the app > java > MainActivity.kt and add the below code to it. Comments are added inside the code for a detailed explanation.

MainActivity.kt:

MainActivity.kt

package org.geeksforgeeks.demo

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.*
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.*
import androidx.compose.ui.graphics.*
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import org.geeksforgeeks.demo.ui.theme.DemoTheme

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            DemoTheme {
                // A surface container using the
                // 'background' color from the theme
                Surface(
                    // to add background color for our screen.
                    color = MaterialTheme.colorScheme.background,
                ) {
                    // at below line we are calling
                    // our function for image view.
                    ImageExample()
                }
            }
        }
    }
}

@Composable
fun ImageExample() {
    Column(
        // we are using column to align our
        // imageview to center of the screen.
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight(),

        // below line is used for specifying
        // vertical arrangement.
        verticalArrangement = Arrangement.Center,

        // below line is used for specifying
        // horizontal arrangement.
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        // below line is used for creating a variable
        // for our image resource file.
        val painter = painterResource(id = R.drawable.gfg_logo)

        // below is the composable for image.
        Image(
            // first parameter of our Image
            // is our image path which we have created
            // above
            painter = painter,
            contentDescription = "Sample Image",

            // below line is used for creating a modifier for our image
            // which includes image size, padding and border
            modifier = Modifier
                .height(300.dp)
                .width(300.dp)
                .padding(16.dp)
                .border(2.dp, Color.Black, CircleShape),

            // below line is used to give
            // alignment to our image view.
            alignment = Alignment.Center,

            // below line is used to scale our image
            // we are using fit for it.
            contentScale = ContentScale.Fit,

            // below line is used to define the opacity of the image.
            // Here, it is set to the default alpha value, DefaultAlpha.
            alpha = DefaultAlpha,
        )
    }
}

// @Preview function is use to see preview
// for our composable function in preview section.
@Preview(showSystemUi = true)
@Composable
fun ImageExamplePreview() {
    // we are passing our composable
    // function to display its preview.
    ImageExample()
}