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

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

    View full-size slide

  2. Olá, pessoal!
    Meu nome é Walmyr Carvalho,
    muito prazer! :)

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  7. Carregamento de imagens:
    Como é trabalhar com isso no Android?

    View full-size slide

  8. Pergunta: como a gente faz para carregar uma imagem
    no Android, sem fazer nenhum uso de bibliotecas?

    View full-size slide

  9. Loading de imagens com AsyncTask
    private class DownloadImageAsyncTask(imageView: ImageView) : AsyncTask() {
    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)
    }
    }

    View full-size slide

  10. É, no começo era meio chato mesmo.
    Mas, com o tempo, foram surgindo algumas
    bibliotecas legais para ajudar nessa tarefa tão simples:

    View full-size slide

  11. Glide (Google) - GitHub
    Biblioteca open source de
    carregamento de imagens para
    Android, mantida pelo Google.
    github.com/bumptech/glide

    View full-size slide

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

    View full-size slide

  13. Picasso (Square) - GitHub
    Biblioteca de carregamento de
    imagens no Android, mantida
    pela Square.
    github.com/square/picasso

    View full-size slide

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

    View full-size slide

  15. Fresco (Facebook) - GitHub
    Biblioteca de carregamento de
    imagens para Android, mantida
    pelo Facebook.
    github.com/facebook/fresco

    View full-size slide

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

    View full-size slide

  17. Em paralelo a isso tudo…

    View full-size slide

  18. Fonte: JetBrains

    View full-size slide

  19. 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!

    View full-size slide

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

    View full-size slide

  21. Fonte: Android Developers, 2020

    View full-size slide

  22. 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!

    View full-size slide

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

    View full-size slide

  24. A linguagem Kotlin também vem evoluindo
    numa velocidade incrível, graças ao ótimo
    trabalho da JetBrains e da comunidade! ❤

    View full-size slide

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

    View full-size slide

  26. Tá, mas o que isso tudo tem a ver com
    carregamento de imagens no Android?

    View full-size slide

  27. Coil:
    O que temos de legal?

    View full-size slide

  28. O Coil (Coroutines Image Loader) é uma
    biblioteca de carregamento de imagens
    para Android que utiliza as coroutines do
    Kotlin por baixo dos panos! ✨

    View full-size slide

  29. Coil - Documentação
    Documentação oficial e mais detalhes
    sobre o Coil.
    coil-kt.github.io/coil

    View full-size slide

  30. A biblioteca tem como objetivo quatro
    pontos principais: ser rápida, leve, fácil de
    usar e moderna. ❤

    View full-size slide

  31. 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+.

    View full-size slide

  32. 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"
    }
    }

    View full-size slide

  33. build.gradle.kts
    android {
    compileOptions {
    sourceCompatibility = JavaVersion.VERSION_1_8
    targetCompatibility = JavaVersion.VERSION_1_8
    }
    }
    tasks.withType {
    kotlinOptions {
    jvmTarget = "1.8"
    }
    }

    View full-size slide

  34. 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")

    View full-size slide

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

    View full-size slide

  36. Data types suportados:
    • String
    • HttpUrl
    • Uri (android.resource, content, file, http e https)
    • File
    • Drawable
    • @Drawable res
    • Bitmap

    View full-size slide

  37. // Async image loading
    imageView.load("https://www.example.com/image.jpg") {
    crossfade(true)
    placeholder(R.drawable.image)
    transformations(CircleCropTransformation())
    }
    Usage.kt

    View full-size slide

  38. // Under the hood, a load returns a RequestDisposable
    fun load(request: LoadRequest): RequestDisposable
    Usage.kt

    View full-size slide

  39. val disposable = imageView.load("https://www.example.com/image.jpg")
    // Cancel the request
    disposable.dispose()
    Usage.kt

    View full-size slide

  40. // Returns a Drawable
    val drawable = Coil.get("https://www.example.com/image.jpg")
    Usage.kt

    View full-size slide

  41. // Under the hood, get is a suspend function
    suspend fun get(request: GetRequest): Drawable
    Usage.kt

    View full-size slide

  42. Hmm… e o que são esses ImageLoaders?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  45. Daora!
    O que mais dá pra fazer com o Coil?

    View full-size slide

  46. implementation("io.coil-kt:coil-gif:0.9.5")
    GifSupport.kt

    View full-size slide

  47. val imageLoader = ImageLoader(context) {
    componentRegistry {
    if (SDK_INT >= P) {
    add(ImageDecoderDecoder())
    } else {
    add(GifDecoder())
    }
    }
    }
    GifSupport.kt

    View full-size slide

  48. implementation("io.coil-kt:coil-svg:0.9.5")
    SvgSupport.kt

    View full-size slide

  49. val imageLoader = ImageLoader(context) {
    componentRegistry {
    add(SvgDecoder())
    }
    }
    SvgSupport.kt

    View full-size slide

  50. Demonstração!
    Vamos ver o que como fica isso na prática?

    View full-size slide

  51. Se eu quiser aprender mais sobre,
    onde eu posso encontrar material?

    View full-size slide

  52. Coil - Documentação
    Documentação oficial e mais detalhes
    sobre o Coil.
    coil-kt.github.io/coil

    View full-size slide

  53. Kotlin Coroutines - Documentação
    Documentação oficial e mais detalhes
    sobre Kotlin Coroutines.
    tinyurl.com/kotlin-coroutines-docs

    View full-size slide

  54. Benchmark - Coil vs Picasso vs Glide
    Artigo comparando a performance do
    Coil, Picasso e Glide em diversos
    aspectos.
    tinyurl.com/coil-picasso-glide-
    benchmark

    View full-size slide

  55. Android Dev BR - Comunidade
    Maior comunidade lusófona de Android no
    Slack, com mais de 6.700 pessoas! ❤✨
    slack.androiddevbr.org

    View full-size slide

  56. Perguntas?
    Ficou alguma dúvida?

    View full-size slide

  57. Muito obrigado!
    Se tiver qualquer dúvida ou sugestão,
    pode falar comigo. ❤
    @walmyrcarvalho
    /walmyrcarvalho
    [email protected]

    View full-size slide