How to put the android BottomAppBar with rounded corners

Question

I am using the BottomAppBar from google like this:

 <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/vNavigationBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

The custom bottom bar is flat and I need to add rounded corners on the Bottom bar(image example bellow)

What should I do to make this work this way?

Answer 1

The BottomAppBar works with a MaterialShapeDrawable and you can apply to it rounded corners (using a RoundedCornerTreatment).

In your layout:

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bottom_app_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:backgroundTint="@color/..."
      ../>

Then in the code define:

//Corner radius
float radius = getResources().getDimension(R.dimen.default_corner_radius);
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);

MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
bottomBarBackground.setShapeAppearanceModel(
       bottomBarBackground.getShapeAppearanceModel()
                .toBuilder()
                .setTopRightCorner(CornerFamily.ROUNDED,radius)
                .setTopLeftCorner(CornerFamily.ROUNDED,radius)
                .build());

It works also with a fabCradle:

<com.google.android.material.bottomappbar.BottomAppBar
    android:id="@+id/bottomAppBar"
    app:fabAlignmentMode="center"
    app:fabCradleVerticalOffset="8dp"
    app:fabCradleMargin="8dp"
    .../>

It requires the version 1.1.0.