Images and graphics add beauty and life to android apps. In android development, you will be required to design and load images and graphics into your application. Jetpack Compose has APIs and external libraries that helps you handle the visuals like images and graphics in your android app, from your logo to complex images and graphics. In this article, we will cover

How to design and customize images in Jetpack Compose
Image loading in compose

Design and Customize Images in Jetpack Compose

Jetpack compose makes it easy to design and customize images and graphics. Here is an example of how to create an image

@Composable
fun PosView
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
        modifier = Modifier.fillMaxSize()
    )
}

In the above code, you declare an Image that takes in painterResource, which loads the image from the drawable folder, has contentDescription of “Post Image” and occupies the available space using fillMaxSize modifier.

Sizing and Scaling

You can modify the size of the image above by adding size modifier.

@Composable
fun PosView(){
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
        modifier = Modifier
    .size(150.dp)
  )
}

You need to tell Jetpack Compose how to scale the image. Some of the common scale types are

Fit — scales the image uniformly inside the available space
FillWidth — image fills the available width
FillHeight — image fills the available height
Crop — crops image to fit destination size
Inside — image maintains aspect ratio inside destination
None — no scaling applied

You can apply scaling to the above image using the ContentScale as shown below.

@Composable
fun PosView(){
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
    contentScale = ContentScale.Crop
        modifier = Modifier
        // Change image size to 150 dp
    .size(150.dp)
    )
}

You can read more on scaling in the official documentation here.

Shape

You can modify the shape of image in Jetpack Compose to common shapes like Circle, Rectangle or Square with rounded corners and custom shapes.

Compose uses clip modifer to use shapes such as CircleShape, RoundedCornerShape.

Here, we will change the shape of the PostView to CircleShape

@Composable
fun PosView(){
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
    contentScale = ContentScale.Crop
        modifier = Modifier
    .size(150.dp)
        // Make the image circular
    .clip(CircleShape)
    )
}

When using RoundedCornerShape clip, ensure you declare the size of corner radius. For example

@Composable
fun PosView(){
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
    contentScale = ContentScale.Crop
        modifier = Modifier
    .size(150.dp)
        // Rounded corner shape with 8dp radius
    .clip(RoundedCornerShape(8.dp))
    )
}

When creating an image with custom shape, you use aspectRatio. Common image aspect ratios are

1:1 — square image
4:3 — standard aspect ratio
16:9 wide image. Commonly used in widescreen
3:2 — classic aspect ratio

@Composable
fun PosView(){
    Image(
        painter = painterResource(R.drawable.post_image),
        contentDescription = "Post image",
    contentScale = ContentScale.Crop
        modifier = Modifier
    .aspectRatio(16f / 9f)
    )
}

You can read more about image scaling and additional modifiers here

Loading Images

You have to load images from a source to your application, either local or remote. We have been loading images from the drawable folder in the above examples. You can also load images from the web.

In this section, we will look at two common libraries used in compose — landscapist and coil-compose

Coil Compose

Coil-compose is built on top of coil image loading library. It simplifies asynchronous loading of images using coroutines. To get started, add coil-compose dependency in your application. You can change the version to the latest version.

implementation("io.coil-kt:coil-compose:2.2.2")

We use AsycImage in Coil-Compose, and the above example changes as shown below.

@Composable
fun PosView(){
    AsyncImage(
    //This is an example image from Unspash.com
        model = "https://unsplash.com/photos/6xv4A1VA1rU",
        contentDescription = "Post image",
    contentScale = ContentScale.Crop
        modifier = Modifier
        .aspectRatio(16f / 9f)
    )
}

Coil provides additional modifications when loading images from the web. Here are some of the modifications you can apply to your app.

Model

This is an instance of ImageRequest, which defines the details of the image to be loaded. In this case, it specifies the URL of the image to be loaded from the internet and builds it to an image.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://unsplash.com/photos/6xv4A1VA1rU")
        .build(),
    contentDescription = "Post image",
    contentScale = ContentScale.Crop,
    modifier = Modifier
    .aspectRatio(16f / 9f)
)

Placeholder

You can have placeholder images loading from the local storage, which will be displayed when the network image is loading or has failed.

AsyncImage(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://unsplash.com/photos/6xv4A1VA1rU")
        .build(),
    contentDescription = "Post image",
    contentScale = ContentScale.Crop,
    placeholder = painterResource(id = R.drawable.loading_placeholder),  
    error = painterResource(id = R.drawable.image_error),
    modifier = Modifier
    .aspectRatio(16f / 9f)
)

Observe State

We will use AsyncImagePainter to observe state when loading images.

val asyncPainter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://unsplash.com/photos/6xv4A1VA1rU")
    .size(Size.ORIGINAL)
        .build(),
)
Image(
    painter = asyncPainter,
    contentDescription = "Post image"
    modifier = Modifier
    .aspectRatio(16f / 9f)
)

Crossfade

Coil Compose has an inbuilt crossfade modifier for transitions. Custom transition requires reference to the view, thus not available in AsyncImage and AsyncImagePainter we have used in the above example. You can add crossfade in the above code and achieve beautiful transitions.

val asyncPainter = rememberAsyncImagePainter(
    model = ImageRequest.Builder(LocalContext.current)
        .data("https://unsplash.com/photos/6xv4A1VA1rU")
    .size(Size.ORIGINAL)
    .crossfade(true)
        .build(),
)
Image(
    painter = asyncPainter,
    contentDescription = "Post image"
    modifier = Modifier
    .aspectRatio(16f / 9f)
)

You can read more about Coil-compose in the official documentation.

Landscapist

Landscapist is another library that simplifies image loading using popular image-loading libraries like Glide, Coil and Fresco.

Glide

Add landscapist-glide dependency in your grade build file.

implementation "com.github.skydoves:landscapist-glide:2.1.8"

To load image using glide, use the following

GlideImage(
  imageModel = { "<https://unsplash.com/photos/6xv4A1VA1rU>" }
  imageOptions = ImageOptions(
    contentScale = ContentScale.Crop,
    alignment = Alignment.Center
    modifier = Modifier
    .aspectRatio(16f / 9f)
  )
)

Coil

Add landscapist-coil dependency in your grade build file.

implementation "com.github.skydoves:``landscapist-coil:2.1.8"

To load image using glide, use the following

CoilImage(
  imageModel = { "<https://unsplash.com/photos/6xv4A1VA1rU>" }
  imageOptions = ImageOptions(
    contentScale = ContentScale.Crop,
    alignment = Alignment.Center
    modifier = Modifier
      .aspectRatio(16f / 9f)
  )
)

Fresco

Add landscapist-fresco dependency in your grade build file.

implementation "com.github.skydoves:``landscapist-fresco:2.1.8"

To load image using glide, use the following

CoilImage(
  imageModel = { "<https://unsplash.com/photos/6xv4A1VA1rU>" }
  imageOptions = ImageOptions(
    contentScale = ContentScale.Crop,
    alignment = Alignment.Center
        modifier = Modifier
          ko.aspectRatio(16f / 9f)
  )
)

To use Fresco, you need an additional configuration called pipeline.

class ImageApp : Application() {  
override fun onCreate() {
    super.onCreate()
val pipelineConfig =
      OkHttpImagePipelineConfigFactory
        .newBuilder(this, OkHttpClient.Builder().build())
        .setDiskCacheEnabled(true)
        .setDownsampleEnabled(true)
        .setResizeAndRotateEnabledForNetwork(true)
        .build()
    Fresco.initialize(this, pipelineConfig)
  }
}

Check the official documentation to learn more about customizing images and image-loading libraries in Jetpack Compose.

Compose Camp 2: Mastering Images in Jetpack Compose with Coil-Compose and Landscapist

Table of contents

Design and Customize Images in Jetpack Compose

Sizing and Scaling

Shape

Loading Images

Coil Compose

Landscapist