Any suggestion for async image loading? In other words: do we have Glide/Fresco/Picasso for Compose?...

# compose

[nglauber]

Any suggestion for async image loading? In other words: do we have Glide/Fresco/Picasso for Compose? 🙂

[Adam Powell]

You can wire any of those in using an effect 🙂

[Adam Powell]

use a custom image load target and have it set a field in an @Model, and return that from the effect

[Adam Powell]

we were just chatting on the team earlier this afternoon about having some integration artifacts to provide some of these things

[Adam Powell]

but they're doable using public API today

[nglauber]

Thanks @Adam Powell! But how can I create an Image using a Drawable or Bitmap? 🤔

[Leland Richardson [G]]

yeah i just did this myself. i had to duplicate the src for AndroidImage since it’s marked as internal. I think we should probably change that

[nglauber]

Got it @Leland Richardson [G] 😉

[Leland Richardson [G]]

Image is an interface, so you can implement it yourself. the code for AndroidImage is basically just a wrapper around Bitmap so it’s not a lot of code to copy

[Leland Richardson [G]]

there might be a few of these statements where we say “you can do that yourself with public API”, and the intention is there, but there’s some class we accidentally made internal and haven’t realized it yet

[Leland Richardson [G]]

i think this is one of those cases, unless i’m missing something

[Leland Richardson [G]]

Note: if you happen to write a really robust one, let me know! 🙂

[nglauber]

I probably won’t 🙃

[Leland Richardson [G]]

here’s a real rough start of one that I just did using Picasso….

[Leland Richardson [G]]

@Composable
fun Image(url: String, aspectRatio: Float) {
    var image by +state<Image?> { null }
    var drawable by +state<Drawable?> { null }
    +onCommit(url) {
        val picasso = Picasso.get()
        val target = object : Target {
            override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
                // TODO(lmr): we could use the drawable below
                drawable = placeHolderDrawable
            }

            override fun onBitmapFailed(e: Exception?, errorDrawable: Drawable?) {
                drawable = errorDrawable
            }

            override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
                image = bitmap?.let { AndroidImage(it) }
            }
        }
        picasso
            .load(url)
            .into(target)

        onDispose {
            image = null
            drawable = null
            picasso.cancelRequest(target)
        }
    }
    // TODO(lmr): what's the best way to do aspect ratio here, and have the image fill the available
    // width?
    Container(height = 100.dp * aspectRatio, width = 100.dp) {
        val theImage = image
        val theDrawable = drawable
        if (theImage != null) {
            DrawImage(image = theImage)
        } else if (theDrawable != null) {
            Draw { canvas, parentSize -> theDrawable.draw(canvas.nativeCanvas) }
        }
    }
}

[nglauber]

awesome! I’m trying it now! 😛

[Leland Richardson [G]]

real bare bones right now, but that might get ya started

[Leland Richardson [G]]

hard coded to 100.dp right now 🙂

[Leland Richardson [G]]

i’ll let ya know if i get something more complete. i might be doing that in next few days. we are doing a hackathon internally so i’ve been making a few odd things like this 😉

[nglauber]

It worked 😉 thanks!
Now fighting with the alignment on the second tab 😛

[nglauber]

@Leland Richardson [G] I wrote a post (in portuguese) describing how do I created this sample app. I gave you the credit for the Image component 😄
https://medium.com/@nglauber/jetpack-compose-part-ii-async-data-tabs-scroller-fab-state-efc8e267b914

[Leland Richardson [G]]

wow, super cool! going to take a look

[nglauber]

awesome! I really appreciate your feedback 😉

[ghedeon]

any plans to support image loading by widget out of the box, like flutter does?

[itnoles]

AndroidImage is internal, hmm

[Leland Richardson [G]]

yeah - i ended up copy/pasting it out in order to do what i did above. We will make it public I believe.