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>

The data wasn't that much 9 rows of data but the view cell need to show profile and small icons. The small icons only 24dp — LittleFunny, Aug 14 '17 at 07:22
yes ... I have no problem with scrolling the list view after recycle element property set. Just when I load first load the page that was slow to show up. — LittleFunny, Aug 14 '17 at 21:43

score 3 · Accepted Answer · answered Aug 14 '17 at 07:23

3

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.

answered Aug 14 '17 at 07:23

Steve Chadbourne

6,873
3
54
82

Yes I have use this RecycleElement, when I realised the scrolling got too slow.. But this doesn't help me from navigation to the page contain the listview. – LittleFunny Aug 14 '17 at 08:23
Just put a single TapGestureRecogniser on the top level stack layout, rather than several inside the cell. Also you can try binding SelectedItem on the listview rather than using a gesture recogniser. – Steve Chadbourne Aug 14 '17 at 23:07
The layout in your data template is very complex and uses a load of stack layouts. You should be able to simplify it massively by using a grid with 5 columns. The labels in the second column can stay in a stack layout. – Steve Chadbourne Aug 14 '17 at 23:25
The icon you see in the image. Can it be grid as well. Currently using stacklayout as well... how much faster when using grid? – LittleFunny Aug 14 '17 at 23:49
If you look at the performance article, it recommends to use a grid over nested stack layouts https://developer.xamarin.com/guides/xamarin-forms/deployment-testing/performance/ – Steve Chadbourne Aug 15 '17 at 00:04
You could create a grid with 3 rows and use rowspan=3 on all columns other than the one with the icons. Or use a stack layout in the column with the icons. Test each for performance – Steve Chadbourne Aug 15 '17 at 00:06
Thank for your help. I will have to change the layout of those cells. – LittleFunny Aug 15 '17 at 02:31
I changed to grid but the loading time on that page doesn't seem to have any much different. – LittleFunny Aug 15 '17 at 05:31

score 0 · Answer 2 · answered Aug 14 '17 at 07:34

0

Use RecyclerView

https://blog.xamarin.com/recyclerview-highly-optimized-collections-for-android-apps/

OR

Use FFImageLoading

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

to optimize and for smoother scroll

answered Aug 14 '17 at 07:34

Jay Patel

528
8
26

ContentPage containing list view display very slow on Android

2 Answers2