Jetpack Compose Basics - How to load images from Bitmap, Vector, Painter or from URL with Coil

Images and Icons are crucial part of your app’s UI used for visually expressing actions. Also, they help to make an overall impression of your app, make an app unique. How to work with them in Jetpack Compose? Let’s find out.

Peter Šuly4 Oct 2021

In Jetpack Compose there are 3 types of Image composable out of the box. First takes bitmap as parameter, second takes vector and the last takes painter. These functions have many parameters in common.

  • contentDescription - text used by accessibility services to describe image content
  • modifier - used for changes from the caller side
  • alignment - used to place image in the given bounds
  • contentScale - used to determine the aspect ratio scaling. Possible values are None, FillBounds, Inside, Fit, FillWidth, FillHeight or Crop
  • alpha - optional opacity
  • colorFilter - specified filter will be applied on image when rendered

Loading image from Bitmap

This snippet of code loads and shows given bitmap.

Loading image from Vector

This snippet of code loads and shows given vector, e.g. icon.

Loading image from Painter

This is the most interesting part. Both bitmap and vector uses this type of image composable on the background. There are many predefined painters e.g. ColorPainter which draws defined color in bounds.

Loading images from URL

You probably don't have all images used in application saved locally. If your application works with API which sends you URL of image, you will need to load it from internet. That is where you should use any of available libraries.

Shortly before release of first stable version of Jetpack Compose, developers of Coil image loader announced their library fully works with Compose. Before this event, the best solution was to use Accompanist coil image loader.

Coil has many great features and on the background implements painter API too.

How to use Coil to load remote image?

What if we want this type of "layout" in the applications where we obtain images as url? It is really simple, remember the painter and throw it as parameter into Image composable.

Happy kitty with photo

Earlier, we mentioned that Coil has many great features e.g. scaling, transformations, memory caching, bitmap polling..., basically everything you will need. To use them is simple, call wanted feature inside builder. These we use most of the time.

Voilà, images are now loading almost without effort.

More articles from the Jetpack Compose Basics series:

Peter Šuly4 Oct 2021