Draw custom shapes in Curved Bottom Navigation View

Curved Bottom Navigation View

In this Tutorial, we will learn How to draw custom shapes in Curved Bottom Navigation View.You can Downlod complete Source Code from Here

You can read nice Curved Bottom Navigation View Animation

You Can Learn more about Android Tutorial From Android tutorial Online website

By Using Custom Class CurvedBottomNavigationView we can Draw Curve in Buttom Navigaation View Below Java code is Example.

public class CurvedBottomNavigationView 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 CurvedBottomNavigationView(Context context) {
 super(context);
 init();
 }
public CurvedBottomNavigationView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init();
 }
public CurvedBottomNavigationView(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 & 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);
 }
}

For XML code is Below

<android.tutorial.curvedbottombar.CurvedBottomNavigationView
android:id=”@+id/customBottomBar”
android:layout_width=”match_parent”
android:layout_height=”62dp”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent” />