sflistview taking 3 seconds to load

[Hardik Parmar]

Hi there,

I am using sflistview in my app in one page. When I navigate to that page, it's taking almost 3 seconds to load that page. I have used same code and data is also static as per example in the sflistview example project I have downloaded from syncfusion website.

Can you help me with this.

Thanks in advance.  

[Muthu Kumaran Gnanavinayagam]

Hi Hardik,   

    

When the list view items are loaded with large size images or complex layouts, it takes some time to load the View initially. This is the time taken from Xamarin framework to render the specified layout in view. SfListView is implemented completely based on virtualization (and item recycling) concept by default. So, it creates the element only which are in view on initial loading and while scrolling, we have recycled the existing elements by updating only the BindingContext to provide better performance on scrolling.   

   

We just let you know that Xamarin have introduced the two concepts (Fast Renderers and Layout Compression) to decrease the rendering time in their later XF versions. Please check it.   

   

https://developer.xamarin.com/guides/xamarin-forms/under-the-hood/fast-renderers/    

https://developer.xamarin.com/guides/xamarin-forms/user-interface/layouts/layout-compression/    

    

If still you are facing any problem specifically in SfListView, then could you please share more details (ItemTemplate of SfListView, device configuration, platform etc.) which helps us to analyze and resolve the problem better.   

    

Regards,   

G.Muthu kumaran.  

[Hardik Parmar]

Hi Muthu,

We've used item reordering  item template as per the example project of item reordering and we have checked that project is also taking 3 seconds to load project.

Maybe it's becuase of image of checkboxes we're loading.

It's perfectly working in ios and loading time is zero but in android it's taking 3 seconds to load page.

You can also check item reordering sample project, it takes 3 seconds to load in android.

Phone : Asus Zenfone 2, Android 5.0 Lolipop
Platform : Android

ItemTemplate :

<syncfusion:SfListView.ItemTemplate>

<DataTemplate>

                    <Frame HasShadow="True" BackgroundColor="White" Padding="0">

<Frame.InputTransparent>

<OnPlatform x:TypeArguments="x:Boolean" Android="True" WinPhone="False" iOS="False"/>

</Frame.InputTransparent>

<Grid>

<Grid.ColumnDefinitions>

<ColumnDefinition Width="70" />

<ColumnDefinition Width="*" />

<ColumnDefinition Width="60" />

</Grid.ColumnDefinitions>

                            <Grid Padding="25,20,25,20">

                                <Grid.GestureRecognizers>

                                    <TapGestureRecognizer Command="{Binding Path=BindingContext.MarkDoneCommand, Source={x:Reference Name=listView}}"

                                                  CommandParameter="{Binding .}"/>

                                </Grid.GestureRecognizers>

                                <Image Source="{Binding ., Converter={StaticResource ImagePathConverter }, ConverterParameter=SampleBrowser.SfListView.Checked.png}"

                                       HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFill"

                                   IsVisible="{Binding IsDone}"/>

                                <Image Source="{Binding ., Converter={StaticResource ImagePathConverter }, ConverterParameter=SampleBrowser.SfListView.Unchecked.png}"

                                       HorizontalOptions="Center" VerticalOptions="Center" Aspect="AspectFill"

                                   IsVisible="{Binding IsDone, Converter={StaticResource inverseBoolConverter}}"/>

                            </Grid>

                            <Label x:Name="textLabel" Text="{Binding Name}"

Grid.Column="1"

FontSize="15" 

                          TextColor="#333333"

                          VerticalOptions="Center" 

                          HorizontalOptions="Start" 

                          Margin="5,0,0,0" />

                            <BoxView Grid.Column="1" Margin="5,3,0,0" BackgroundColor="#333333" 

                                     HeightRequest="1" WidthRequest="{Binding Source={x:Reference textLabel}, Path=Width}"

                                     VerticalOptions="Center" HorizontalOptions="Start"

                                     IsVisible="{Binding IsDone}" />

                            <syncfusion:DragIndicatorView Grid.Column="2" ListView="{x:Reference listView}" HorizontalOptions="Center" VerticalOptions="Center">

<Grid Padding="10, 20, 20, 20">

<Image Source="{Binding ., Converter={StaticResource ImagePathConverter }, ConverterParameter=SampleBrowser.SfListView.DragIndicator.png}"

VerticalOptions="Center"

                            HorizontalOptions="Center" />

</Grid>

</syncfusion:DragIndicatorView>

</Grid>

                    </Frame>

                </DataTemplate>

</syncfusion:SfListView.ItemTemplate>

 

Thanks,

Hardik       

[Dinesh Babu Yadav]

Hi Hardik, 

 

Thanks for the update. 

 

We have checked the reported issue with lower android version device configurations and regret to let you know that the loading time taken in Android platform arises while creating the equivalent native view(Android) with Xamarin Forms. And this is Xamarin Forms architectural behavior with respective renderer platforms as mentioned earlier. Since, SfListView creates the element only which are in view on initial loading based on UI Virtualization concept and while scrolling, elements gets recycled as provided in earlier update. 

 

So, we have suggested you to utilize the Fast Renderers and Layout Compression concepts in Android renderer platforms to reduce the rendering time which might be helpful for your requirement.  

 

Tested in below device configuration: 

 

Android Phone Model : Moto E       

Android Version : 4.4.4 (KitKat)       

RAM : 1 GB       

 

Please let us know if you require further assistance. 

 

Regards, 

Dinesh Babu Yadav