How to align FAB at start/left in the BottomAppBar

Question

I want to use FloatingActionButton in the left like this

In the BottomAppBar we use fabAlignmentMode to align FloatingActionButton. The modes are center and end. But I need start.

I found a article How I drew custom shapes in bottom bar. Here Bézier curve is used to create curve.

I tried to align FloatingActionButton to left.

public class CurvedBottomNavigationView extends BottomNavigationView {

    //Declare variable
    private Path mPath;
    private Paint mPaint;

    // The radius of fab button
    public final int CURVE_CIRCLE_RADIUS = 90;

    // The coordinates of the first curve
    public Point mFirstCurveStartPoint = new Point();
    public Point mFirstCurveEndPoint = new Point();
    public Point mFirstCurveControlPoint1 = new Point();
    public Point mFirstCurveControlPoint2 = new Point();

    //The coordinates of the second curve
    public Point mSecondCurveStartPoint = new Point();
    public Point mSecondCurveEndPoint = new Point();
    public Point mSecondCurveControlPoint1 = new Point();
    public Point mSecondCurveControlPoint2 = new Point();

    public int mNavigationBarWidth,mNavigationBarHeight;


    public CurvedBottomNavigationView(Context context) {
        super(context);
        initView();
    }

    public CurvedBottomNavigationView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView();
    }

    public CurvedBottomNavigationView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initView();
    }

    private void initView() {
        mPath = new Path();
        mPaint = new Paint();
        mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mPaint.setColor(Color.WHITE);
        setBackgroundColor(Color.TRANSPARENT);


    }

    @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
        mNavigationBarWidth = getWidth();
        mNavigationBarHeight = getHeight();

        // the coordinates(x,y) of the start point before curve
        mFirstCurveStartPoint.set((mNavigationBarWidth/9)
                -(CURVE_CIRCLE_RADIUS*2)
                -(CURVE_CIRCLE_RADIUS/3),0);

        // the coordinates (x,y) of the end point after curve
        mFirstCurveEndPoint.set((mNavigationBarWidth/9),CURVE_CIRCLE_RADIUS+(CURVE_CIRCLE_RADIUS/4));

        //same for second curve
        mSecondCurveStartPoint = mFirstCurveEndPoint;

        mSecondCurveEndPoint.set((mNavigationBarWidth/9)+(CURVE_CIRCLE_RADIUS*2)+(CURVE_CIRCLE_RADIUS/3)
                ,0);

        // The coordinates (x,y_ of the first control point on cubic curve
        mFirstCurveControlPoint1.set(mFirstCurveStartPoint.x + (CURVE_CIRCLE_RADIUS)+(CURVE_CIRCLE_RADIUS/4),
                mFirstCurveStartPoint.y);
        // // The coordinates (x,y_ of the second control point on 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);

    }
}

But the output is not as good as when we use BottomAppBar to align FloatingActionButton.

Is there any other way to add fabAlignmentMode to start ??

Answer 1

In other to align FAB to start of the BottomAppbar. here is what you do

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layoutDirection="rtl"
    tools:context=".MainActivity">


    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/appBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="end" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fabHome"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/ic_home"
        app:layout_anchor="@id/appBar" />


</androidx.coordinatorlayout.widget.CoordinatorLayout>

Then select the AppBar in the Design Mode and set the layoutDirection to rtl