androidbottomnavigationviewcustom-viewandroid-bottomnavandroid-bottomappbar

Android : Add rounded corners to BottomAppBar with circular anchored FAB

I want to achieve something similar to this view, bottom navigation with top left and right rounded corner radius and a and anchored FAB enter image description here

Solution

  • You can use a standard BottomAppBar:

       <com.google.android.material.bottomappbar.BottomAppBar
        android:layout_margin="xxdp"
        app:fabAlignmentMode="center"
        app:fabCradleRoundedCornerRadius="2dp"
        app:fabCradleVerticalOffset="8dp"
        app:fabCradleMargin="8dp" />

    and then change the ShapeAppearanceModel:

        BottomAppBar bottomAppBar = findViewById(R.id.bottomAppBar);
    MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
    bottomBarBackground.setShapeAppearanceModel(
            bottomBarBackground.getShapeAppearanceModel()
                    .toBuilder()
                    .setAllCorners(new RoundedCornerTreatment()).setAllCornerSizes(new RelativeCornerSize(0.5f))
                    .build());

    enter image description here

    Just a note about new RelativeCornerSize(0.5f): It changed in 1.2.0-beta01. Before it was new RelativeCornerSize(50)