Loading images for Jetpack Compose using Glide, Coil, and Fresco
A new modern UI toolkit Jetpack Compose has been announced by Google over a year ago, and finally, it has been released 1.0 stable in July. Also, many kinds of companies such as Twitter, Lyft, Square have already started to adopt Jetpack Compose in their production levels because it’s very intuitive, reduces boilerplate codes, and simplifies the entire UI structures if we use it well. This new paradigm of the UI structure will change a lot of things in the future, also we have to do more efforts to migrate the previous UI-related stuff such as loading images from Url.
Loading and Drawing Images for Jetpack Compose
When Google announced Jetpack Compose 1.0.0-alpha01, I was wondered that how should we migrate all of the previous UI-related systems to Jetpack Compose projects. Simply fetching images from an Url (network) and drawing on the Image composable would require quite a completely different process from before.
At that time, accompanist by Chris Banes has been released and I got many inspired from the library. The library supported Coil (Glide was supported later), but I wanted to use and provide as many as possible options to choose image-loading libraries. Because migrating the entire image loading systems (e.g., from Glide to Coil) may give a hundred of pains to developers. So that Landscapist was created to support many options such as Glide, Coil, and Fresco for Jetpack Compose.
Landscapist
Landscapist is an image loading library for Jetpack Compose. There are three options; Glide, Coil, and Fresco. So you can choose by your preferences. This library also supports loading animated images such as GIFs, WebP and giving animations like shimmer effect and circular reveal. If you’d like to lookup more examples of this library, check out demo projects which use Landscapist for loading images.
GlideImage
You can load images simply by using GlideImage composable function as the following example below:
You can also load images with attributes same as the Image composable such ascontentScale and modifier as the following example below:
If you’d like to show up a loading placeholder or an error image following the loading states, you can use the placeHolder and error attributes like the example below:
Custom Composables
Sometimes you need to implement a different UI following loading states. Landscapist supports to build compose with your own composable functions following the three request states.
- loading: While loading an image, the indicator will be shown up.
- success: If succeed to load an image, the indicator will be gone and a content image will be shown.
- failure: If fail to load an image (e.g. network error, wrong destination), an error placeholder will be shown up instead.
Also, you can customize the success composable lambda function, which will be executed if succeed to load an image. You can build it with the success lambda function, and you can use imageBitmap as the result of the image request inside of the function.
LocalGlideRequestBuilder
CompositionLocal is one of the most important concepts in the Jetpack Compose, the official Android reference describes it as the following:
Compose passes data through the composition tree explicitly through means of parameters to composable functions. This is often times the simplest and best way to have data flow through the tree.
CompositionLocals can be used as an implicit way to have data flow through a composition.
Landscapist also supports the CompositionLocal for requesting images with your own RequestBuilder, which is the backbone of the request in Glide and is responsible for bringing your options together with your requested URL or model to start a new load like the below:
CoilImage
To get started, you should import the dependency on your Gradle file, so check out the landscapist-coil. Landscapist-Coil is quite similar to Glide one, you can load images with CoilImage composable function.
Also, you can load images with attributes.
LocalCoilImageLoader
You can pass the same instance of your ImageLoader down through the Composition in your composable hierarchy as following the example below:
FrescoImage
To get started, you should set up Fresco with ImagePipelineConfig in your Application class. Generally, we recommend initializing with OkHttpImagePipelineConfigFactory. Also, you can customize caching, networking, and thread pool strategies with your own ImagePipelineConfig. For more details, you can check out Using Other Network Layers.
Also, you can load images with attributes.
Shimmer effect
You can make a shimmering effect while loading an image by using the ShimmerParams parameter as following the example below:
You can customize the ShimmerParam ‘s attributesbaseColor, highlightColor, durationMillis, dropOff, and tilt.
Circular reveal animation
Landscapist supports circular reveal animation when drawing images. You can implement it simply with the circularRevealEnabled attribute as true.
CircularRevealImage
You can use CircularRevealImage composable regardless of image loading libraries (Glide, Coil, Fresco), and you can implement circular reveal animation as the following example below:
You should set the circularRevealEnabled as true if you’d like to apply circular reveal animation. Also, you can change the duration of the animation using circularRevealDuration attributes.
Palette
You can extract major (theme) color profiles with BitmapPalette. You can check out Extract color profiles to see which kinds of colors can be extracted.
You can customize various properties with interceptor and paletteLoadListener .
Conclusion
In this post, we looked around how to load images for Jetpack Compose with Landscapist. This library started from the Jetpack Compose 1.0.0-alpha and now it has been released more than 30times until reaches the Jetpack Compose 1.0 stable. Luckily, I got a lot of inspiration and help from accompanist (Thanks to Chris Banes and for all the Google Compose, Android Team!), and this long journey seems to just get started. 🛫
