Xamarin forms shell navigation flickering - xamarin

Question

I have a xamarin.forms app in which I am using shell. The problem I am facing is when I navigate from shell bottom navigation to any inner page and navigate back to previous page there is a flicker occurring.Please refer the screen record https://drive.google.com/open?id=1861iNlcV7ao6oDUNu7nL4WiyFuWjwXx_.
My Shell Page
<Shell xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
mc:Ignorable="d"
Shell.NavBarIsVisible="False"
xmlns:local="clr-namespace:PaTS.Views"
x:Class="SampleApp.AppShell">
<TabBar>
<Tab Title="Dashboard" Icon="icon_dashboard.png" >
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
<Tab Title="Notifications" Icon="icon_notifications.png">
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
<Tab Title="Account" Icon="icon_user.png">
<ShellContent ContentTemplate="{DataTemplate local:Dashboard}" />
</Tab>
</TabBar>
</Shell>
Dashboard page
<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:d="http://xamarin.com/schemas/2014/forms/design"
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
xmlns:controls="clr-namespace:ImageCircle.Forms.Plugin.Abstractions;assembly=ImageCircle.Forms.Plugin"
xmlns:local="clr-namespace:sample.CustomRender"
mc:Ignorable="d"
BackgroundColor="#004d6f"
Title="Dashboard"
x:Class="sample.Views.Dashboard">
<ContentPage.Content>
<Grid>
<!--<Image Aspect="AspectFill" >
<Image.Source>
<OnIdiom x:TypeArguments="FileImageSource" Tablet="cover.jpg" Phone="loginbackground_phone.jpg" />
</Image.Source>
</Image>-->
<Grid >
<Grid.RowDefinitions >
<RowDefinition Height="0.9*"/>
<RowDefinition Height="30"/>
<RowDefinition Height="*"/>
</Grid.RowDefinitions>
<Grid Grid.Row="0" BackgroundColor="#004d6f">
<StackLayout BackgroundColor="Transparent" IsClippedToBounds="True" HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" >
<StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" >
<Grid HorizontalOptions="Start" VerticalOptions="Center">
<controls:CircleImage
BorderColor="LightBlue"
BorderThickness="2"
Source="sampleuser.png"
Aspect="AspectFill">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="20,30,15,0" />
<On Platform="Android" Value="20,15,15,0" />
</OnPlatform>
</Image.Margin>
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
</Image.HeightRequest>
</controls:CircleImage>
<controls:CircleImage
x:Name="UserImage"
BorderColor="LightBlue"
BorderThickness="2"
Source="sampleuser.png"
Aspect="AspectFill">
<Image.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="20,30,15,0" />
<On Platform="Android" Value="20,15,15,0" />
</OnPlatform>
</Image.Margin>
<Image.HeightRequest>
<OnIdiom x:TypeArguments="x:Double" Tablet="60" Phone="30" />
</Image.HeightRequest>
</controls:CircleImage>
</Grid>
<Label Text="Welcome" HorizontalOptions="Start" VerticalOptions="Center" MaxLines="1" TextColor="White">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
</Label.FontSize>
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,30,0,0" />
<On Platform="Android" Value="0,15,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
<Label x:Name="UserName" MaxLines="1" Text="User" HorizontalOptions="Start" VerticalOptions="Center" TextColor="LightBlue">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
<Label.FontSize>
<OnIdiom x:TypeArguments="x:Double" Tablet="14" Phone="11" />
</Label.FontSize>
<Label.Margin>
<OnPlatform x:TypeArguments="Thickness">
<On Platform="iOS" Value="0,30,0,0" />
<On Platform="Android" Value="0,15,0,0" />
</OnPlatform>
</Label.Margin>
</Label>
</StackLayout>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="150"/>
<RowDefinition Height="50"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Grid.Row="0" Source="icon_xamarin_logo.png" HorizontalOptions="CenterAndExpand" Margin="0,25,0,0">
</Image>
<Label Grid.Row="1" Text="Sample App" TextColor="White" FontSize="30" Margin="10,5,10,5" HorizontalTextAlignment="Center" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
<Label Grid.Row="2" Text="Sample app details™" TextColor="Snow" FontSize="Medium" Margin="10,5,10,10" HorizontalTextAlignment="Center" >
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Regular" />
<On Platform="Android" Value="Montserrat-Regular.ttf#Montserrat-Regular" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</StackLayout>
</Grid>
<Image Grid.Row="1" HorizontalOptions="FillAndExpand" Aspect="AspectFill" Source="CurvedMask.jpg" Margin="-6,0,-6,-6"></Image>
<StackLayout Grid.Row="2" BackgroundColor="White">
<Frame HorizontalOptions="FillAndExpand" VerticalOptions="FillAndExpand" BackgroundColor="Transparent" Margin="15">
<Grid >
<Grid.RowDefinitions>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Frame Grid.Row="0" Grid.Column="0" CornerRadius="6">
<Frame.GestureRecognizers>
<TapGestureRecognizer
Tapped="Timesheet_Tapped"
NumberOfTapsRequired="1" />
</Frame.GestureRecognizers>
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_timesheet.png" Grid.Row="0"></Image>
<Label Text="Timesheets" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="0" Grid.Column="2" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_employee.png" Grid.Row="0"></Image>
<Label Text="Employees" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="0" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_graph.png" Grid.Row="0"></Image>
<Label Text="Analysis" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
<Frame Grid.Row="1" Grid.Column="2" CornerRadius="6">
<Grid>
<Grid.RowDefinitions>
<RowDefinition Height="40"/>
<RowDefinition Height="Auto"/>
</Grid.RowDefinitions>
<Image Source="icon_info.png" Grid.Row="0"></Image>
<Label Text="Info" Grid.Row="1" HorizontalTextAlignment="Center" TextColor="Gray">
<Label.FontFamily>
<OnPlatform x:TypeArguments="x:String">
<On Platform="iOS" Value="Montserrat-Bold" />
<On Platform="Android" Value="Montserrat-Bold.ttf#Montserrat-Bold" />
</OnPlatform>
</Label.FontFamily>
</Label>
</Grid>
</Frame>
</Grid>
</Frame>
</StackLayout>
</Grid>
</Grid>
</ContentPage.Content>
</ContentPage>
Page navigation
[XamlCompilation(XamlCompilationOptions.Compile)]
public partial class Dashboard : ContentPage
{
public Dashboard()
{
InitializeComponent();
}
private async void Timesheet_Tapped(object sender, EventArgs e)
{
await Navigation.PushAsync(new TimesheetList(),true);
}
}
When I navigate to TimesheetList and press back button, It will slide back to dashboard with little flicker. How to resolve this? Any help is appreciated.

Answer 1

I test the code you provided. In the Dashboard page, there is no code you used to for Timesheet_Tapped event.
Try the code below, it works well on my side.
<Image Source="icon_timesheet.png" Grid.Row="0" >
<Image.GestureRecognizers>
<TapGestureRecognizer Tapped="Timesheet_Tapped"></TapGestureRecognizer>
</Image.GestureRecognizers>
</Image>

Answer 2

I have the same issue, but in the android emulator Android 9.0 fickering not happend, in my case only Samsung s8, s8+, s9, s9+, s10, s10+ devices.
In this bug report:
https://github.com/xamarin/Xamarin.Forms/issues/8581
That guy finds a workaround, delete animation:
protected override bool OnBackButtonPressed() {
Current.Navigation.PopAsync(false);
return true;
}