Uncoiling the COIL - Understanding modern image loading on Android

Image loading is hard but luckily this problem has already been addressed on Android. There are many libraries out there that handle image loading seamlessly. COIL is the new kid to the club and you may be wondering why do we need another image loading library?

COIL is Kotlin first library backed by Kotlin Coroutines. It gives you an easy and concise API to deal with image loading. Oh and also it takes less space! In a nutshell, it's an easy to use, fast, lightweight, and modern library.

This talk will address
- Why you should consider this library for image loading?
- Understanding its API.
- How it works? by covering its entire image loading pipeline.

By the end, you'll walk away with the advantages of using COIL and its image loading pipeline.

Transcript

1. Uncoiling the COIL @viradiya_sagar gdgmad.com @gdgmad Understanding modern image loading on Android
2. Agenda • What is COIL? • Why COIL? • How COIL? • Image loading pipeline • In memory caching
3. What is COIL?
4. What is COIL? • COroutine Image Loader
5. What is COIL? • COroutine Image Loader • An image loading library for android (Another? 🤔)
6. Why COIL? • Modern
7. Why COIL? • Modern • Easy to use
8. Why COIL? • Modern • Easy to use • Lightweight
9. Why COIL? • Modern • Easy to use • Lightweight • Fast
10. API val imageRequest = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .crossfade(true) .target(imageView) .build()
11. API val imageLoader = context.imageLoader OR val imageLoader = ImageLoader.Builder(context) .availableMemoryPercentage(0.25) .crossfade(true) .build()
12. API val disposable = imageLoader.enqueue(imageRequest)
13. Kotlin syntactic sugar // URL imageView.load("https:////w.example.com/image.jpg") // Resource imageView.load(R.drawable.image) // File imageView.load(File("/path/to/image.jpg")) // And more//.
14. Kotlin syntactic sugar imageView.load("https:////w.example.com/image.jpg")
15. Kotlin syntactic sugar imageView.load("https:////w.example.com/image.jpg") { crossfade(true) placeholder(R.drawable.image) transformations(CircleCropTransformation()) }
16. Imperative style // Coroutine scope val request = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .build() val result = imageLoader.execute(request) // Suspends the execution val drawable = result.drawable
17. Jetpack Compose Support Image( painter = rememberImagePainter("https:////w.example.com/image.jpg"), contentDescription = null, modifier = Modifier.size(128.dp) )
18. Jetpack Compose Support Image( painter = rememberImagePainter( data = "https:////w.example.com/image.jpg", builder = { transformations(CircleCropTransformation()) crossfade(true) } ), contentDescription = null, modifier = Modifier.size(128.dp) )
19. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
20. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
21. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
22. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
23. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
24. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
25. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
26. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
27. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
28. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
29. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
30. ImageLoader • A service class responsible for executing and managing entire pipeline.
31. ImageLoader • A service class responsible for executing and managing entire pipeline. • Takes ImageRequest.
32. ImageLoader • A service class responsible for executing and managing entire pipeline. • Takes ImageRequest. • COIL provides singleton (Recommended)
33. ImageLoader // enqueue val request = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .target(imageView) .build() val disposable = imageLoader.enqueue(request)
34. ImageLoader // execute val request = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .build() val result = imageLoader.execute(request) // Suspends the execution
35. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
36. Interceptors
37. Interceptors • Allows you to observe, transform, short circuit or retry request
38. Interceptors • Allows you to observe, transform, short circuit or retry request • You can wrap the pipeline with your custom logic
39. Interceptors • Allows you to observe, transform, short circuit or retry request • You can wrap the pipeline with your custom logic • Inspired from OKHttp’s interceptor
40. class CustomCacheInterceptor( private val context: Context, private val cache: LruCache<String, Drawable> ) : Interceptor { override suspend fun intercept(chain: Interceptor.Chain): ImageResult { val value = cache.get(chain.request.data.toString()) if (value /= null) { return SuccessResult( drawable = value.bitmap.toDrawable(context), request = chain.request, metadata = TODO() ) } return chain.proceed(chain.request) } }
41. class CustomCacheInterceptor( private val context: Context, private val cache: LruCache<String, Drawable> ) : Interceptor { override suspend fun intercept(chain: Interceptor.Chain): ImageResult { val value = cache.get(chain.request.data.toString()) if (value /= null) { return SuccessResult( drawable = value.bitmap.toDrawable(context), request = chain.request, metadata = TODO() ) } return chain.proceed(chain.request) } }
42. class CustomCacheInterceptor( private val context: Context, private val cache: LruCache<String, Drawable> ) : Interceptor { override suspend fun intercept(chain: Interceptor.Chain): ImageResult { val value = cache.get(chain.request.data.toString()) if (value /= null) { return SuccessResult( drawable = value.bitmap.toDrawable(context), request = chain.request, metadata = TODO() ) } return chain.proceed(chain.request) } }
43. class CustomCacheInterceptor( private val context: Context, private val cache: LruCache<String, Drawable> ) : Interceptor { override suspend fun intercept(chain: Interceptor.Chain): ImageResult { val value = cache.get(chain.request.data.toString()) if (value /= null) { return SuccessResult( drawable = value.bitmap.toDrawable(context), request = chain.request, metadata = TODO() ) } return chain.proceed(chain.request) } }
44. class CustomCacheInterceptor( private val context: Context, private val cache: LruCache<String, Drawable> ) : Interceptor { override suspend fun intercept(chain: Interceptor.Chain): ImageResult { val value = cache.get(chain.request.data.toString()) if (value /= null) { return SuccessResult( drawable = value.bitmap.toDrawable(context), request = chain.request, metadata = TODO() ) } return chain.proceed(chain.request) } }
45. Plugin custom interceptor val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(CustomCacheInterceptor()) } .build()
46. EngineInterceptor • The last interceptor in the chain
47. EngineInterceptor • The last interceptor in the chain • Responsible for checking in memory cache
48. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
49. Mappers • Allows you to add support for custom data types
50. Mapper - Example data class Item( val id: Int, val imageUrl: String, val price: Int, val weight: Double ) class ItemMapper : Mapper<Item, String> { override fun map(data: Item) = data.imageUrl }
51. Mapper - Example data class Item( val id: Int, val imageUrl: String, val price: Int, val weight: Double ) class ItemMapper : Mapper<Item, String> { override fun map(data: Item) = data.imageUrl }
52. Mapper - Example imageView.load(item)
53. Plugin custom mapper val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(ItemMapper()) } .build()
54. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
55. Fetcher • Translates data into either BufferedSource or Drawable
56. Fetcher • Translates data into either BufferedSource or Drawable • Built-in fetchers ◦ AssetUriFetcher ◦ ContentUriFetcher ◦ FileFetcher ◦ HttpFetcher
57. Custom Fetcher interface Fetcher<T : Any> { fun handles(data: T): Boolean = true fun key(data: T): String? suspend fun fetch( pool: BitmapPool, data: T, size: Size, options: Options ): FetchResult }
58. Plugin custom fetcher val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyFetcher()) } .build()
59. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
60. Decoder • Converts BufferedSource to Drawable
61. Decoder • Converts BufferedSource to Drawable • Built-in format support ◦ JPEG ◦ PNG ◦ WebPs
62. Decoder • Converts BufferedSource to Drawable • Built-in format support ◦ JPEG ◦ PNG ◦ WebPs • Extensions ◦ SVG ◦ GIFs/HEIFs ◦ Video frame
63. Custom Decoder interface Decoder { fun handles(source: BufferedSource, mimeType: String?): Boolean suspend fun decode( pool: BitmapPool, source: BufferedSource, size: Size, options: Options ): DecodeResult }
64. Plugin custom decoder val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyDecoder()) } .build()
65. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
66. Transformation • Allows you to change the pixel data.
67. Transformation • Allows you to change the pixel data. • Built-in transformations ◦ Blur ◦ Circle crop ◦ Grayscale ◦ Rounded corner
68. Custom Transformation interface Transformation { fun key(): String suspend fun transform(pool: BitmapPool, input: Bitmap, size: Size): Bitmap }
69. Plugin custom transformation val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyTransformation()) } .build()
70. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
71. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
72. The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
73. Thread Interceptor Mapper Fetcher Decoder Transformation Transition Main Thread Worker Thread Main Thread
74. In memory caching
75. In memory caching • Strong Memory Cache
76. In memory caching • Strong Memory Cache • Weak Memory Cache
77. Engine Interceptor
78. Engine Interceptor Is in strong memory? Key
79. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline
80. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline No Is in weak memory?
81. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline No Is in weak memory? Yes Return Bitmap and short circuit image loading pipeline
82. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline No Is in weak memory? No Execute Image loading pipeline Yes Return Bitmap and short circuit image loading pipeline
83. Strong Memory Cache • Backed by LRU cache
84. Strong Memory Cache • Backed by LRU cache • Size of the cache is computed dynamically
85. Strong Memory Cache Req. Image 1 Strong Memory Cache Weak Memory Cache
86. Strong Memory Cache Req. Image 1 Strong Memory Cache Weak Memory Cache Image 1
87. Strong Memory Cache Req. Image 2 Strong Memory Cache Weak Memory Cache Image 1 Image 2
88. Strong Memory Cache Req. Image 3 Strong Memory Cache Weak Memory Cache Image 1 Image 2 Image 3
89. Strong Memory Cache Req. Image 4 Strong Memory Cache Weak Memory Cache Image 1 Image 2 Image 3 Image 4
90. Weak Memory Cache • Backed by HashMap
91. Weak Memory Cache • Backed by HashMap • Periodically removes bitmap after 10 set operations
92. Summary • COIL - Coroutine Image Loader • Modern, Easy, Lightweight and Fast • API • Image loading pipeline • In memory caching
93. Resources • Library documentation https://coil-kt.github.io/coil/ • ADB Podcast http://androidbackstage.blogspot.com/2020/11/episode-151- image-loading-with-coil.html
94. Thank you!
95. Questions?