New Bottom Layout from Google

You can use the new Material Components for Android and the BottomAppBar component.

Use something like:

 <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bar"
      android:layout_gravity="bottom"
      app:fabCradleMargin="8dp"
      app:fabCradleRoundedCornerRadius="8dp"
      app:fabCradleVerticalOffset="0dp"
      ... />

  <com.google.android.material.floatingactionbutton.FloatingActionButton
      app:layout_anchor="@id/bar"
      ../>

enter image description here

You have to use these attributes:

  • fabCradleMargin attribute. It increases or decreases the distance between the FloatingActionButton and the BottomAppBar
  • fabCradleRoundedCornerRadius attribute. It specifies the roundness of the corner around the cutout

enter image description here

OLD SUPPORT LIBRARY

With the Support Library 28.0.0, the Design Library contains the BottomAppBar.

You can use

<android.support.design.bottomappbar.BottomAppBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:backgroundTint="@color/colorPrimary"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

enter image description here

You can customize the component using these attributes:

  • app:fabAlignmentMode: Declares the position of the FAB which has been attached to the bottom app bar. This can be either end or center

  • app:fabCradleVerticalOffset: Declares the vertical offset to be used for the attached fab. By default this is 0dp.

  • app:backgroundTint: Used to apply a tint to the background of the view.

Also you you can attach a fab by using app:layout_anchor on the FAB component which you wish to attach, using the ID of the bottom app bar.


I believe it's the BottomAppBar, coming in support library 28.0.0. You can read more here: https://medium.com/@lupajz/the-place-for-bottomappbar-31e0db8f70b1