Coil - Acelerando o carregamento de imagens no Android com coroutines

This talk was held during an online edition of Kotlin Meetup São Paulo, that happened on March 24th.

The talk was about Coil library and its usage of coroutines, what are the benefits of using the library and how can you start to use it on an Android project.

The content is in pt-BR.

More info: https://www.meetup.com/pt-BR/kotlin-meetup-sp/events/269633943/
Video: https://youtu.be/gu5blx38yfo

Transcript

1. Coil: Acelerando o carregamento de imagens no Android com coroutines. ✨ Walmyr Carvalho Mobile Technical Leader @ idwall, Founder @ Kusudama Google Developer Expert, Android @walmyrcarvalho
2. Olá, pessoal! Meu nome é Walmyr Carvalho, muito prazer! :)
3. Trabalho com desenvolvimento Android há 10 anos e sou um Google Developer Experts de Android no Brasil há 4 anos. Além disso, estou muito próximo da comunidade nacional de Android, sendo organizador do Kotlin Meetup São Paulo e do Android Dev BR, a maior comunidade lusófona de Android do mundo, com mais de 6700 pessoas! Também apoio o empreendedorismo nacional, sendo mentor de Android e mobile no Google for Startups Accelerator e na ACE Startups.
4. Já ajudei a evoluir produtos mobile para empresas como Loggi, 99, Cielo, CI&T, Hotel Urbano e Globo Esporte, durante mais de 9 anos de carreira como especialista em Android. Fonte: Google Play
5. Nesse ano fundei a Kusudama, um estúdio de desenvolvimento e design de produtos digitais para Android e iOS, que tem como seu objetivo criar experiências que tratem seus usuários com respeito dentro do universo mobile.
6. Recentemente me juntei ao grande time da idwall como Mobile Technical Leader, com o objetivo de criar a próxima plataforma de identidade digital brasileira no mobile, além de soluções para empresas que buscam aumentar a confiança na identificação dos seus usuários.
7. Carregamento de imagens: Como é trabalhar com isso no Android?
8. Pergunta: como a gente faz para carregar uma imagem no Android, sem fazer nenhum uso de bibliotecas?
9. Loading de imagens com AsyncTask private class DownloadImageAsyncTask(imageView: ImageView) : AsyncTask<String?, Void?, Bitmap?>() { var imageView: ImageView? = null init { this.imageView = imageView } override fun doInBackground(vararg urls: String?): Bitmap? { val url = urls[0] var bitmap: Bitmap? = null try { val inputStream: InputStream = URL(url).openStream() bitmap = BitmapFactory.decodeStream(inputStream) } catch (exception: Exception) { Log.e("Error", exception.message) exception.printStackTrace() } return bitmap } override fun onPostExecute(result: Bitmap?) { imageView?.setImageBitmap(result) } }
11. É, no começo era meio chato mesmo. Mas, com o tempo, foram surgindo algumas bibliotecas legais para ajudar nessa tarefa tão simples:
12. Glide (Google) - GitHub Biblioteca open source de carregamento de imagens para Android, mantida pelo Google. github.com/bumptech/glide
13. Glide (Google) - GitHub Biblioteca open source de carregamento de imagens para Android, mantida pelo Google. github.com/bumptech/glide Glide.with(this) .load(url) .centerCrop() .placeholder(R.drawable.loading_spinner) .into(imageView)
14. Picasso (Square) - GitHub Biblioteca de carregamento de imagens no Android, mantida pela Square. github.com/square/picasso
15. Picasso (Square) - GitHub Biblioteca de carregamento de imagens no Android, mantida pela Square. github.com/square/picasso Picasso.get() .load(url) .resize(50, 50) .centerCrop() .into(imageView)
16. Fresco (Facebook) - GitHub Biblioteca de carregamento de imagens para Android, mantida pelo Facebook. github.com/facebook/fresco
17. Fresco (Facebook) - GitHub Biblioteca de carregamento de imagens para Android, mantida pelo Facebook. github.com/facebook/fresco // Application Fresco.initialize(this) // Usage val uri = Uri.parse(url) val draweeView: SimpleDraweeView = findViewById(R.id.image_view) draweeView.setImageURI(uri)
18. Em paralelo a isso tudo…
19. Fonte: JetBrains
20. A linguagem Kotlin começou seu desenvolvimento em 2011, tendo a sua versão 1.0 lançada há 3 anos e 4 meses atrás, em Fevereiro de 2016!
22. De acordo com o Google, diversos apps da lista Fortune 500 já estão usando Kotlin em produção, o que é um número bem impressionante e mostra o impacto da linguagem no mercado Android em geral! Fonte: developer.android.com/kotlin
23. Fonte: Android Developers, 2020
24. Além disso, o desenvolvimento Android vem ganhando com a parceria do Google com JetBrains, desde o lançamento do Android Studio até a adoção do Kotlin como linguagem oficial para o desenvolvimento Android em 2019!
25. Kotlin - Android Developers Documentação oficial e mais detalhes sobre o uso do Kotlin em aplicações Android developers.android.com/kotlin Fonte: Android Developers, 2020
26. A linguagem Kotlin também vem evoluindo numa velocidade incrível, graças ao ótimo trabalho da JetBrains e da comunidade! ❤
27. Release Kotlin 1.3 - Blog JetBrains Post oficial sobre o release da versão 1.3 do Kotlin, no blog oficial da JetBrains. tinyurl.com/kotlin-1-3-release Fonte: JetBrains
28. Tá, mas o que isso tudo tem a ver com carregamento de imagens no Android?
29. Coil: O que temos de legal?
31. O Coil (Coroutines Image Loader) é uma biblioteca de carregamento de imagens para Android que utiliza as coroutines do Kotlin por baixo dos panos! ✨
32. Coil - Documentação Documentação oficial e mais detalhes sobre o Coil. coil-kt.github.io/coil
33. A biblioteca tem como objetivo quatro pontos principais: ser rápida, leve, fácil de usar e moderna. ❤
34. Características da biblioteca • Otimizações de memória e caching, suporte a downsampling, reuso de bitmap, etc; • Suporte a Transformations e Transitions; • API simples e moderna, com suporte à coroutines, OkHttp, Okio e AndroidX (Lifecycles); • Suporte ao Proguard e R8; • Footprint baixo de method count (+/- 1500); • Requerimentos: Android X, Min. SDK 14+, Compile SDK 29+, Java 8+.
35. build.gradle android { compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } tasks.withType(org.jetbrains.kotlin.gradle.tasks.KotlinCompile).all { kotlinOptions { jvmTarget = "1.8" } }
36. build.gradle.kts android { compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility = JavaVersion.VERSION_1_8 } } tasks.withType<KotlinCompile> { kotlinOptions { jvmTarget = "1.8" } }
37. build.gradle.kts // Default implementation("io.coil-kt:coil:0.9.5") // Doesn't include Coil singleton, better for DI implementation("io.coil-kt:coil-base:0.9.5")
38. // URL imageView.load("https://www.example.com/image.jpg") // Resource imageView.load(R.drawable.image) // File imageView.load(File("/path/to/image.jpg")) Usage.kt
39. Data types suportados: • String • HttpUrl • Uri (android.resource, content, file, http e https) • File • Drawable • @Drawable res • Bitmap
40. // Async image loading imageView.load("https://www.example.com/image.jpg") { crossfade(true) placeholder(R.drawable.image) transformations(CircleCropTransformation()) } Usage.kt
41. // Under the hood, a load returns a RequestDisposable fun load(request: LoadRequest): RequestDisposable Usage.kt
42. val disposable = imageView.load("https://www.example.com/image.jpg") // Cancel the request disposable.dispose() Usage.kt
43. // Returns a Drawable val drawable = Coil.get("https://www.example.com/image.jpg") Usage.kt
44. // Under the hood, get is a suspend function suspend fun get(request: GetRequest): Drawable Usage.kt
45. Hmm… e o que são esses ImageLoaders?
46. // ImageLoaders are objects that deal with load and get // to load your images val imageLoader = ImageLoader(context) // or... val imageLoader = ImageLoader(context) { availableMemoryPercentage(0.5) bitmapPoolPercentage(0.5) crossfade(true) } ImageLoaders.kt
47. // Requests are the info needed to ImageLoaders val request = LoadRequest(context, imageLoader.defaults) { data("https://www.example.com/image.jpg") crossfade(true) } // Option: builder pattern (hi, Java) val request = imageLoader.newLoadBuilder(context) .data("https://www.example.com/image.jpg") .crossfade(true) .build() // Then, you load your image like this: imageLoader.load(request) Requests.kt
48. Daora! O que mais dá pra fazer com o Coil?
49. implementation("io.coil-kt:coil-gif:0.9.5") GifSupport.kt
50. val imageLoader = ImageLoader(context) { componentRegistry { if (SDK_INT >= P) { add(ImageDecoderDecoder()) } else { add(GifDecoder()) } } } GifSupport.kt
51. implementation("io.coil-kt:coil-svg:0.9.5") SvgSupport.kt
52. val imageLoader = ImageLoader(context) { componentRegistry { add(SvgDecoder()) } } SvgSupport.kt
53. Demonstração! Vamos ver o que como fica isso na prática?
54. Se eu quiser aprender mais sobre, onde eu posso encontrar material?
55. Coil - Documentação Documentação oficial e mais detalhes sobre o Coil. coil-kt.github.io/coil
56. Kotlin Coroutines - Documentação Documentação oficial e mais detalhes sobre Kotlin Coroutines. tinyurl.com/kotlin-coroutines-docs
57. Benchmark - Coil vs Picasso vs Glide Artigo comparando a performance do Coil, Picasso e Glide em diversos aspectos. tinyurl.com/coil-picasso-glide- benchmark
58. Android Dev BR - Comunidade Maior comunidade lusófona de Android no Slack, com mais de 6.700 pessoas! ❤✨ slack.androiddevbr.org
59. Perguntas? Ficou alguma dúvida?
60. Muito obrigado! Se tiver qualquer dúvida ou sugestão, pode falar comigo. ❤ @walmyrcarvalho /walmyrcarvalho walmyr@kusudama.com.br