Android Jetpack Compose – Image

Image composable function is used to display image in Android application.

The most basic code of an Image composable to display an image from drawable resources is as shown in the following.

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

We can also modify the shape or its look using optional parameters.

Example

Add an image to the Resources using Resource Manager. You may drag and drop the image in Drawable section in Resource Manager as shown in the following picture.

Add Image to

Go through the steps, and the image would be added to the resources.

We shall display this image in our Application using Image composable.

Create a Project in Android Studio with Empty Compose Activity template, and modify MainActivity.kt file as shown in the following.

MainActivity.kt

package com.example.myapplication

import android.os.Bundle
import androidx.activity.compose.setContent
import androidx.appcompat.app.AppCompatActivity
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource

import com.example.myapplication.ui.theme.MyApplicationTheme

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MyApplicationTheme {
                Column(
                    horizontalAlignment = Alignment.CenterHorizontally,
                    modifier = Modifier.fillMaxWidth(), content = {
                        Image(
                            painter = painterResource(id = R.drawable.flower),
                            contentDescription = null
                        )
                    }
                )
            }
        }
    }
}

Screenshot

Image Tutorials

The following is a list of tutorials, that cover styling and how-to concepts with Text composable.

Conclusion

In this Android Jetpack Compose Tutorial, we learned what Image composable is, and how to style the Image composable, with the help of individual tutorials for each concept.