Bottom navigation bar - rectangle action button

Question

Using google.android.material:

1. Is it possible to make action button rectangle ?
2. Is it possible to move it a little higher / lower ?

I am talking about the middle circle button.

Answer 1

You can use the app:shapeAppearanceOverlay attribute to achieve a square button and the app:fabCradleVerticalOffset attribute to change the distance of the FAB to the BottomAppBar.

Something like:

  <com.google.android.material.bottomappbar.BottomAppBar
         app:fabCradleVerticalOffset="16dp"
         app:fabCradleRoundedCornerRadius="0dp"
         app:fabCradleMargin="0dp"
          ..>


      <com.google.android.material.floatingactionbutton.FloatingActionButton
          app:shapeAppearanceOverlay="@style/SquareFloatingShapeOVerlay"
          ../>

with:

  <style name="SquareFloatingShapeOVerlay" parent="">
    <item name="cornerSize">0dp</item>
  </style>

If you want a rectangular shape you can use a ExtendedFloatingActionButton instead of the FloatingActionButton.

Something like:

  <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
      app:layout_anchor="@id/bottom_app_bar"
      app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlayExtended"
      ../>

with:

  <style name="ShapeAppearanceOverlayExtended" parent="">
    <item name="cornerFamily">rounded</item>
    <item name="cornerSize">0dp</item>
  </style>

Note: it requires the version 1.1.0 of the Material Components Library.