Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Coil - Acelerando o carregamento de imagens no ...

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

Walmyr Carvalho

March 24, 2020
Tweet

More Decks by Walmyr Carvalho

Other Decks in Technology

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. 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.
  3. 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
  4. 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.
  5. 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.
  6. Pergunta: como a gente faz para carregar uma imagem no

    Android, sem fazer nenhum uso de bibliotecas?
  7. 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) } }
  8. É, no começo era meio chato mesmo. Mas, com o

    tempo, foram surgindo algumas bibliotecas legais para ajudar nessa tarefa tão simples:
  9. Glide (Google) - GitHub Biblioteca open source de carregamento de

    imagens para Android, mantida pelo Google. github.com/bumptech/glide
  10. 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)
  11. Picasso (Square) - GitHub Biblioteca de carregamento de imagens no

    Android, mantida pela Square. github.com/square/picasso
  12. 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)
  13. Fresco (Facebook) - GitHub Biblioteca de carregamento de imagens para

    Android, mantida pelo Facebook. github.com/facebook/fresco
  14. 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)
  15. 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!
  16. 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
  17. 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!
  18. 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
  19. A linguagem Kotlin também vem evoluindo numa velocidade incrível, graças

    ao ótimo trabalho da JetBrains e da comunidade! ❤
  20. 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
  21. Tá, mas o que isso tudo tem a ver com

    carregamento de imagens no Android?
  22. O Coil (Coroutines Image Loader) é uma biblioteca de carregamento

    de imagens para Android que utiliza as coroutines do Kotlin por baixo dos panos! ✨
  23. 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+.
  24. 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" } }
  25. build.gradle.kts android { compileOptions { sourceCompatibility = JavaVersion.VERSION_1_8 targetCompatibility =

    JavaVersion.VERSION_1_8 } } tasks.withType<KotlinCompile> { kotlinOptions { jvmTarget = "1.8" } }
  26. Data types suportados: • String • HttpUrl • Uri (android.resource,

    content, file, http e https) • File • Drawable • @Drawable res • Bitmap
  27. // Under the hood, a load returns a RequestDisposable fun

    load(request: LoadRequest): RequestDisposable Usage.kt
  28. // Under the hood, get is a suspend function suspend

    fun get(request: GetRequest): Drawable Usage.kt
  29. // 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
  30. // 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
  31. val imageLoader = ImageLoader(context) { componentRegistry { if (SDK_INT >=

    P) { add(ImageDecoderDecoder()) } else { add(GifDecoder()) } } } GifSupport.kt
  32. Kotlin Coroutines - Documentação Documentação oficial e mais detalhes sobre

    Kotlin Coroutines. tinyurl.com/kotlin-coroutines-docs
  33. Benchmark - Coil vs Picasso vs Glide Artigo comparando a

    performance do Coil, Picasso e Glide em diversos aspectos. tinyurl.com/coil-picasso-glide- benchmark
  34. Android Dev BR - Comunidade Maior comunidade lusófona de Android

    no Slack, com mais de 6.700 pessoas! ❤✨ slack.androiddevbr.org