title: How to invert Curved Bottom Navigation?
body: <p>I found a library <a href="https://github.com/androidtutorialonline/CurvedBottomNavigationView" rel="nofollow noreferrer">https://github.com/androidtutorialonline/CurvedBottomNavigationView</a> which draws a curve with canvas.
  I would like to invert the curve so that the curve is not going from top.
  The curve should go from the bottom to the top. But i dont really now how to invert this. Im trying it since 2 hours, i dont know how to draw the cubic.</p>
  
  <p>It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/gI5zR.jpg" alt="enter image description here"></p>
  
  <p>But I want that it looks like this,
  it should only change the curve like in this picture.
  And not rotate the whole thing like I have done to make it clear for you.
  Only the curve should be drawn like in this screenshot:</p>
  
  <p><img src="https://i.stack.imgur.com/jsKEz.jpg" alt="enter image description here"></p>
  
  <p>There is the Code</p>
  
  <pre><code>import android.content.Context;
  import android.graphics.Canvas;
  import android.graphics.Color;
  import android.graphics.Paint;
  import android.graphics.Path;
  import android.graphics.Point;
  import android.util.AttributeSet;
  
  public class Test extends BottomNavigationView {
      private Path mPath;
      private Paint mPaint;
  
  
      /** the CURVE_CIRCLE_RADIUS represent the radius of the fab button */
      public final int CURVE_CIRCLE_RADIUS = 256 / 3;
      // the coordinates of the first curve
      public Point mFirstCurveStartPoint = new Point();
      public Point mFirstCurveEndPoint = new Point();
      public Point mFirstCurveControlPoint2 = new Point();
      public Point mFirstCurveControlPoint1 = new Point();
  
      //the coordinates of the second curve
      @SuppressWarnings("FieldCanBeLocal")
      public Point mSecondCurveStartPoint = new Point();
      public Point mSecondCurveEndPoint = new Point();
      public Point mSecondCurveControlPoint1 = new Point();
      public Point mSecondCurveControlPoint2 = new Point();
      public int mNavigationBarWidth;
      public int mNavigationBarHeight;
  
      public Test(Context context) {
          super(context);
          init();
      }
  
      public Test(Context context, AttributeSet attrs) {
          super(context, attrs);
          init();
      }
  
      public Test(Context context, AttributeSet attrs, int defStyleAttr) {
          super(context, attrs, defStyleAttr);
          init();
      }
  
      private void init() {
          mPath = new Path();
          mPaint = new Paint();
          mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
          mPaint.setColor(Color.WHITE);
          setBackgroundColor(Color.TRANSPARENT);
      }
  
      @Override
      protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
          super.onLayout(changed, left, top, right, bottom);
  
      }
  
      @Override
      protected void onSizeChanged(int w, int h, int oldw, int oldh) {
          super.onSizeChanged(w, h, oldw, oldh);
          // get width and height of navigation bar
          // Navigation bar bounds (width &amp; height)
           mNavigationBarWidth = getWidth();
           mNavigationBarHeight = getHeight();
          // 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);
      }
  
      @Override
      protected void onDraw(Canvas canvas) {
          super.onDraw(canvas);
          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();
  
          canvas.drawPath(mPath, mPaint);
      }
  }
  </code></pre>