How to add gradient to a border line below the header of a page in Xamarin Forms?

Question

How can i add gradient to a border line below the header of a page in Xamarin Forms?

An example of what i want to achieve is here.

Answer 1

How can i add gradient to a border line below the header of a page in Xamarin Forms?

I create custom render to create gradient border.

Firstly, you need to define render:

public class GradientViewRender : View
{
    public static readonly BindableProperty GradientColorsProperty = BindableProperty.Create<GradientViewRender, Color[]>(p => p.GradientColors, new Color[]{Color.White} );

    public Color[] GradientColors
    {
        get { return (Color[])base.GetValue(GradientColorsProperty); }
        set { base.SetValue(GradientColorsProperty, value); }
    }

    
    public static readonly BindableProperty ViewHeightProperty = BindableProperty.Create<GradientViewRender, double>(p => p.ViewHeight, 0);

    public double ViewHeight
    {
        get { return (double)base.GetValue(ViewHeightProperty); }
        set { base.SetValue(ViewHeightProperty, value); }
    }


    
    public static readonly BindableProperty LeftToRightProperty = BindableProperty.Create<GradientViewRender, bool>(p => p.LeftToRight, true);

    public bool LeftToRight
    {
        get { return (bool)base.GetValue(LeftToRightProperty); }
        set { base.SetValue(LeftToRightProperty, value); }
    }
}

This render takes in an array of Colors, this way you can supply as many colors as needed for your gradient.

Then you can implement this render in android .

public class GradientViewRenderer : Xamarin.Forms.Platform.Android.ViewRenderer<GradientTest.GradientViewRender, View>
{
    LinearLayout layout;
    Xamarin.Forms.Color[] gradientColors;
   
    double viewHeight;
    

    protected override void OnElementChanged(ElementChangedEventArgs<GradientTest.GradientViewRender> e)
    {
        base.OnElementChanged(e);

        if (Control == null)
        {
            layout = new LinearLayout(Application.Context);
            layout.SetBackgroundColor(Color.White);
        
            gradientColors = (Xamarin.Forms.Color[])e.NewElement.GradientColors;
            
            viewHeight = (double)e.NewElement.ViewHeight;
            

            CreateLayout();
        }

        if (e.OldElement != null)
        {
            // Unsubscribe from event handlers and cleanup any resources
        }

        if (e.NewElement != null)
        {
            // Configure the control and subscribe to event handlers
            gradientColors = (Xamarin.Forms.Color[])e.NewElement.GradientColors;
            
            viewHeight = (double)e.NewElement.ViewHeight;
            

            CreateLayout();
        }
    }

    protected override void OnElementPropertyChanged(object sender, System.ComponentModel.PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);

        if (e.PropertyName == GradientViewRender.ViewHeightProperty.PropertyName)
        {
            this.viewHeight = (double)this.Element.ViewHeight;
            CreateLayout();
        }
        
        else if (e.PropertyName == GradientViewRender.GradientColorsProperty.PropertyName)
        {
            this.gradientColors = (Xamarin.Forms.Color[])this.Element.GradientColors;
            CreateLayout();
        }
        
        
    }

    private void CreateLayout()
    {
        layout.SetMinimumWidth((int)viewWidth);
        layout.SetMinimumHeight((int)viewHeight);

        CreateGradient();

        SetNativeControl(layout);
    }

    public void CreateGradient()
    {
        //Need to convert the colors to Android Color objects
        int[] androidColors = new int[gradientColors.Count()];

        for (int i = 0; i < gradientColors.Count(); i++)
        {
            Xamarin.Forms.Color temp = gradientColors[i];
            androidColors[i] = temp.ToAndroid();
        }

        GradientDrawable gradient = new GradientDrawable(GradientDrawable.Orientation.LeftRight, androidColors);

        if (roundCorners)
            gradient.SetCornerRadii(new float[] { cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius, cornerRadius });

        layout.SetBackground(gradient);
    }
}

About more detailed info, you can take a look:

https://baglabs.com/2017/07/14/creating-gradients-xamarin-forms/

You can get samle from:

https://github.com/baileysh9/xamarin_forms_gradient

Finally, you can get this gradient border like this:

You can change different color by GradientColors.