Xamarin Form Frame outline color display issue in android

This is the quick glance on the issue i have faced during the use of Frame control in Xamarin form project and sharing here hoping that may helpful to somebody with the same issue.

Using Xamarin form Frame controls shows some strange behaviour in android platform where as it shows elegant look in iOS.
We can notice this difference in below screenshot.[Nexus S (KitKat) and Simulator iPhone6 iOS9.3]

     

This is also reported bug in xamarin bugzilla [https://bugzilla.xamarin.com/show_bug.cgi?id=27460 ]

To solve this frame border issue in android we can think of using two approaches. 

1)Having the custom renderer class with overriding method Draw and private method DrawOutline.
By adding below custom renderer class we can change the frame border corner radius, border color and border stroke.

	using Android.Graphics;
	using Xamarin.Forms;
	using Xamarin.Forms.Platform.Android;
	using ACanvas = Android.Graphics.Canvas;
	using Color = Android.Graphics.Color;
	[assembly: ExportRenderer(typeof(Frame), typeof(FrameBugPoc.Droid.FrameRenderer))]
	namespace FrameBugPoc.Droid
	{
	public class FrameRenderer : Xamarin.Forms.Platform.Android.FrameRenderer
	{
	public override void Draw(ACanvas canvas)
	{
	base.Draw(canvas);
	DrawOutline(canvas, canvas.Width, canvas.Height, 4f);//set corner radius
	}
	void DrawOutline(ACanvas canvas, int width, int height, float cornerRadius)
	{
	using (var paint = new Paint { AntiAlias = true })
	using (var path = new Path())
	using (Path.Direction direction = Path.Direction.Cw)
	using (Paint.Style style = Paint.Style.Stroke)
	using (var rect = new RectF(0, 0, width, height))
	{
	float rx = Forms.Context.ToPixels(cornerRadius);
	float ry = Forms.Context.ToPixels(cornerRadius);
	path.AddRoundRect(rect, rx, ry, direction);
	paint.StrokeWidth = 2f; //set outline stroke
	paint.SetStyle(style);
	paint.Color = Color.ParseColor("#A7AE22");//set outline color //_frame.OutlineColor.ToAndroid();
	canvas.DrawPath(path, paint);
	}
	}
	}
	}

view raw FrameRenderer.cs hosted with ❤ by GitHub

2)Update the Frame background with rounded corner selector xml by providing stroke, corner radius and color.

	using System;
	using Xamarin.Forms;
	using Xamarin.Forms.Platform.Android;
	using System.ComponentModel;
	using Android.Graphics;
	using Android.Graphics.Drawables;
	using AButton = Android.Widget.Button;
	using ACanvas = Android.Graphics.Canvas;
	using GlobalResource = Android.Resource;
	[assembly: ExportRenderer(typeof(RoundCornerFrame), typeof(RoundedCornerFrameRenderer))]
	namespace FrameBugPoc.Droid
	{
	public class RoundedCornerFrameRenderer : FrameRenderer
	{
	protected override void OnElementChanged(ElementChangedEventArgs<Frame> e)
	{
	base.OnElementChanged(e);
	if (e.NewElement != null && e.OldElement == null)
	{
	this.SetBackgroundResource(Resource.Drawable.rounded_corner_background);
	GradientDrawable drawable = (GradientDrawable)this.Background;
	drawable.SetColor(Android.Graphics.Color.ParseColor("#F0F0F0"));
	}
	}
	}
	}

view raw RoundedCornerFrameRenderer.cs hosted with ❤ by GitHub

	<?xml version="1.0" encoding="UTF-8" ?>
	<shape xmlns:android="http://schemas.android.com/apk/res/android"
	android:shape="rectangle">
	<stroke android:width="1dp"
	android:color="#252525"/>
	<corners android:radius="5dp" />
	<solid android:color="#FFFFFF" />
	</shape>

view raw rounded_corner_background.xml hosted with ❤ by GitHub

After adding above Frame renderer:

Reference: https://github.com/xamarin/Xamarin.Forms/blob/master/Xamarin.Forms.Platform.Android/Renderers/FrameRenderer.cs  
Explore complete code base @ https://github.com/suchithm/FrameBugPoc Keep visiting for more exciting stuffs on mobile application development. Happy coding :)