https://kotlinlang.org logo
#compose
Title
# compose
s

Socheat KHAUV

05/30/2020, 3:54 PM
I want to have build a carousel of image. I create ModelList, and load item from RestAPI and add into it. at AdapterList, I wanted to add Image, but I could not find a way to have Image which load from network url. anyone could help ?
a

Adam Powell

05/30/2020, 4:00 PM
You don't need to hold a
ModelList
in a
state
, just
remember
it.
As for network image loading, you can see how Chris did it here: https://github.com/chrisbanes/accompanist/blob/master/coil/README.md
this predates the
launchInComposition
API; there's some streamlining that could be done in the implementation too 🙂
s

Socheat KHAUV

05/30/2020, 4:26 PM
the 1st image in column, it works but the 2nd image and 3rd image, that I put VerticalScroller did not display.
v

Vinay Gaba

05/30/2020, 9:09 PM
For anyone who wants examples with Picasso/Glide, I have them here - https://github.com/vinaygaba/Learn-Jetpack-Compose-By-Example/blob/master/app/src/main/java/com/example/jetpackcompose/image/ImageActivity.kt
launchInComposition
looks interesting. I’ll try updating them to use it!
s

Socheat KHAUV

05/31/2020, 10:00 AM
@Vinay Gaba Thanks you it works.
🙏🏼 1
still have one more question. my ModelList is getting 20 items from rest api. when I use AdapterList, I could not scroll to the last item. look like something wrong with scroll. when I use with VerticalScroller. I could scroll to the last item. not sure why.
👍 1
a

allan.conda

06/01/2020, 4:13 AM
^I have the same problem with AdapterList, only when dealing with Images (I loaded the images with Glide). a list of Text for example works fine.
v

Vinay Gaba

06/01/2020, 3:42 PM
Intersting! I have tried it with a ListItem that has an image & a couple text’s inside it and that seems to be working fine.
s

Socheat KHAUV

06/01/2020, 4:52 PM
@Vinay Gaba - would you mind to share ur code ? mabye it could help my self to follow ur code either.
(different from the link I shared before this)
a

allan.conda

06/01/2020, 5:00 PM
Cool, let me check it out as well
s

Socheat KHAUV

06/01/2020, 5:01 PM
Thanks @Vinay Gaba , it works
🙌🏼 1
but I got a randomly crash if i scrolled down.
a

allan.conda

06/01/2020, 5:14 PM
ohhh, yeah that’s the same crash. It only happens when you fling
or like there’s fling velocty left
v

Vinay Gaba

06/01/2020, 5:33 PM
Yeah I’ve noticed this too. I’ve adapted to scroll slowly until this bug is fixed 😆
a

allan.conda

06/01/2020, 6:34 PM
@Vinay Gaba looks like either wrapping with Card or ListItem somehow kept my issue from happening on your repo. I get the same issue if I directly use images. (Issue is it doesn’t scroll all the items)
v

Vinay Gaba

06/01/2020, 8:43 PM
interesting! Definitely seems like a bug!
a

Andrey Kulikov

06/03/2020, 3:44 PM
Hey. two updates: I figured out the issue with crashing during scroll, hope to fix it soon
second is about when you can't scroll to the latest item. seems like the issue here is that your NetworkImageComponentPicasso is not taking any space when it has no image yet, even as it should. what happens is during scroll we figured out that we have say 10 more pixels to consume. we compose the new item and measure it. but your NetworkImageComponentPicasso measures with 0 height as it has no image yet. then we can't correctly scroll as the new item has no size. it could be fixed if inside NetworkImageComponentPicasso you will emit something like Spacer(modifier) when there is no image yet, so it reserves these 60.dp size even before it is loaded
@Vinay Gaba @Socheat KHAUV @allan.conda
v

Vinay Gaba

06/03/2020, 3:52 PM
oh nice! That’s good to know. I can also add a placeholder loading image which Picasso’s API allows you to configure and that should hopefully do it. Thanks a lot for investigating this issue 🙏🏼
a

allan.conda

06/04/2020, 3:50 AM
Awesome! For the second one, that explains why it works when it is wrapped in a container with a size. Let me try using a Spacer
s

Socheat KHAUV

06/04/2020, 3:14 PM
I am not really sure what is the root cause behind Example 1 - NO ERROR, but UI Text is not update because $a is just a simple var
Copy code
AdapterList(data = (1..100).map { it }.toList()) { it ->
var a = "test "
onCommit {
    val picasso = Picasso.get()
    val target = object : Target {
        override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
            a = "onPrepareLoad"
        }

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

        override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
            a = "onBitmapLoaded"
        }
    }
    picasso
        .load("<http://image.tmdb.org/t/p/w185/eifGNCSDuxJeS1loAXil5bIGgvC.jpg>")
        .into(target)
}
Text("Loading $a $it")
}
Example 2 - having crush randomly when scroll
Copy code
AdapterList(data = (1..100).map { it }.toList()) { it ->
var b by state { "test " }
onCommit {
    val picasso = Picasso.get()
    val target = object : Target {
        override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
            b = "onPrepareLoad"
        }

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

        override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
            b = "onBitmapLoaded"
        }
    }
    picasso
        .load("<http://image.tmdb.org/t/p/w185/eifGNCSDuxJeS1loAXil5bIGgvC.jpg>")
        .into(target)
}
Text("Loading $b $it")
}
Exmaple 3 - No Error, I am not why, It is just only 1 line different between example 2 at onBitmapLoaded func
Copy code
AdapterList(data = (1..100).map { it }.toList()) { it ->
var c by state { "test " }
onCommit {
    val picasso = Picasso.get()
    val target = object : Target {
        override fun onPrepareLoad(placeHolderDrawable: Drawable?) {
            c = "onPrepareLoad"
        }

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

        override fun onBitmapLoaded(bitmap: Bitmap?, from: Picasso.LoadedFrom?) {
        }
    }
    picasso
        .load("<http://image.tmdb.org/t/p/w185/eifGNCSDuxJeS1loAXil5bIGgvC.jpg>")
        .into(target)
}
Text("Loading $c $it")
}
a

Andrey Kulikov

06/04/2020, 4:36 PM
what is the error's stack trace?
the first variant is definitely incorrect
s

Socheat KHAUV

06/04/2020, 4:54 PM
error stack trace
a

Andrey Kulikov

06/04/2020, 6:45 PM
yes, this issue will be fixed in one of the next releases, I found the reason. unfortunately I am not sure there is any workaround for it for now
18 Views