Image composable in Android Kotlin

Introduction

We use the Image composable to show pictures in our app. Pictures make apps more interesting and easier to understand.

To display a logo on the app's home screen.

To show a user's profile picture in a chat app.

To add icons for buttons or navigation.

To display photos in a gallery app.

To decorate the app with background images.

Syntax

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.image_name),
  contentDescription = "Description of image"
)

painter tells which image to show.

contentDescription helps people using screen readers understand the image.

Examples

Shows the app's logo with a description for accessibility.

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.ic_launcher_foreground),
  contentDescription = "App logo"
)

Displays a user's profile picture.

Android Kotlin

Image(
  painter = painterResource(id = R.drawable.profile_pic),
  contentDescription = "User profile picture"
)

Shows a decorative background image. Description is null because it's not important for screen readers.

Android Kotlin

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

Sample App

This app shows the app logo image in the center of the screen. The image has a description for accessibility.

Android Kotlin

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import com.example.myapp.R

class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
      MyApp()
    }
  }
}

@Composable
fun MyApp() {
  Surface(
    modifier = Modifier.fillMaxSize(),
    color = MaterialTheme.colorScheme.background
  ) {
    Box(modifier = Modifier.fillMaxSize()) {
      Image(
        painter = painterResource(id = R.drawable.ic_launcher_foreground),
        contentDescription = "App logo",
        modifier = Modifier.align(Alignment.Center)
      )
    }
  }
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
  MyApp()
}

Important Notes

Always provide contentDescription for accessibility unless the image is purely decorative.

You can use different painter sources like painterResource for local images or rememberImagePainter for loading from the internet (with extra libraries).

Use Modifier to change image size, shape, or position.

Summary

The Image composable shows pictures in your app.

Use painterResource to load images from your app resources.

Always add contentDescription for users who need screen readers.