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

Coil - Acelerando o carregamento de imagens no Android com coroutines

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

B567f69eed037ed20536fc825305a38d?s=128

Walmyr Carvalho

March 24, 2020
Tweet

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) } }
  10. None
  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!
  21. None
  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?

  30. None
  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