Quantcast
Channel: Xamarin.Forms — Xamarin Community Forums
Viewing all articles
Browse latest Browse all 89864

Curved bottom navigation bar in xamarin forms

$
0
0

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!


Viewing all articles
Browse latest Browse all 89864

Trending Articles