Android Compose Image Tutorial

Android Jetpack Compose – Image

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

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

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

We can also modify the shape or its styling 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.

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.