Skip to content
Related Articles

Related Articles

Improve Article

ImageView in Android using Jetpack Compose

  • Last Updated : 25 Feb, 2021

Images, Graphics, and vectors attract so many users as they tell so much information in a very informative way. ImageView in Android is used to display different types of images from drawable or in the form of 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

imageVectorto add an image from Drawable resource inside our imageview
bitmapto add a bitmap for your image inside imageview.
modifierto add padding to imageview
contentScaleto add scaling to our image to fit our image inside imageview
alphato add alpha to our imageview.
colorFilterto add colors to our imageview. 
blendModeto add color effects to our imageview. 

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. 

Kotlin




package com.example.edittext
  
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.setContent
import androidx.compose.ui.res.imageResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.Dp
  
import com.example.edittext.ui.EditTextTheme
  
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            EditTextTheme {
                // A surface container using the
                // 'background' color from the theme
                Surface(
                        // to add background color for our screen.
                        color = MaterialTheme.colors.background,
                ) {
                    // at below line we are calling
                    // our function for image view.
                    Img();
                }
            }
        }
    }
}
  
@Composable
fun Img() {
  
    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 img = imageResource(id = R.drawable.gfgimage)
  
        // below line is used for creating a modifier for our image
        // which includes image width and image height
        val modifier = Modifier.preferredHeight(height = Dp(200F)).preferredWidth(width = Dp(200F))
        // below is the widget for image.
        Image(
                // first parameter of our Image widget
                // is our image path which we have created
                // above and name it as img.
                img,
  
                // 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 center crop for it.
                contentScale = ContentScale.Crop,
  
                // below line is used to add modifier
                // to our image. we are adding modifier
                // which we have created above and name
                // it as modifier.
                modifier = modifier
        )
  
    }
}
  
  
// @Preview function is use to see preview
// for our composable function in preview section.
@Preview
@Composable
fun DefaultPreview() {
    MaterialTheme {
        // we are passing our composable
        // function to display its preview.
        Img()
    }
}

Output:

Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :