This is a migrated thread and some comments may be shown as answers.

CachingStrategy="RecycleElement", ListView Performance Android

15 Answers 1130 Views

ListView

This is a migrated thread and some comments may be shown as answers.

Russ asked on 07 Feb 2017, 11:04 PM

About a little over a year ago, there was a property introduced on the Xamarin Forms ListView called CachingStrategy, which can be set to RecycleElement. Is this built in to the RADListView? I have numerous items (60+) on 4 lists with embedded images (160x160) thumbnails in my app. When I test this on the device with decent memory, I am getting very poor performance (painting slow or not at all with the images). Here is a link to information about this property setting. I tried to set it on the RADListView but got no property found. I am using the grid layout format for the ListView.

Some performance tips are here, including use of CachingStrategy...

https://blog.xamarin.com/optimizing-xamarin-forms-apps-for-maximum-performance/

I am also using:

[assembly: XamlCompilation(XamlCompilationOptions.Compile)]

I trimmed down the images as best I could.

Image List 1 total size, 61 files 900KB, bit depth 8 - 160x160

Image List 2 total size, 37 files 804KB, bit depth 8 160x160

Image List 3 total size, 22 files 344KB (this is the only one that is snappy, I am guessing because it has the fewest elements), bit depth 24, 160x160

Image List 4 total size, 62 files 704KB, bit depth 8, 160x160

I also have Java Heap space set to the max 1G in the Android settings, and testing with release mode.

Also, I have to set the HeightRequest on the RADListView to something really high, like 1500 to get these images to appear on the list on first appearing.

Here is my XAML:

<telerikDataControls:RadListView HeightRequest="1500" x:Name="RADlistView" BackgroundColor="White" SelectedItem="{Binding objSelectedTumor, Mode=TwoWay}" > <telerikDataControls:RadListView.ItemTemplate> <DataTemplate> <telerikListView:ListViewTemplateCell> <telerikListView:ListViewTemplateCell.View> <Grid Padding="10" RowSpacing="5" HorizontalOptions="Center" VerticalOptions="Center"> <Grid.RowDefinitions> <RowDefinition Height="6*" /> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> 

<!--these options cause System.NullReferenceException: Object reference not set to an instance of an object in iOS. <br>                                      HorizontalOptions="Center"<br>                                      VerticalOptions="Center"-->

 <controls:CircleImage Grid.Row="0"

<br>                                            Source="{Binding thumb_file_image_name} Converter={StaticResource ImageConverter}"<

br> Aspect="AspectFit"<br

>                                            IsVisible="{StaticResource showSectionAndroidWin}"<

br> > <controls:CircleImage.WidthRequest> <OnPlatform x:TypeArguments="x:Double" iOS="55" Android="55" WinPhone="75" /> </controls:CircleImage.WidthRequest> <controls:CircleImage.HeightRequest> <OnPlatform x:TypeArguments="x:Double" iOS="55" Android="55" WinPhone="75" /> </controls:CircleImage.HeightRequest> </controls:CircleImage> <Image Grid.Row="0"

<br>                                            Source="{Binding thumb_file_image_name} Converter={StaticResource ImageConverter}"<

br> Aspect="AspectFit"<br

>                                            IsVisible="{StaticResource showSectioniOS}"<

br> > <Image.WidthRequest> <OnPlatform x:TypeArguments="x:Double" iOS="55" Android="55" WinPhone="75" /> </Image.WidthRequest> <Image.HeightRequest> <OnPlatform x:TypeArguments="x:Double" iOS="55" Android="55" WinPhone="75" /> </Image.HeightRequest> </Image> <Grid Grid.Row="1" Grid.Column="0" RowSpacing="1" VerticalOptions="Start" HorizontalOptions="Center" > <Grid.RowDefinitions> <RowDefinition Height="*" /> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*" /> </Grid.ColumnDefinitions> <Label Grid.Row="0" Grid.Column="0" LineBreakMode="NoWrap" BackgroundColor="Transparent" HorizontalTextAlignment="Center" VerticalTextAlignment="Center" Text="{Binding name}" TextColor="#81AABC"> <Label.FontSize> <OnPlatform x:TypeArguments="x:Double"> <OnPlatform.WinPhone> <OnIdiom x:TypeArguments="x:Double"> <OnIdiom.Phone>14</OnIdiom.Phone> </OnIdiom> </OnPlatform.WinPhone> <OnPlatform.Android> <OnIdiom Phone="10" Tablet="12" x:TypeArguments="x:Double" /> </OnPlatform.Android> <OnPlatform.iOS> <OnIdiom Phone="10" Tablet="12" x:TypeArguments="x:Double" /> </OnPlatform.iOS> </OnPlatform> </Label.FontSize> </Label> </Grid> </Grid> </telerikListView:ListViewTemplateCell.View> </telerikListView:ListViewTemplateCell> </DataTemplate> </telerikDataControls:RadListView.ItemTemplate> <telerikDataControls:RadListView.LayoutDefinition> <telerikListView:ListViewGridLayout x:Name="gridLayout"

<br>                                                  VerticalItemSpacing="5" <

br

>                                                  HorizontalItemSpacing="5" <

br> SpanCount="5" ItemLength="180" /> </telerikDataControls:RadListView.LayoutDefinition> </telerikDataControls:RadListView>

Any other ideas here?

15 Answers, 1 is accepted

answered on 07 Feb 2017, 11:07 PM

This XAML formatting did not show too well, here is plain text:

<telerikDataControls:RadListView HeightRequest="1500" x:Name="RADlistView"
 BackgroundColor="White"
 SelectedItem="{Binding objSelectedTumor, Mode=TwoWay}" >
 <telerikDataControls:RadListView.ItemTemplate>
 <DataTemplate>
 <telerikListView:ListViewTemplateCell>
 <telerikListView:ListViewTemplateCell.View>
 <Grid Padding="10" RowSpacing="5" HorizontalOptions="Center" VerticalOptions="Center">
 <Grid.RowDefinitions>
 <RowDefinition Height="6*" />
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*" />

 </Grid.ColumnDefinitions>
 
 <controls:CircleImage Grid.Row="0"
 Source="{Binding thumb_file_image_name} Converter={StaticResource ImageConverter}"
 Aspect="AspectFit"
 IsVisible="{StaticResource showSectionAndroidWin}"

 >
 <controls:CircleImage.WidthRequest>
 <OnPlatform x:TypeArguments="x:Double"
 iOS="55"
 Android="55"
 WinPhone="75"
 />
 </controls:CircleImage.WidthRequest>
 <controls:CircleImage.HeightRequest>
 <OnPlatform x:TypeArguments="x:Double"
 iOS="55"
 Android="55"
 WinPhone="75"
 />
 </controls:CircleImage.HeightRequest>
 </controls:CircleImage>
 <Image Grid.Row="0"
 Source="{Binding thumb_file_image_name} Converter={StaticResource ImageConverter}"
 Aspect="AspectFit"
 IsVisible="{StaticResource showSectioniOS}"
 >
 <Image.WidthRequest>
 <OnPlatform x:TypeArguments="x:Double"
 iOS="55"
 Android="55"
 WinPhone="75"
 />
 </Image.WidthRequest>
 <Image.HeightRequest>
 <OnPlatform x:TypeArguments="x:Double"
 iOS="55"
 Android="55"
 WinPhone="75"
 />
 </Image.HeightRequest>
 </Image>

 <Grid Grid.Row="1"
 Grid.Column="0"
 RowSpacing="1"
 VerticalOptions="Start"
 HorizontalOptions="Center"
 >
 <Grid.RowDefinitions>
 <RowDefinition Height="*" />
 </Grid.RowDefinitions>
 <Grid.ColumnDefinitions>
 <ColumnDefinition Width="*" />
 </Grid.ColumnDefinitions>
 <Label Grid.Row="0"
 Grid.Column="0"
 LineBreakMode="NoWrap"
 BackgroundColor="Transparent"
 HorizontalTextAlignment="Center"
 VerticalTextAlignment="Center"
 Text="{Binding name}"
 TextColor="#81AABC">
 <Label.FontSize>
 <OnPlatform x:TypeArguments="x:Double">
 <OnPlatform.WinPhone>
 <OnIdiom x:TypeArguments="x:Double">
 <OnIdiom.Phone>14</OnIdiom.Phone>
 </OnIdiom>
 </OnPlatform.WinPhone>
 <OnPlatform.Android>
 <OnIdiom Phone="10"
 Tablet="12"
 x:TypeArguments="x:Double" />
 </OnPlatform.Android>
 <OnPlatform.iOS>
 <OnIdiom Phone="10"
 Tablet="12"
 x:TypeArguments="x:Double" />
 </OnPlatform.iOS>
 </OnPlatform>
 </Label.FontSize>
 </Label>
 </Grid>
 </Grid>
 </telerikListView:ListViewTemplateCell.View>
 </telerikListView:ListViewTemplateCell>
 </DataTemplate>
 </telerikDataControls:RadListView.ItemTemplate>
 <telerikDataControls:RadListView.LayoutDefinition>
 <telerikListView:ListViewGridLayout x:Name="gridLayout"
 VerticalItemSpacing="5"
 HorizontalItemSpacing="5"
 SpanCount="5"
 ItemLength="180" />
 </telerikDataControls:RadListView.LayoutDefinition>
 </telerikDataControls:RadListView>

answered on 13 Feb 2017, 01:31 PM

Hi Russ,

Thank you for contacting us.

Indeed the performance with CircleImage is very poor on Android and UWP. I noticed that the same author provides another package - Xam.Plugins.Forms.CachedImageCircle. I replaced the CircleImage with CircleCachedImage and this greatly improved the list view performance on Android. On UWP it also works great, but for some reason, the image is not a circle but square.

In UWP we have not yet provided an entry point where you can plug your own logic for performance optimization in the native control. I have logged a feature request in our feedback portal. We will try to expose suitable API in the next internal build.

Please, let us know if the CircleCachedImage works for you or if you have any other questions.

Regards,
Rosy Topchiyska
Telerik by Progress

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items

answered on 14 Feb 2017, 05:38 PM

ListViewCircleImagePerformance-2.zip

Hello Russ,

I actually found the NuGet package for CachedImageCircle, but indeed the git repository does not exist anymore. Here is the package: https://www.nuget.org/packages/Xam.Plugins.Forms.CachedImageCircle/
You can check the attached example, it seems to work great on Android.

On UWP I also couldn't find the init method, but it looks like both CircleCachedImage and CircleImage work without init (except for CircleCachedImage is not circle). At this moment the best option seems to be keeping the circle image for android and using a regular image for UWP.

I have logged a feature request in our feedback portal about improving the performance of the list view with regular images where you can track its status. This issue is critical but it will take some time to provide a solution.

Please let us know if this works for you.

Regards,
Rosy Topchiyska
Telerik by Progress

answered on 15 Feb 2017, 12:56 AM

Thanks so much for the sample. The cached circle images indeed make it snappier. But try to deploy to an actual Android Tablet device and not in the emulator. It is still kind of chunky and not a smooth scroll. The huge issue is that I am experiencing 10-20 second load times on an actual device for the page with the RADListView depending if release or debug in your sample. I even reduced it to 100 items in the list from the 1000 you had it is still several seconds to load. I also bumped up the heap space allotment to the max of 1G as well in the Android settings, still no difference. I modified the sample and added a navigation page root with the RADListView on the navigated page to help eliminate app load time as the delay. Navigate back and forth a few times and the app crashes. Now we have something to replicate the performance and stability problems I have been experiencing. I only have one more day to program this and the customer needs to show off the app at a tradeshow. Anything you can come up with here would be greatly appreciated. Here is the modified app to test with and let me know if you can replicate (we have been able to replicate on a variety of Android tablet devices): https://1drv.ms/u/s!AqgyEBnYTgiooYBS7e7JeDGDqKqy5w

answered on 15 Feb 2017, 01:49 PM

ListViewCircleImagePerformance-2.zip

Hello Russ,

I played a bit with the FFImageLoading library and I managed to get some improvement on Android. I followed the example described here. Please, take a look at the attached sample.

Regards,
Rosy Topchiyska
Telerik by Progress

answered on 17 Feb 2017, 01:50 AM

Thanks Rosy, this is a very cool control and one that will help immensely, I also saw same other great tips on the site for Android specific tweaks like .... "For apps that use a lot of images, to have a all of them in memory you should use android:largeHeap="true" in AndroidManifest.xml. " https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#custom-logger and a few others.

https://github.com/luberda-molinet/FFImageLoading/wiki/Advanced-Usage#custom-logger

I am not seeing the crash now. which is good. I am still seeing about a 6 second load time from the main page to the RADListView page. Any ideas here?

answered on 21 Feb 2017, 10:54 AM

ListViewCircleImagePerformance.zip

Hi Russ,

The workaround that I can suggest right now is to use incremental loading to decrease the size of the initially loaded items. Please, take a look at the attached project and let us know if this works for you.

Regards,
Rosy Topchiyska
Telerik by Progress

answered on 24 Feb 2017, 04:20 AM

I gave this a shot Rosy. Your example has good performance. However, I have implemented it in my app and I am still seeing 12 second load time for the list page. The only difference I can see is that I am using actual files in the Android project instead of linked image files. Also, my images are .png instead of .jpg, and they are not generated as they are actual files on the disc and each one is a different image, not repeated. My Lists range from 30-60 items and even the 30 item list takes long to load. scratching my head now, because your demo performs well. Not sure what is going on. Any other ideas? Here is one set of images for one list of 61 files. LMK when you download these so I can remove the link. https://1drv.ms/u/s!AqgyEBnYTgiooYYMDDfjmfNr_w-kng

answered on 28 Feb 2017, 01:21 PM

ListViewCircleImagePerformance.zip

Hi Russ,

I tested the scenario with your images and I see only 1-2 seconds delay. I have attached the modified project. To run it, just add your images to the android Resources/drawable folder. Please, check the project and modify it if there are any differences between your implementation and mine.

I look forward to your reply.

Regards,
Rosy Topchiyska
Telerik by Progress