Xamarin Forms Android - Keep popped page visible while it transitions off the screen

136 Views Asked by At

I'm trying to add native feeling animations to my xamarin forms app to add a professional finish.

I've overridden the navigation page renderer to implement my own animations on transitions with the following code...

[assembly: ExportRenderer(typeof(NavigationPage), typeof(NavigationPageCustomRenderer))]
namespace App1.Droid
{
    public class NavigationPageCustomRenderer : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
    {
        public NavigationPageCustomRenderer(Context context) : base(context)
        {

        }

        protected override void SetupPageTransition(FragmentTransaction transaction, bool isPush)
        {
            if (isPush)
                transaction.SetCustomAnimations(Resource.Animation.enter_from_right, Resource.Animation.exit_to_left);
            else
            {
                transaction.SetCustomAnimations(Resource.Animation.enter_from_left, Resource.Animation.exit_to_right);
            }
        }
    }
}

My issue is that when I pop a page using Navigation.PopAsync(), the popped page is hidden before it has a chance to animate. This means the entering page is flying into an empty view rather than emerging from behind the current page.

Has anyone got a workaround for this?

Animations are below...

enter_from_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
    android:fromXDelta="-10%" android:toXDelta="0%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="300" />
</set>

enter_from_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:propertyName="enter_from_left"
     android:shareInterpolator="false">
  <translate
    android:fromXDelta="100%" android:toXDelta="0%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="300"/>
</set>

exit_to_left.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
    android:fromXDelta="0%" android:toXDelta="-5%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="300" />
</set>

exit_to_right.xml

<?xml version="1.0" encoding="utf-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:shareInterpolator="false">
  <translate
    android:fromXDelta="0%" android:toXDelta="100%"
    android:fromYDelta="0%" android:toYDelta="0%"
    android:duration="300"/>
</set>
1

There are 1 best solutions below

2
Supun Liyanaarachchi On

Try this code after button click.

Device.BeginInvokeOnMainThread(async () =>
 {
 Navigation.PopAsync()
 }