ContentPage containing list view display very slow on Android

Question

I am not sure whether this is my problem or a problem with Xamarin. On an iPad my application can load the page which contain a list of data in ListView. The View Cell inside the ListView can be slightly complex. It contains a profile image, some smaller icons using, which are using FFImageLoading.

On iPad, when I tap a cell of the first page to go into the next page, which contains a list of data, it loads very smoothly. On Android, when I tap on a cell to go into the next page, the detection of the tap is slow and the loading time of the ListView also very slow.

Is there anyway enhance the performance? I thought it was the data I loaded from SQLite. However, after I comment out the ItemsSource on ListView, the loading time is fine.

This is the datatemplate I've used for displaying the cell.

<ViewCell>
               <ViewCell.View>
                    <StackLayout Spacing="0" Padding="0" VerticalOptions="FillAndExpand" HorizontalOptions="FillAndExpand">
                        <StackLayout Orientation="Horizontal" Spacing="10" Padding="0" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand">
                            <StackLayout Orientation="Horizontal" HorizontalOptions="StartAndExpand">
                                <controls:CircleImage 
                                    Style="{StaticResource profileImageStyle}"
                                    Margin="10, 10, 10, 10"
                                    Source="{Binding Source}"
                                    BorderColor="White"
                                    BorderThickness="2"
                                    VerticalOptions="Center"
                                    HorizontalOptions="Center">

                                    <controls:CircleImage.GestureRecognizers>
                                        <TapGestureRecognizer  Tapped="OnChildDetailTapped" />
                                    </controls:CircleImage.GestureRecognizers>
                                </controls:CircleImage>

                                <StackLayout VerticalOptions="Fill" Spacing="1" Padding="0,20,0,10" HorizontalOptions="StartAndExpand">
                                    <StackLayout.GestureRecognizers>
                                        <TapGestureRecognizer  Tapped="OnChildDetailTapped" /> 
                                    </StackLayout.GestureRecognizers>
                                    <StackLayout
                                        Orientation="Vertical"
                                        VerticalOptions="Center"
                                        HorizontalOptions="StartAndExpand"> 
                                        <Label x:Name="childName" Text="{Binding DisplayName}" Style="{StaticResource normalFont}"> </Label>
                                        <local:ChildInfoIconsView 
                                            Child="{Binding .}"
                                            VerticalOptions="Fill">
                                        </local:ChildInfoIconsView>


                                        <Label 
                                            x:Name="childNotes"
                                            Style="{StaticResource footnoteFont}"
                                            Text="{Binding ChildNotes, StringFormat={x:Static local:AppResources.formatNotes}}" 
                                            IsVisible="{Binding HasChildNotes}">
                                        </Label>
                                        <Label 
                                            x:Name="noPickupReason" 
                                            Style="{StaticResource footnoteFont}"
                                            Text="{Binding NoPickupReason, StringFormat={x:Static local:AppResources.formatNoPickupReason}}" 
                                            IsVisible="{Binding HasNoPickupReason}">
                                        </Label>
                                        <Label 
                                            x:Name="absentReason" 
                                            Style="{StaticResource footnoteFont}"
                                            Text="{Binding AbsentReason, StringFormat={x:Static local:AppResources.formatAbsentReason}}"
                                            IsVisible="{Binding HasAbsentReason}">
                                        </Label> 
                                    </StackLayout>  
                                </StackLayout>
                            </StackLayout>

                            <StackLayout Orientation="Horizontal" VerticalOptions="FillAndExpand" HorizontalOptions="End">

                                <StackLayout.Padding>
                                    <OnIdiom x:TypeArguments="Thickness">
                                        <OnIdiom.Phone>5, 20, 10, 20</OnIdiom.Phone>
                                        <OnIdiom.Tablet>10, 30, 30, 30</OnIdiom.Tablet>
                                    </OnIdiom>
                                </StackLayout.Padding>

                                <Image 
                                    Style="{StaticResource listviewButtonStyle}"
                                    IsVisible="{Binding EnabledSigning, Source={x:Reference page}}" 
                                    Source="ic_action_yes.png"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="End">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer  Tapped="OnAttend" />
                                    </Image.GestureRecognizers>
                                    <Image.Margin>
                                        <OnIdiom x:TypeArguments="Thickness">
                                            <OnIdiom.Phone>0, 0, 5, 0</OnIdiom.Phone>
                                            <OnIdiom.Tablet>5, 5, 20, 5</OnIdiom.Tablet>
                                        </OnIdiom>
                                    </Image.Margin>
                                </Image>
                                <Image 
                                    Style="{StaticResource listviewButtonStyle}"
                                    IsVisible="{Binding EnabledSigning, Source={x:Reference page}}" 
                                    Source="ic_action_no.png"
                                    VerticalOptions="FillAndExpand"
                                    HorizontalOptions="End">
                                    <Image.GestureRecognizers>
                                        <TapGestureRecognizer  Tapped="OnAbsent" />
                                    </Image.GestureRecognizers>
                                    <Image.Margin>
                                        <OnIdiom x:TypeArguments="Thickness">
                                            <OnIdiom.Phone>5, 0, 0, 0</OnIdiom.Phone>
                                            <OnIdiom.Tablet>20, 5, 5, 5</OnIdiom.Tablet>
                                        </OnIdiom>
                                    </Image.Margin>
                                </Image>
                            </StackLayout>
                        </StackLayout>

                    </StackLayout>
                </ViewCell.View>
            </ViewCell>

Answer 1

Try setting a listview caching strategy to improve performance.

See here for more details

Be aware though that you may need to jump through some hoops to use RecycleElement with FFImageLoading. The issue is described here

Also, please post your data template so we can see if it can be simplified.