I'm trying to create curved bottom navigation bar in xamarin forms tabbed page and I'm copying the code of this website (Can't put the link don't know why) into my TabbedPageRenderer. The problem is that I'm not getting any result. Can anyone test this please?
Code.
public partial class TabbedPages : TabbedPage
{
public TabbedPages ()
{
InitializeComponent();
this.Children.Add(new Page()
{
Title = "Home",
Icon = "homepage_icon"
});
this.Children.Add(new Page()
{
Title = "Home",
Icon = "homepage_icon"
});
this.Children.Add(new Page()
{
Title = "Home",
Icon = "homepage_icon"
});
this.Children.Add(new Page()
{
Title = "Home",
Icon = "homepage_icon"
});
}
Renderer.
[assembly: ExportRenderer(typeof(TabbedPages), typeof(BottomNavTabPageRenderer))]
namespace App.Droid.CustomRenderer
{
public class BottomNavTabPageRenderer : TabbedPageRenderer
{
private bool _isShiftModeSet;
private Path mPath;
private Paint mPaint;
private int CURVE_CIRCLE_RADIUS = 90;
// the coordinates of the first curve
private Android.Graphics.Point mFirstCurveStartPoint = new Android.Graphics.Point();
private Android.Graphics.Point mFirstCurveEndPoint = new Android.Graphics.Point();
private Android.Graphics.Point mFirstCurveControlPoint1 = new Android.Graphics.Point();
private Android.Graphics.Point mFirstCurveControlPoint2 = new Android.Graphics.Point();
//the coordinates of the second curve
private Android.Graphics.Point mSecondCurveStartPoint = new Android.Graphics.Point();
private Android.Graphics.Point mSecondCurveEndPoint = new Android.Graphics.Point();
private Android.Graphics.Point mSecondCurveControlPoint1 = new Android.Graphics.Point();
private Android.Graphics.Point mSecondCurveControlPoint2 = new Android.Graphics.Point();
private int mNavigationBarWidth;
private int mNavigationBarHeight;
public BottomNavTabPageRenderer(Context context)
: base(context)
{
init();
}
private void init()
{
mPath = new Path();
mPaint = new Paint();
mPaint.SetStyle(Paint.Style.FillAndStroke);
mPaint.Color = Android.Graphics.Color.White;
SetBackgroundColor(Android.Graphics.Color.Transparent);
}
protected override void OnSizeChanged(int w, int h, int oldw, int oldh)
{
base.OnSizeChanged(w, h, oldw, oldh);
BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);
mNavigationBarWidth = bottomNavigationMenuView.Width; // Width I'm getting is 720
mNavigationBarHeight = bottomNavigationMenuView.Height; // Height I'm getting is 112
// the coordinates (x,y) of the start point before curve
mFirstCurveStartPoint.Set((mNavigationBarWidth / 2) - (CURVE_CIRCLE_RADIUS * 2) - (CURVE_CIRCLE_RADIUS / 3), 0);
// the coordinates (x,y) of the end point after curve
mFirstCurveEndPoint.Set(mNavigationBarWidth / 2, CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4));
// same thing for the second curve
mSecondCurveStartPoint = mFirstCurveEndPoint;
mSecondCurveEndPoint.Set((mNavigationBarWidth / 2) + (CURVE_CIRCLE_RADIUS * 2) + (CURVE_CIRCLE_RADIUS / 3), 0);
// the coordinates (x,y) of the 1st control point on a cubic curve
mFirstCurveControlPoint1.Set(mFirstCurveStartPoint.X + CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4), mFirstCurveStartPoint.Y);
// the coordinates (x,y) of the 2nd control point on a cubic curve
mFirstCurveControlPoint2.Set(mFirstCurveEndPoint.X - (CURVE_CIRCLE_RADIUS * 2) + CURVE_CIRCLE_RADIUS, mFirstCurveEndPoint.Y);
mSecondCurveControlPoint1.Set(mSecondCurveStartPoint.X + (CURVE_CIRCLE_RADIUS * 2) - CURVE_CIRCLE_RADIUS, mSecondCurveStartPoint.Y);
mSecondCurveControlPoint2.Set(mSecondCurveEndPoint.X - (CURVE_CIRCLE_RADIUS + (CURVE_CIRCLE_RADIUS / 4)), mSecondCurveEndPoint.Y);
mPath.Reset();
mPath.MoveTo(0, 0);
mPath.LineTo(mFirstCurveStartPoint.X, mFirstCurveStartPoint.Y);
mPath.CubicTo(mFirstCurveControlPoint1.X, mFirstCurveControlPoint1.Y,
mFirstCurveControlPoint2.X, mFirstCurveControlPoint2.Y,
mFirstCurveEndPoint.X, mFirstCurveEndPoint.Y);
mPath.CubicTo(mSecondCurveControlPoint1.X, mSecondCurveControlPoint1.Y,
mSecondCurveControlPoint2.X, mSecondCurveControlPoint2.Y,
mSecondCurveEndPoint.X, mSecondCurveEndPoint.Y);
mPath.LineTo(mNavigationBarWidth, 0);
mPath.LineTo(mNavigationBarWidth, mNavigationBarHeight);
mPath.LineTo(0, mNavigationBarHeight);
mPath.Close();
}
protected override void OnDraw(Canvas canvas)
{
base.OnDraw(canvas);
canvas.DrawPath(mPath, mPaint);
}
private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
{
if (viewGroup == null || viewGroup.ChildCount == 0) return null;
for (var i = 0; i < viewGroup.ChildCount; i++)
{
var child = viewGroup.GetChildAt(i);
var typedChild = child as T;
if (typedChild != null) return typedChild;
if (!(child is ViewGroup)) continue;
var result = FindChildOfType<T>(child as ViewGroup);
if (result != null) return result;
}
return null;
}
}}
Any help would be appreciated!