Uncoiling the COIL Vol 2 - Droidcon Italy

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 - Vol 2 @viradiya_sagar Understanding modern image loading on Android Android at
2. We are hiring! https://careers.deliveryhero.com/global/en
3. COIL 2.0 Alpha02
4. Agenda • What is COIL? • Why COIL? • How COIL? • Image loading pipeline • Caching
5. What is COIL?
6. What is COIL? • COroutine Image Loader
7. What is COIL? • COroutine Image Loader • An image loading library for android (Another? 🤔)
8. Why COIL? • Modern
9. Why COIL? • Modern • Easy to use
10. Why COIL? • Modern • Easy to use • Lightweight
11. Why COIL? • Modern • Easy to use • Lightweight • Fast
12. API val imageRequest = ImageRequest.Builder(context) .data("https://www.example.com/image.jpg") .crossfade(true) .target(imageView) .build()
13. API val imageLoader = context.imageLoader OR val imageLoader = ImageLoader.Builder(context) .availableMemoryPercentage(0.25) .crossfade(true) .build()
14. API val disposable = imageLoader.enqueue(imageRequest)
15. Kotlin syntactic sugar // URL imageView.load("https://www.example.com/image.jpg") // Resource imageView.load(R.drawable.image) // File imageView.load(File("/path/to/image.jpg")) // And more...
16. Kotlin syntactic sugar imageView.load("https://www.example.com/image.jpg")
17. Kotlin syntactic sugar imageView.load("https://www.example.com/image.jpg") { crossfade(true) placeholder(R.drawable.image) transformations(CircleCropTransformation()) }
18. Imperative style // Coroutine scope val request = ImageRequest.Builder(context) .data("https://www.example.com/image.jpg") .build() val result = imageLoader.execute(request) // Suspends the execution val drawable = result.drawable
19. Jetpack Compose Support Image( painter = rememberImagePainter("https://www.example.com/image.jpg"), contentDescription = null, modifier = Modifier.size(128.dp) )
20. Jetpack Compose Support Image( painter = rememberImagePainter( data = "https://www.example.com/image.jpg", builder = { transformations(CircleCropTransformation()) crossfade(true) } ), contentDescription = null, modifier = Modifier.size(128.dp) )
21. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
22. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
23. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T
24. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T
25. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M
26. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult
27. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult DecodeResult
28. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult data: T data: T data: M FetchResult DecodeResult ErrorResult
29. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult data: T data: T data: M FetchResult DecodeResult ErrorResult
30. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult data: T data: T data: M FetchResult DecodeResult ErrorResult
31. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult
32. ImageLoader • A service class responsible for executing and managing entire pipeline.
33. ImageLoader • A service class responsible for executing and managing entire pipeline. • Takes ImageRequest.
34. ImageLoader • A service class responsible for executing and managing entire pipeline. • Takes ImageRequest. • COIL provides singleton (Recommended)
35. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T
36. Interceptor
37. Interceptor • Allows you to observe, transform, short circuit or retry request
38. Interceptor • Allows you to observe, transform, short circuit or retry request • You can wrap the pipeline with your custom logic
39. Interceptor • 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) .components { 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 Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T
49. Mapper • 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, options: Options) = 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, options: Options) = data.imageUrl }
52. Mapper - Example imageView.load(item)
53. Plugin custom mapper val imageLoader = ImageLoader.Builder(context) .components { add(ItemMapper()) } .build()
54. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M
55. Fetcher • Translates data into either ImageSource or Drawable
56. Fetcher • Translates data into either ImageSource or Drawable • Built-in fetchers ◦ AssetUriFetcher ◦ ContentUriFetcher ◦ FileFetcher ◦ HttpFetcher
57. Custom Fetcher interface Fetcher<T : Any> { suspend fun fetch(): FetchResult? fun interface Factory<T : Any> { fun create(data: T, options: Options, imageLoader: ImageLoader): Fetcher? } }
58. Plugin custom fetcher val imageLoader = ImageLoader.Builder(context) .components { add(MyFetcher.Factory()) } .build()
59. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult
60. Decoder • Converts ImageSource to Drawable
61. Decoder • Converts ImageSource to Drawable • Built-in format support ◦ JPEG ◦ PNG ◦ WebPs
62. Decoder • Converts ImageSource to Drawable • Built-in format support ◦ JPEG ◦ PNG ◦ WebPs • Extensions ◦ SVG ◦ GIFs/HEIFs ◦ Video frame
63. Custom Decoder interface Decoder { suspend fun decode(): DecodeResult? fun interface Factory { fun create( result: SourceResult, options: Options, imageLoader: ImageLoader ): Decoder? } }
64. Plugin custom decoder val imageLoader = ImageLoader.Builder(context) .components { add(MyDecoder.Factory()) } .build()
65. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult DecodeResult
66. Transformation • Allows you to change the pixel data.
67. Transformation • Allows you to change the pixel data. • Built-in transformations ◦ Circle crop ◦ Rounded corner
68. Custom Transformation interface Transformation { val cacheKey: String suspend fun transform(input: Bitmap, size: Size): Bitmap }
69. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult DecodeResult
70. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult DecodeResult
71. The pipeline ImageLoader Interceptor ImageRequest Mapper Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult data: T data: T data: M FetchResult DecodeResult
72. Thread Interceptor Mapper Fetcher Decoder Transformation Transition Main Thread Default - I/O Thread OR Based on custom dispatchers Main Thread
73. Caching
74. Caching • Disk cache
75. Caching • Disk cache • In memory cache
76. Disk cache
77. Disk cache • Coil 2.0 has its own disk cache
78. Disk cache • Coil 2.0 has its own disk cache • Prior versions relies on OkHttp disk cache
79. HttpUriFetcher
80. HttpUriFetcher URL Disk Cache
81. HttpUriFetcher URL Disk Cache Snapshot?
82. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null
83. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder Yes
84. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source
85. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W
86. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W Image data
87. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W Write Image data
88. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W Write Image data Read
89. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W Write Image data Pass result to decoder Read
90. HttpUriFetcher URL Disk Cache Snapshot? Snapshot != null Pass result to decoder No Yes Fetch image from source N/W Write Image data Pass result to decoder Read
91. Disk Cache interface DiskCache { operator fun get(key: String): Snapshot? fun edit(key: String): Editor? fun remove(key: String): Boolean fun clear() interface Snapshot : Closeable interface Editor }
92. Disk Cache interface DiskCache { operator fun get(key: String): Snapshot? fun edit(key: String): Editor? fun remove(key: String): Boolean fun clear() interface Snapshot : Closeable interface Editor }
93. Disk Cache interface DiskCache { operator fun get(key: String): Snapshot? fun edit(key: String): Editor? fun remove(key: String): Boolean fun clear() interface Snapshot : Closeable interface Editor }
94. Disk Cache interface DiskCache { operator fun get(key: String): Snapshot? fun edit(key: String): Editor? fun remove(key: String): Boolean fun clear() interface Snapshot : Closeable interface Editor }
95. Disk Cache interface DiskCache { operator fun get(key: String): Snapshot? fun edit(key: String): Editor? fun remove(key: String): Boolean fun clear() interface Snapshot : Closeable interface Editor }
96. LRU Disk Cache • Snapshot
97. Snapshot • Result of the cache read operation
98. Snapshot • Result of the cache read operation • Encapsulates cache entry
99. Snapshot • Result of the cache read operation • Encapsulates cache entry • Gives access to the cache file object
100. LRU Disk Cache • Snapshot • Editor
101. Editor • Allows disk writing
102. Editor • Allows disk writing • Gives access to the cache file (Dirty file)
103. LRU Disk Cache • Snapshot • Editor • LinkedHashMap<String, Entry>
104. LinkedHashMap<String, Entry> • In memory representation of a disk cache
105. LinkedHashMap<String, Entry> • In memory representation of a disk cache • Entry is an object holding cache entry files ◦ Clean file ◦ Dirty file
106. LinkedHashMap<String, Entry> • In memory representation of a disk cache • Entry is an object holding cache entry files ◦ Clean file ◦ Dirty file • Keeps track of cache entry status
107. File System Journal File Image files
108. libcore.io.DiskLruCache 1 100 2 CLEAN 3400330d1dfc7f3f7f4b8d4d803dfcf6 832 21054 DIRTY 335c4c6028171cfddfbaae1a9c313c52 CLEAN 335c4c6028171cfddfbaae1a9c313c52 3934 2342 REMOVE 335c4c6028171cfddfbaae1a9c313c52 DIRTY 1ab96a171faeeee38496d8b330771a7a CLEAN 1ab96a171faeeee38496d8b330771a7a 1600 234 READ 335c4c6028171cfddfbaae1a9c313c52 READ 3400330d1dfc7f3f7f4b8d4d803dfcf6 Journal file
109. libcore.io.DiskLruCache 1 100 2 CLEAN 3400330d1dfc7f3f7f4b8d4d803dfcf6 832 21054 DIRTY 335c4c6028171cfddfbaae1a9c313c52 CLEAN 335c4c6028171cfddfbaae1a9c313c52 3934 2342 REMOVE 335c4c6028171cfddfbaae1a9c313c52 DIRTY 1ab96a171faeeee38496d8b330771a7a CLEAN 1ab96a171faeeee38496d8b330771a7a 1600 234 READ 335c4c6028171cfddfbaae1a9c313c52 READ 3400330d1dfc7f3f7f4b8d4d803dfcf6 Journal file
110. libcore.io.DiskLruCache 1 100 2 CLEAN 3400330d1dfc7f3f7f4b8d4d803dfcf6 832 21054 DIRTY 335c4c6028171cfddfbaae1a9c313c52 CLEAN 335c4c6028171cfddfbaae1a9c313c52 3934 2342 REMOVE 335c4c6028171cfddfbaae1a9c313c52 DIRTY 1ab96a171faeeee38496d8b330771a7a CLEAN 1ab96a171faeeee38496d8b330771a7a 1600 234 READ 335c4c6028171cfddfbaae1a9c313c52 READ 3400330d1dfc7f3f7f4b8d4d803dfcf6 Journal file
111. libcore.io.DiskLruCache 1 100 2 CLEAN 3400330d1dfc7f3f7f4b8d4d803dfcf6 832 21054 DIRTY 335c4c6028171cfddfbaae1a9c313c52 CLEAN 335c4c6028171cfddfbaae1a9c313c52 3934 2342 REMOVE 335c4c6028171cfddfbaae1a9c313c52 DIRTY 1ab96a171faeeee38496d8b330771a7a CLEAN 1ab96a171faeeee38496d8b330771a7a 1600 234 READ 335c4c6028171cfddfbaae1a9c313c52 READ 3400330d1dfc7f3f7f4b8d4d803dfcf6 Journal file
112. Key Get Cache read flow
113. Key Get Initialised ? Cache read flow
114. Key Get Initialised ? No Initialisation Cache read flow
115. Key Get Initialised ? No Journal File Initialisation Cache read flow
116. Key Get Initialised ? No Journal File Initialisation LinkedHashMap <String, Entry> Cache read flow
117. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Cache read flow
118. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Key Cache read flow
119. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Key Cache read flow
120. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Key Cache read flow
121. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Journal cleanup req? Key Cache read flow
122. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Journal cleanup req? No Return Snapshot? Key Cache read flow
123. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Journal cleanup req? Yes Run cleanup task No Return Snapshot? Key Cache read flow
124. Key Get Initialised ? Yes No Journal File Initialisation Get the Entry from cache LinkedHashMap <String, Entry> Entry? Journal cleanup req? Yes Run cleanup task No Return Snapshot? Key Cache read flow
125. Commit Editor Cache write flow
126. Initialised ? Commit Editor Cache write flow
127. Initialised ? No Initialisation Commit Editor Cache write flow
128. Initialised ? No Journal File Initialisation Commit Editor Cache write flow
129. Initialised ? No Journal File Initialisation LinkedHashMap <String, Entry> Commit Editor Cache write flow
130. Initialised ? Yes No Journal File Initialisation Copy dirty file to clean file LinkedHashMap <String, Entry> Commit Editor Cache write flow
131. Initialised ? Yes No Journal File Initialisation Copy dirty file to clean file LinkedHashMap <String, Entry> Commit Editor Cache write flow Key
132. Initialised ? Yes No Journal File Initialisation Copy dirty file to clean file LinkedHashMap <String, Entry> Commit Editor Cache write flow Key Entry
133. Initialised ? Yes No Journal File Initialisation LinkedHashMap <String, Entry> Copy dirty file to clean file Commit Editor Cache write flow Key Entry
134. Cache full? Initialised ? Yes No Journal File Initialisation LinkedHashMap <String, Entry> Copy dirty file to clean file Commit Editor Cache write flow Key Entry
135. Cache full? Initialised ? Yes No Journal File Initialisation LinkedHashMap <String, Entry> Copy dirty file to clean file Commit Editor Yes Run cleanup task Cache write flow Key Entry
136. In memory caching
137. In memory caching • Strong Memory Cache
138. In memory caching • Strong Memory Cache • Weak Memory Cache
139. Engine Interceptor
140. Engine Interceptor Is in strong memory? Key
141. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline
142. Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline No Is in weak memory?
143. 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
144. 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
145. Strong Memory Cache • Backed by LRU cache
146. Strong Memory Cache • Backed by LRU cache • Size of the cache is computed dynamically
147. Weak Memory Cache • Backed by HashMap
148. Weak Memory Cache • Backed by HashMap • Periodically do cleanups after 10 read or write operations
149. Summary • COIL - Coroutine Image Loader • Modern, Easy, Lightweight and Fast • API • Image loading pipeline • Caching
150. Resources • Library documentation https://coil-kt.github.io/coil/ • Github https://github.com/coil-kt/coil
151. Thank you!
152. Questions?