https://kotlinlang.org logo
Join Slack
Powered by
I want to have build a carousel of image. I creat...
# compose
s
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
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
the 1st image in column, it works but the 2nd image and 3rd image, that I put VerticalScroller did not display.
v
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
@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
^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
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
@Vinay Gaba - would you mind to share ur code ? mabye it could help my self to follow ur code either.
v
(different from the link I shared before this)
a
Cool, let me check it out as well
s
Thanks @Vinay Gaba , it works
🙌🏼 1
but I got a randomly crash if i scrolled down.
a
ohhh, yeah that’s the same crash. It only happens when you fling
or like there’s fling velocty left
v
Yeah I’ve noticed this too. I’ve adapted to scroll slowly until this bug is fixed 😆
a
@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
interesting! Definitely seems like a bug!
a
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
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
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
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
what is the error's stack trace?
the first variant is definitely incorrect
s
error stack trace
stack.txt
a
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
34 Views
Open in Slack
PreviousNext
Powered by