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

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.

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.