Issue on Android with RecycleTemplate

[Pasquale Mirco]

Hello. I'm developing multiplatform application (sort of social app) and I have an issue on android devices.

As you can see from attached video, when i scroll, after 3 elements, no other elements are shown (in my items source there are 7 elements). And if I scroll to to top, a lot of elements disappear. This issue exists only in android; on iOS everything works perfectly.

I made a lot of tests and it seems that on android it works only if, for ListViewCachingStrategy, I put CreateNewTemplate and not RecycleTemplate. Of course, this choice (create and not recycle) has an important impact on performances.

This is my code:

XAML:

xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

x:Class="AfolAPP.Home.AfolHomePage"

xmlns:syncfusion="clr-namespace:Syncfusion.ListView.XForms;assembly=Syncfusion.SfListView.XForms"

xmlns:pulltoRefresh="clr-namespace:Syncfusion.SfPullToRefresh.XForms;assembly=Syncfusion.SfPullToRefresh.XForms"

xmlns:commonui="clr-namespace:AfolAPP.CommonUI"

xmlns:home="clr-namespace:AfolAPP.Home"

Shell.TitleColor="{AppThemeBinding Light=Black, Dark=White}"

Shell.ForegroundColor="{AppThemeBinding Light=Black, Dark=White}"

Shell.BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">

ColumnDefinitions="*, 50">

Text="Afol"

Style="{StaticResource LblStyleNav}"

VerticalTextAlignment="Center"

HorizontalOptions="Start"

Margin="20, 0, 0, 0"

TextColor="{AppThemeBinding Light=black, Dark=white}"

/>

x:Name="_listView"

ItemsSource="{Binding ItemsSource}"

AutoFitMode="DynamicHeight"

BackgroundColor="{AppThemeBinding Light=White, Dark=Black}"

SelectionMode="Single"

ItemAppearing="SfListView_ItemAppearing"

IsScrollBarVisible="False"

ListViewCachingStrategy="RecycleTemplate"

>

IsPersonal="False"

IDMOCSET="{Binding IDMOCSET}"

UserID="{Binding UserID}"

IsPinned="False"

IsNotificationEnable="False"

/>

HorizontalOptions="FillAndExpand"

HeightRequest="100">

HeightRequest="80"

BackgroundColor="{AppThemeBinding Light=White, Dark=Black}">

IsRunning="True"

WidthRequest="50"

HeightRequest="50"

HorizontalOptions="Center"

Color="{AppThemeBinding Light=Black, Dark=White}"

IsVisible="{Binding IsLoadingMorePosts}"

>

x:TypeArguments="x:Double"

iOS="0.7"

Android="0.5"

/>

MocsetUI XAML:

xmlns="http://xamarin.com/schemas/2014/forms"

xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"

xmlns:ffimageloading="clr-namespace:FFImageLoading.Forms;assembly=FFImageLoading.Forms"

x:Class="AfolAPP.CommonUI.MocsetUI"

xmlns:commonui="clr-namespace:AfolAPP.CommonUI"

xmlns:local="clr-namespace:AfolAPP.CommonUI"

xmlns:shareddata="clr-namespace:AfolAPP.Helpers"

BackgroundColor="{AppThemeBinding Light=white, Dark=black}">

BackgroundColor="{AppThemeBinding Light=white, Dark=black}"

HorizontalOptions="FillAndExpand"

VerticalOptions="FillAndExpand"

RowSpacing="0"

Margin="10, 10, 10, 0">

Grid.Row="0"

ColumnDefinitions="30, *, Auto, 20"

>

Source="{Binding UserImage}"

ImageSize="30"

Circle="True"

Grid.Column="0"

VerticalOptions="Center"

IsProfile="True"/>

x:Name="_lblUsername"

Text="{Binding UserName}"

Style="{StaticResource LblStyleBold}"

FontSize="13"

TextColor="{AppThemeBinding Light=black, Dark=white}"

Margin="0"

MaxLines="1"

VerticalTextAlignment="Center"

Grid.Column="1"

HeightRequest="50"/>

x:Name="_btnFollow"

Grid.Column="2"

Text="Segui"

FontSize="{OnPlatform Android=11, iOS=13}"

Clicked="Follow_Clicked"

HeightRequest="50"

WidthRequest="70"

VerticalOptions="Center"

TextColor="{AppThemeBinding Light=#777777, Dark=#9b9b9b}"

ActivityIndicatorColor="{AppThemeBinding Light=Black, Dark=White}"

IsVisible="{Binding BtnFollowVisible}"

/>

Source="{AppThemeBinding Light=menulight.png, Dark=menudark.png}"

Clicked="MenuBtnClicked"

Grid.Column="3"

BackgroundColor="Transparent"/>

x:Name="_carousel"

ItemsSource="{Binding ImageSources}"

Loop="False"

Grid.Row="1"

IndicatorView="indicatorView"

HorizontalScrollBarVisibility="Never"

Margin="-12, 0, -10, 0">

x:Name="_imageInCarousel"

Source="{Binding .}"

VerticalOptions="CenterAndExpand"

HeightRequest="{Binding Source={x:Static shareddata:Constant.ScreenWidth}}"

>

NumberOfTapsRequired="1"/>

NumberOfTapsRequired="2"/>

x:Name="indicatorView"

HideSingle="False"

Grid.Row="2"

IndicatorsShape="Circle"

IndicatorColor="LightGray"

SelectedIndicatorColor="DarkGray"

HorizontalOptions="Center"

Margin="0,10,0,0" />

Grid.Row="3"

Orientation="Horizontal"

Margin="0, 10, 0, 10">

Grid.Row="3"

ColumnDefinitions="Auto, Auto, Auto"

RowDefinitions="20"

Margin="0, 0, 0, 0"

ColumnSpacing="15"

BackgroundColor="Transparent"

VerticalOptions="Center"

HorizontalOptions="Start">

x:Name="_btnLike"

Grid.Column="0"

HeightRequest="25"

BackgroundColor="Transparent"

Clicked="LikedClicked"

Source="{Binding LikedImage, Mode=TwoWay}"

Margin="0, 0, 0, 0"

/>

x:Name="_btnComments"

Grid.Column="1"

HeightRequest="25"

BackgroundColor="Transparent"

Clicked="CommentsClicked"

Source="{AppThemeBinding Light=commentlight.png, Dark=commentdark.png}"

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

Grid.Column="2"

HeightRequest="25"

BackgroundColor="Transparent"

Clicked="ShareClicked"

TabIndex="{Binding IDMOCSET}"

Source="{AppThemeBinding Light=sharelight.png, Dark=sharedark.png}"/>

Grid.Column="3"

WidthRequest="1000"

Text="{Binding Date}"

Style="{StaticResource LblStyle}"

FontSize="13"

HorizontalTextAlignment="End"

VerticalTextAlignment="Center"

VerticalOptions="Center"

HorizontalOptions="End"

TextColor="{AppThemeBinding Light=#777777, Dark=#9b9b9b}"

/>

x:Name="lbl_Likes"

Text="{Binding LblLikes}"

Style="{StaticResource LblStyle}"

Grid.Row="4"

FontSize="12"

TextColor="{AppThemeBinding Light=#777777, Dark=#9b9b9b}"

VerticalTextAlignment="Center"/>

x:Name="lbl_Comments"

Text="{Binding LblComments}"

Style="{StaticResource LblStyle}"

Grid.Row="5"

FontSize="12"

TextColor="{AppThemeBinding Light=#777777, Dark=#9b9b9b}"

VerticalTextAlignment="Center"/>

Text="{Binding LblInfo}"

Style="{StaticResource LblStyleBold}"

Grid.Row="6"

FontSize="14"

TextColor="{AppThemeBinding Light=black, Dark=white}"

VerticalTextAlignment="Center"/>

Text="{Binding LblDescription}"

Style="{StaticResource LblStyle}"

Grid.Row="7"

TextColor="{AppThemeBinding Light=black, Dark=white}"

MaxLines="2"

FontSize="13"

VerticalTextAlignment="Center"

LineBreakMode="TailTruncation">

Text="{Binding LblSellAndBricks}"

Style="{StaticResource LblStyle}"

Grid.Row="8"

FontSize="12"

TextColor="{AppThemeBinding Light=#777777, Dark=#9b9b9b}"

VerticalTextAlignment="Center"

Margin="0, 10, 0, 0"

/>

Grid.Row="9"

FontSize="12"

FormattedText="{Binding LblTags}"

VerticalTextAlignment="Center"

Margin="0, 10, 0, 0"/>

Grid.Row="10"/>

In my cs file, i just download data from my web server and load my models that have these proprierties:

public int IDMOCSET { get; set; }

public string UserName { get; set; }

public int UserID { get; set; }

public ImageSource UserImage { get; set; }

public List ImageSources { get; set; }

public string LblSellAndBricks { get; set; }

public string LblInfo { get; set; }

public string LblDescription { get; set; }

public string LblLikes { get; set; }

public string LblComments { get; set; }

public FormattedString LblTags { get; set; }

public string Date { get; set; }

public bool PersonalMocset { get; set; }

public ImageSource LikedImage { get; set; }

public bool BtnFollowVisible { get; set; }

public bool Pinned { get; set; }

public bool NotificationEnable { get; set; }

Tested on Samsung A20S and Xiaomi Redmi 9AT

Using Xamarin.Forms 5.0.0.2291 and SfListView 20.4.0.38

Any idea how can I solve the issue?

Attachment: Screenrecorder2022122301000366.mp4_24a923e.zip

[yaarthe]

Yes you're rigjt about that, but at least the experience will be streamlined and well designed. The whole idea of owning an Android phone is to have a pretty customized experience. If Google is locking down features and removing functionality I may as well go with the experience that's been streamlined for 13 versions now

pikashow.ltd



routerlogin.ltd

[Pasquale Mirco]

Sorry but I don’t understand your answer

[Suthi Yuvaraj]

Hi Pasquale Mirco,

We have checked the reported query “Issue on Android with RecycleTemplate“, we have created a sample with provided code snippet , we are unable to reproduce the issue at our end. We have created a sample with Image inside the ItemTemplate and CarouselView , which is working fine at our end , we are in need of more details to proceed further. We have attached the sample for your reference

If possible could you please modify the sample to reproduce the issue  or share the below details which will be more helpful for us to find the appropriate solution as soon as possible.

1. Code snippet related to ItemTemplate and related customization
2. Code snippet related to SfListView and any other customization
3. Code snippet related to data population.
4. Platform related details

Regards,

Suthi Yuvaraj

Attachment: ListViewGroupHeader_ccaff7d3.zip

[Pasquale Mirco]

sorry for the late answer.

anyway it wasn't SfListView issue but Xamarin.forms issue, related to CarouselView bug (reference for other users: https://github.com/xamarin/Xamarin.Forms/issues/15231 )

[Shameem Akhter]

Vedu looks like a classic recycling bug in Android’s ListView. When RecycleElement is used, the template isn’t handling state properly and items vanish on reuse. Double-check your bindings and make sure all visuals are fully data-driven (no hidden state in the cell). If that doesn’t fix it, switch to CollectionView—it handles virtualization better on Android and avoids these caching glitches.

[Abinesh Palanisamy]

Hi Shameem,
 

Based on the information provided, we were unclear about the specific query mentioned. Could you please confirm whether the issue you’re facing is related to Xamarin SfListView?.

 

If yes, we kindly request you to share more detailed information about the issue. Specifically:

 

• The behavior you're observing.
• Any relevant code snippets or configurations.
• Steps to reproduce the issue.

 

These details will help us investigate further and provide a proper solution.

 

Regards,

Abinesh P

[Shameem Akhter]

This issue occurs due to a known bug in RecycleTemplate on Android when using complex or dynamic-height layouts in SfListView. Try updating Xamarin.Forms and Syncfusion SfListView to the latest versions. If the problem remains, set AutoFitMode="None" or use CreateNewTemplate on Android as a temporary fix.

[Muthukumar Madasamy]

Hi Shameem Akhter,

Thanks for your input.

Yes, the reported scenario appears to be typical recycling issue resemble a typical recycling issue on Android when using RecycleTemplate with complex layouts in SfListView. Normally, we suggest setting AutoFitMode="None" or using CreateNewTemplate on Android as a temporary fix.

However, since we don’t have full details of the issue or layout behavior, we can’t confirm this as the exact solution. Also, you mentioned apps like Sportzfy and Vedu could you clarify if SfListView is actually used in those apps? That would help us understand the context better.

Let us know if you can share more details or a sample.

Best regards,

Muthukumar M.