Slide 1

Slide 1 text

Uncoiling the COIL @viradiya_sagar gdgmad.com @gdgmad Understanding modern image loading on Android

Slide 2

Slide 2 text

Agenda ● What is COIL? ● Why COIL? ● How COIL? ● Image loading pipeline ● In memory caching

Slide 3

Slide 3 text

What is COIL?

Slide 4

Slide 4 text

What is COIL? ● COroutine Image Loader

Slide 5

Slide 5 text

What is COIL? ● COroutine Image Loader ● An image loading library for android (Another? 🤔)

Slide 6

Slide 6 text

Why COIL? ● Modern

Slide 7

Slide 7 text

Why COIL? ● Modern ● Easy to use

Slide 8

Slide 8 text

Why COIL? ● Modern ● Easy to use ● Lightweight

Slide 9

Slide 9 text

Why COIL? ● Modern ● Easy to use ● Lightweight ● Fast

Slide 10

Slide 10 text

API val imageRequest = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .crossfade(true) .target(imageView) .build()

Slide 11

Slide 11 text

API val imageLoader = context.imageLoader OR val imageLoader = ImageLoader.Builder(context) .availableMemoryPercentage(0.25) .crossfade(true) .build()

Slide 12

Slide 12 text

API val disposable = imageLoader.enqueue(imageRequest)

Slide 13

Slide 13 text

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//.

Slide 14

Slide 14 text

Kotlin syntactic sugar imageView.load("https:////w.example.com/image.jpg")

Slide 15

Slide 15 text

Kotlin syntactic sugar imageView.load("https:////w.example.com/image.jpg") { crossfade(true) placeholder(R.drawable.image) transformations(CircleCropTransformation()) }

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Jetpack Compose Support Image( painter = rememberImagePainter("https:////w.example.com/image.jpg"), contentDescription = null, modifier = Modifier.size(128.dp) )

Slide 18

Slide 18 text

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) )

Slide 19

Slide 19 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 20

Slide 20 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 21

Slide 21 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 22

Slide 22 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 23

Slide 23 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 24

Slide 24 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 25

Slide 25 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 26

Slide 26 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 27

Slide 27 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 28

Slide 28 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 29

Slide 29 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 30

Slide 30 text

ImageLoader ● A service class responsible for executing and managing entire pipeline.

Slide 31

Slide 31 text

ImageLoader ● A service class responsible for executing and managing entire pipeline. ● Takes ImageRequest.

Slide 32

Slide 32 text

ImageLoader ● A service class responsible for executing and managing entire pipeline. ● Takes ImageRequest. ● COIL provides singleton (Recommended)

Slide 33

Slide 33 text

ImageLoader // enqueue val request = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .target(imageView) .build() val disposable = imageLoader.enqueue(request)

Slide 34

Slide 34 text

ImageLoader // execute val request = ImageRequest.Builder(context) .data("https:////w.example.com/image.jpg") .build() val result = imageLoader.execute(request) // Suspends the execution

Slide 35

Slide 35 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 36

Slide 36 text

Interceptors

Slide 37

Slide 37 text

Interceptors ● Allows you to observe, transform, short circuit or retry request

Slide 38

Slide 38 text

Interceptors ● Allows you to observe, transform, short circuit or retry request ● You can wrap the pipeline with your custom logic

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

class CustomCacheInterceptor( private val context: Context, private val cache: LruCache ) : 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) } }

Slide 41

Slide 41 text

class CustomCacheInterceptor( private val context: Context, private val cache: LruCache ) : 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) } }

Slide 42

Slide 42 text

class CustomCacheInterceptor( private val context: Context, private val cache: LruCache ) : 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) } }

Slide 43

Slide 43 text

class CustomCacheInterceptor( private val context: Context, private val cache: LruCache ) : 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) } }

Slide 44

Slide 44 text

class CustomCacheInterceptor( private val context: Context, private val cache: LruCache ) : 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) } }

Slide 45

Slide 45 text

Plugin custom interceptor val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(CustomCacheInterceptor()) } .build()

Slide 46

Slide 46 text

EngineInterceptor ● The last interceptor in the chain

Slide 47

Slide 47 text

EngineInterceptor ● The last interceptor in the chain ● Responsible for checking in memory cache

Slide 48

Slide 48 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 49

Slide 49 text

Mappers ● Allows you to add support for custom data types

Slide 50

Slide 50 text

Mapper - Example data class Item( val id: Int, val imageUrl: String, val price: Int, val weight: Double ) class ItemMapper : Mapper { override fun map(data: Item) = data.imageUrl }

Slide 51

Slide 51 text

Mapper - Example data class Item( val id: Int, val imageUrl: String, val price: Int, val weight: Double ) class ItemMapper : Mapper { override fun map(data: Item) = data.imageUrl }

Slide 52

Slide 52 text

Mapper - Example imageView.load(item)

Slide 53

Slide 53 text

Plugin custom mapper val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(ItemMapper()) } .build()

Slide 54

Slide 54 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 55

Slide 55 text

Fetcher ● Translates data into either BufferedSource or Drawable

Slide 56

Slide 56 text

Fetcher ● Translates data into either BufferedSource or Drawable ● Built-in fetchers ○ AssetUriFetcher ○ ContentUriFetcher ○ FileFetcher ○ HttpFetcher

Slide 57

Slide 57 text

Custom Fetcher interface Fetcher { fun handles(data: T): Boolean = true fun key(data: T): String? suspend fun fetch( pool: BitmapPool, data: T, size: Size, options: Options ): FetchResult }

Slide 58

Slide 58 text

Plugin custom fetcher val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyFetcher()) } .build()

Slide 59

Slide 59 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 60

Slide 60 text

Decoder ● Converts BufferedSource to Drawable

Slide 61

Slide 61 text

Decoder ● Converts BufferedSource to Drawable ● Built-in format support ○ JPEG ○ PNG ○ WebPs

Slide 62

Slide 62 text

Decoder ● Converts BufferedSource to Drawable ● Built-in format support ○ JPEG ○ PNG ○ WebPs ● Extensions ○ SVG ○ GIFs/HEIFs ○ Video frame

Slide 63

Slide 63 text

Custom Decoder interface Decoder { fun handles(source: BufferedSource, mimeType: String?): Boolean suspend fun decode( pool: BitmapPool, source: BufferedSource, size: Size, options: Options ): DecodeResult }

Slide 64

Slide 64 text

Plugin custom decoder val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyDecoder()) } .build()

Slide 65

Slide 65 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 66

Slide 66 text

Transformation ● Allows you to change the pixel data.

Slide 67

Slide 67 text

Transformation ● Allows you to change the pixel data. ● Built-in transformations ○ Blur ○ Circle crop ○ Grayscale ○ Rounded corner

Slide 68

Slide 68 text

Custom Transformation interface Transformation { fun key(): String suspend fun transform(pool: BitmapPool, input: Bitmap, size: Size): Bitmap }

Slide 69

Slide 69 text

Plugin custom transformation val imageLoader = ImageLoader.Builder(context) .componentRegistry { add(MyTransformation()) } .build()

Slide 70

Slide 70 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 71

Slide 71 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 72

Slide 72 text

The pipeline ImageLoader Interceptors ImageRequest Mappers Fetcher Decoder Transformation ImageResult SuccessResult ErrorResult

Slide 73

Slide 73 text

Thread Interceptor Mapper Fetcher Decoder Transformation Transition Main Thread Worker Thread Main Thread

Slide 74

Slide 74 text

In memory caching

Slide 75

Slide 75 text

In memory caching ● Strong Memory Cache

Slide 76

Slide 76 text

In memory caching ● Strong Memory Cache ● Weak Memory Cache

Slide 77

Slide 77 text

Engine Interceptor

Slide 78

Slide 78 text

Engine Interceptor Is in strong memory? Key

Slide 79

Slide 79 text

Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline

Slide 80

Slide 80 text

Engine Interceptor Is in strong memory? Key Yes Return Bitmap and short circuit image loading pipeline No Is in weak memory?

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

Strong Memory Cache ● Backed by LRU cache

Slide 84

Slide 84 text

Strong Memory Cache ● Backed by LRU cache ● Size of the cache is computed dynamically

Slide 85

Slide 85 text

Strong Memory Cache Req. Image 1 Strong Memory Cache Weak Memory Cache

Slide 86

Slide 86 text

Strong Memory Cache Req. Image 1 Strong Memory Cache Weak Memory Cache Image 1

Slide 87

Slide 87 text

Strong Memory Cache Req. Image 2 Strong Memory Cache Weak Memory Cache Image 1 Image 2

Slide 88

Slide 88 text

Strong Memory Cache Req. Image 3 Strong Memory Cache Weak Memory Cache Image 1 Image 2 Image 3

Slide 89

Slide 89 text

Strong Memory Cache Req. Image 4 Strong Memory Cache Weak Memory Cache Image 1 Image 2 Image 3 Image 4

Slide 90

Slide 90 text

Weak Memory Cache ● Backed by HashMap

Slide 91

Slide 91 text

Weak Memory Cache ● Backed by HashMap ● Periodically removes bitmap after 10 set operations

Slide 92

Slide 92 text

Summary ● COIL - Coroutine Image Loader ● Modern, Easy, Lightweight and Fast ● API ● Image loading pipeline ● In memory caching

Slide 93

Slide 93 text

Resources ● Library documentation https://coil-kt.github.io/coil/ ● ADB Podcast http://androidbackstage.blogspot.com/2020/11/episode-151- image-loading-with-coil.html

Slide 94

Slide 94 text

Thank you!

Slide 95

Slide 95 text

Questions?