Jetpack Compose Basics - Showing images
Technology
3
 min read
October 21, 2021

Jetpack Compose Basics - Showing images

Peter Šuly
Peter Šuly
Android developer

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.

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:

Like what you see?
Join our newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
High quality content once a month. No spam, we promise.
Your personal data is processed in accordance with our Memorandum on Personal Data Protection.

Páči sa vám náš content?
Odoberajte newsletter.

Great! Welcome to newsletter.
Oops! Something went wrong while submitting your email.
Vaše osobné údaje sú spracované v súlade s našim Memorandom na ochranu osobných údajov.