How to use the fab style diamond?

Currently there isn't a official shape for the BottomAppBar.

However with the version 1.1.0 of the material components library you can customize the shape of the FloatingActionButton using the app:shapeAppearance attribute.

You can use something like:

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

with this style:

 <style name="FabDiamondOverlay" parent="">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">8dp</item>
  </style>

It is the result:

Currently the shape theming attributes doesn't affect the BottomAppBar and you can only have rounded corners for the FAB cradle. There is a workaround added in the official repository.

Just use a default BottomAppBar with the attribute app:fabCradleMargin (it defines the distance between the FloatingActionButton and the BottomAppBar)

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

and use the BottomAppBarTopEdgeTreatment to change the shape of the BottomAppBar:

    BottomAppBar bar = findViewById(R.id.bar);
    FloatingActionButton fab2 = findViewById(R.id.fab);
    BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
            bar.getFabCradleMargin(),
            bar.getFabCradleRoundedCornerRadius(),
            bar.getCradleVerticalOffset());
    MaterialShapeDrawable babBackground = (MaterialShapeDrawable) bar.getBackground();
    //It requires 1.1.0-alpha10
    babBackground.setShapeAppearanceModel(
      babBackground.getShapeAppearanceModel()
      .toBuilder()
      .setTopEdge(topEdge)
      .build());

It is the final result: