Channels
#compose
Title
# compose
s
Socheat KHAUV
05/30/2020, 3:54 PMI 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 PMYou don't need to hold a
ModelListstaterememberAs 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
launchInCompositions
Socheat KHAUV
05/30/2020, 4:26 PMthe 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 PMFor 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
launchInCompositions
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 PMIntersting! 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.
v
Vinay Gaba
06/01/2020, 4:52 PM(different from the link I shared before this)
a
allan.conda
06/01/2020, 5:00 PMCool, let me check it out as well
s
Socheat KHAUV
06/01/2020, 5:01 PMThanks @Vinay Gaba , it works
🙌🏼 1
but I got a randomly crash if i scrolled down.
a
allan.conda
06/01/2020, 5:14 PMohhh, 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 PMYeah 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 PMinteresting! Definitely seems like a bug!
a
Andrey Kulikov
06/03/2020, 3:44 PMHey. 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 PMoh 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 AMAwesome! 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 PMI 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")
} 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")
} 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 PMwhat is the error's stack trace?
the first variant is definitely incorrect
s
Socheat KHAUV
06/04/2020, 4:54 PMerror stack trace
a
Andrey Kulikov
06/04/2020, 6:45 PMyes, 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