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 )