Custom Page Transitions in Xamarin Forms when using ContentPage - xamarin

Question

I am creating a xamarin forms app and i want to change the transition when navigating between pages. I couldnt use https://components.xamarin.com/view/customnavpage because im using ContentPage. I also read the famous thread on xamarin forums but nothing worked for me. here is the link.
https://forums.xamarin.com/discussion/18818/custom-page-transitions-with-xamarin-forms
i'm using xamarin forms 2.3.4.247 and android api level 25 and appCompat 23.3.0.
any idea?

Answer 1

I found a workaround and I answer my own question maybe it helps someone else.
First we need to create a custom renderer for any platform(in this case android)
. create a new class under your Renderers folder in Droid target.
CustomTransitionsRenderer.cs
[assembly:ExportRenderer(typeof(NavigationPage),typeof(CustomTransitionsRenderer))]
namespace TesarSmartwatchForms.Droid.Renderers
{
public class CustomTransitionsRenderer : Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
{
//SwitchContentAsync
protected override void SetupPageTransition(Android.Support.V4.App.FragmentTransaction transaction, bool isPush)
{
if (isPush)
transaction.SetCustomAnimations(Resource.Animator.move_in_left, 0);
else //prevView enter:
transaction.SetCustomAnimations(Resource.Animator.side_in_right, 0);
}
}
}
and then add your custom animations under Droid>Resources>animator like these:
move_in_left.xml
<?xml version="1.0" encoding="UTF-8" ?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/accelerate_interpolator">
<translate
android:fromXDelta="-100%p"
android:toXDelta="0"
android:duration="300"/>
</set>
and slide_in_right.xml
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
android:interpolator="#android:anim/linear_interpolator">
<translate
android:fromXDelta="100%p"
android:toXDelta="0"
android:duration="300" />
</set>
then we need to modify our android theme just adding this line
<item name="android:windowBackground">#android:color/transparent</item>
and remember to navigate between pages with the default navigation transition, just like this
Navigation.PushAsync(page);