ListView not performing good

LeonLaciLeonLaci USMember ✭✭

I have a ListView in which each cell contains an image, text and subtext. A lot like the image cell (but I'm using grids because I need more customizability).

Here's an example:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:local="clr-namespace:XamarinFormsPlayground"
             x:Class="XamarinFormsPlayground.MainPage"
             xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"
             xmlns:fftransformations="clr-namespace:FFImageLoading.Transformations;assembly=FFImageLoading.Transformations">
    <ListView
        x:Name="TestList"
        CachingStrategy="RecycleElement"
        RowHeight="65">
        <ListView.ItemTemplate>
            <DataTemplate>
                <ViewCell>
                    <Grid
                        Padding="7, 0, 0, 0">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="25" />
                            <RowDefinition Height="16" />
                            <RowDefinition Height="17" />
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="70" />
                            <ColumnDefinition Width="*" />
                        </Grid.ColumnDefinitions>
                        <ffimageloading:CachedImage
                            Source="{Binding Image}"
                            Grid.Row="0"
                            Grid.Column="0"
                            Grid.RowSpan="3"
                            Margin="10, 5, 0, 10"
                            CacheType="All"
                            DownsampleWidth="128"
                            DownsampleHeight="128"
                            FadeAnimationForCachedImages="False">
                            <ffimageloading:CachedImage.Transformations>
                                <fftransformations:CircleTransformation />
                            </ffimageloading:CachedImage.Transformations>
                        </ffimageloading:CachedImage>
                        <Label
                            Text="{Binding Title}"
                            TextColor="Black"
                            FontSize="18"
                            Grid.Row="0"
                            Grid.Column="1"
                            LineBreakMode="TailTruncation"
                            Margin="0, 5, 0, 0"/>
                        <Label
                            FormattedText="{Binding ArtistAndAlbum}"
                            FontSize="14"
                            Grid.Row="1"
                            Grid.Column="1"
                            LineBreakMode="TailTruncation"/>
                    </Grid>
                </ViewCell>
            </DataTemplate>
        </ListView.ItemTemplate>
    </ListView>
</ContentPage>

I have a list with 300+ items and the list is not that smooth. Same goes for ImageCell.
Tried caching, didn't fix much.
Tried using the FFImageLoader extensions and I see improvements but only in image loading time, but I need it to be faster, still.

I opened other apps that have long lists (even longer than mine) with almost the same cell layout and everything loads instantaneously and scrolling is butter smooth.

Here is a video of how it looks in my app:

And my desired result:

Answers

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭
    Can be an image size problem?
  • LeonLaciLeonLaci USMember ✭✭

    Nope. Almost same result when images are 64px x 64px.

  • LeonLaciLeonLaci USMember ✭✭

    I tried even without images and there's still stuttering when scrolling.

  • KingNguyenKingNguyen USMember ✭✭

    Try not use RecycleElement

  • voidstreamvoidstream FRMember ✭✭✭
    edited October 21
  • LeonLaciLeonLaci USMember ✭✭

    @KingNguyen
    Tried. Same results.

    @voidstream I am using url and not local images.

  • voidstreamvoidstream FRMember ✭✭✭

    @LeonLaci said:
    @KingNguyen
    Tried. Same results.

    @voidstream I am using url and not local images.

    You have the same issue without images? Your toolbar images from url too?

    I never use ffimageloading:CachedImage, you really need this here?

    How you fill your list? You add item one by one in the source or your fill is with a filled list? Are you sure the list is totaly generated when you are scrolling?

    Can you replace your grid by stacklayouts and only use labels, do you have the same issue?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @LeonLaci can be a good idea if you attach to this post a REPO so we could do some tests...

  • LeonLaciLeonLaci USMember ✭✭

    @AlessandroCaliaro This uses the same setup for listviews and performs the same as my project but I didn't want to share my original project: https://drive.google.com/file/d/0ByeijW5mxFqia1BFd2Y4M3U3LVU/view?usp=sharing

    @voidstream Gonna try using stacklayouts then.

    Then list is filled by first adding all the items and then adding that list to the listview as itemssource. The list is generated completely before scrolling begins.

  • LeonLaciLeonLaci USMember ✭✭

    @voidstream I tried using a stack layout instead of a grid. The scrolling is really smooth! But... the images load super slow. Even after they load and I scroll up they take a while to appear.

  • seanydaseanyda GBMember ✭✭✭✭✭

    @LeonLaci said:
    @voidstream I tried using a stack layout instead of a grid. The scrolling is really smooth! But... the images load super slow. Even after they load and I scroll up they take a while to appear.

    Try this Nuget. It's a direct replacement for Image in Forms (CachedImage instead). I used to have a scrolling/images issue with ListViews and this nuget made a massive difference.

    https://github.com/luberda-molinet/FFImageLoading

  • LeonLaciLeonLaci USMember ✭✭

    @seanyda Already using it. But here's the issues.

    With stack layouts and FFImageLoading the performance is really good (what I wanted) but for some reason FFImageLoading crashes when scrolling sometimes.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @LeonLaci I have run your app. I think a lot of delay is during the "image loading" from the web. I would like to try if using an image from "resources" give better performance. I would like also remove "circleImage" option...

  • LeonLaciLeonLaci USMember ✭✭

    @AlessandroCaliaro For some reason the image links are making the app run so slooow. I changed the links to http://via.placeholder.com/64x64 and they load just fine with FFImageLoading. But as I've said previously it now crashes the app. If it didn't my issue would be solved as the performance is pretty good.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    does it work fine also with ListView?

  • LeonLaciLeonLaci USMember ✭✭

    @AlessandroCaliaro I was using ListView the whole time...

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @LeonLaci said:
    @seanyda Already using it. But here's the issues.

    With stack layouts and FFImageLoading the performance is really good (what I wanted) but for some reason FFImageLoading crashes when scrolling sometimes.

    I have understand you use a stacklayout instead of listview... sorry for the misunderstanding

  • JulienRosenJulienRosen CAMember ✭✭✭✭
    edited October 23

    based on your video it looks like all the lag you are talking about is simply the time it takes to load the images from their URL

    what happens if you use local resource images?

    what is the source of your images?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @JulienRosen using http://via.placeholder.com/64x64 it works better... there is a problem with FFImageLoading library...

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    i am not sure why you think the fact that loading images is not instant means there is a problem with FFImageLoading ?

  • LeonLaciLeonLaci USMember ✭✭

    When I was testing with the stack layout, it was smooth (only with FFImageLoading). And just now I realize that the fact it was smooth was because every image was the same (FFImageLoading greatly optimizes performance if you use the same image). Even with the stack layout and FFImageLoading I still see stuttering (like in the beginning).

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    you are loading lots of images from an external source.

    you are limited by
    1) the capabilities of the device itself to deal with the web request for each image
    2) the speed of the external source to deliver those images in a timely manner

  • LeonLaciLeonLaci USMember ✭✭

    @JulienRosen
    Both of those shouldn't be an issue.

    The images at first don't appear so fast probably because of my internet limitations. But I still don't know why they keep disappearing on scroll and reappearing and why the scrolling itself stutters.

    Maybe if I try to actually download the images to a semi-permanent location on the device the images won't disappear.

    If the Deezer app (second video in OP) can load everything so fast without stutter there must be a way I can too (on the same device).

  • JulienRosenJulienRosen CAMember ✭✭✭✭
    edited October 23

    pretty sure the images disappearing and reappearing is because you are using RecycleElement

    having the images as a local resource is definitely the best performing solution, but may not be feasible for a list of dynamic content. also, it is really data heavy to download all those images, especially if you are downloading the entire list of images even if the user never scrolls down

    i would assume that any serious app has a lot of infrastructure devoted to delivering images quickly and reliably

  • LeonLaciLeonLaci USMember ✭✭

    Without using RecycleElement the situation is a bit better. There is less disappearing. Though when scrolling a little faster there is still serious stutter.

  • JulienRosenJulienRosen CAMember ✭✭✭✭

    you should try on a couple different devices to get a feel for where the issues are coming from

  • LeonLaciLeonLaci USMember ✭✭

    I don't have access to different devices. Just my phone.

    With images (Image or FFImageLoading) the list stutters.
    Without images at all no stuttering.

    It's not that big of an issue but it is annoying.

  • voidstreamvoidstream FRMember ✭✭✭

    @LeonLaci said:
    @voidstream I tried using a stack layout instead of a grid. The scrolling is really smooth! But... the images load super slow. Even after they load and I scroll up they take a while to appear.

    Great info, stack better than grid so

  • DirkWilhelmDirkWilhelm USMember ✭✭✭

    @LeonLaci did you follow the advice on the FFIMageloading page regarding using RecycleElement? https://github.com/luberda-molinet/FFImageLoading/wiki/Xamarin.Forms-Advanced

  • PhilippSumiPhilippSumi USMember ✭✭✭

    The guys from FFImageLoading are providing really good support. Did you post the issue on their GitHub already?

  • LeonLaciLeonLaci USMember ✭✭

    @DirkWilhelm That's seems like a nice guide. Will try it out later today.

  • DanielLDanielL PLInsider ✭✭✭✭
    edited October 24

    The thing is that binding in fast scrolling list views are really slow, that leads to some image loading lag, the proposed solution will allow you to fix this (it also applies to standard Xamarin.Forms.Image too).

    BTW: Really hoping that something like BindingMode.OneTime will be included in Forms soon, as that would help to solve a lot of performance issues.

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    @DanielL the second problem is that the app crashes using RecycleElement and your FFImageLoading ...

  • DanielLDanielL PLInsider ✭✭✭✭

    @AlessandroCaliaro Are you sure it's FFImageLoading? We have RecycleElement samples in our sample app, I test them really often and didn't have any crash. Could you post stack trace? What platform?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Problem is Always on Android... To have a stacktrace I have to take a look to logcat... ten minutes

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    here is the log... I think it's not a "FF" problem, but @DanielL can you take a look?

    log.txt 49.9K
  • DanielLDanielL PLInsider ✭✭✭✭

    I took a fast look and it looks like some kind of problem with FormattedString usage. Did you try to disable it and see if it would solve crash issues?

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    I try...

  • AlessandroCaliaroAlessandroCaliaro ITMember ✭✭✭✭✭

    Yes @DanielL you are right... I have removed FormattedString and Crash is disappeared... @LeonLaci can you confirm?

  • LeonLaciLeonLaci USMember ✭✭

    I used the guide for RecycleElement and the scrolling smoothness is a bit better. The images still keep disappearing and reappearing.

    Maybe there isn't much more I can do without implementing some more advanced techniques for my usecase.

Sign In or Register to comment.