Could not implement NavigationPageRenderer Custom renderer xamarin form - xamarin.forms

Question

I have google a lot about building CustomRenderer to display custom navigationpage on xamarin form (to display gradient on navigationbar) but did not succeed.
here is my code:
using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
namespace BillerApp
{
public class GradientNavigationBar: NavigationPage
{
public GradientNavigationBar(Page page): base(page)
{
}
public GradientNavigationBar() : base()
{
}
public static readonly BindableProperty StartColorProperty = BindableProperty.Create(
nameof(StartColor),
typeof(Color),
typeof(GradientNavigationBar),
Color.Default);
public static readonly BindableProperty EndColorProperty = BindableProperty.Create(
nameof(EndColor),
typeof(Color),
typeof(GradientNavigationBar),
Color.Default);
public Color StartColor {
get { return (Color)GetValue(StartColorProperty); }
set { SetValue(StartColorProperty, value); }
}
public Color EndColor
{
get { return (Color)GetValue(EndColorProperty); }
set { SetValue(EndColorProperty, value); }
}
}
}
and following is the renderer on Xamarin.Droid
using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Xamarin.Forms;
using BillerApp;
using Xamarin.Forms.Platform.Android;
using Android.Graphics.Drawables;
using BillerApp.Droid;
using System.ComponentModel;
[assembly: ExportRenderer(typeof(GradientNavigationBar), typeof(GrandientNavigationBarRenderer))]
namespace BillerApp.Droid
{
[Activity(Name = "com.companyname.BillerApp.MainActivity")]
public class GrandientNavigationBarRenderer: Xamarin.Forms.Platform.Android.AppCompat.NavigationPageRenderer
{
//public GrandientNavigationBarRenderer(Context context): base(context){} //can not use this constructor
protected override void OnElementChanged(ElementChangedEventArgs<NavigationPage> e)
{
base.OnElementChanged(e); // I got Invalid Cast Exception if Inherit from NavigationRenderer
if (e.OldElement != null || Element == null)
{
return;
}
var p = this.Element as GradientNavigationBar;
var context = (Activity)this.Context;
var sc = new int[] { p.StartColor.ToAndroid(), p.EndColor.ToAndroid() };
var grad = new GradientDrawable(GradientDrawable.Orientation.TopBottom, sc);
var t = context.ActionBar; // here i got null
t.SetSplitBackgroundDrawable(grad);
context.ActionBar.SetBackgroundDrawable(grad);
}
}
}
this is what i am trying to achieve:
I am using VS 2015 Community edition and have updated SDK tools to date

Answer 1

I would do it simply by adding something like this to your layout folder:
toolbar_gradient.xml
<gradient
android:type="linear"
android:startColor="#F3A183"
android:endColor="#EC6F66"
android:angle="270"/>
</shape>
Then in your Toolbar.xml add this line of code:
android:background="#layout/toolbar_gradient"