fab风格钻石如何使用？

How to use diamond style for fab + bottom app bar? In the sketch files on the website https://material.io/tools/theme-editor/ https://material.io/tools/theme-editor/ there are such styles fab:

查看了所有可能的样式和标签...

目前还没有正式的形状BottomAppBar.

不过随着版本1.1.0 of the 材料成分库 https://github.com/material-components/material-components-android您可以自定义shape https://github.com/material-components/material-components-android/blob/master/docs/theming/Shape.md of the FloatingActionButton https://github.com/material-components/material-components-android/blob/master/docs/theming/Shape.md使用app:shapeAppearance属性。

你可以使用类似的东西：

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

用这种风格：

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

结果是：

目前形状主题属性不影响BottomAppBarFAB 支架只能采用圆角。有一个解决方法 https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/bottomappbar/BottomAppBarCutCornersTopEdge.java添加到官方存储库中。

只需使用带有属性的默认 BottomAppBarapp:fabCradleMargin（它定义了之间的距离FloatingActionButton和BottomAppBar)

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

并使用BottomAppBarTopEdgeTreatment https://github.com/material-components/material-components-android/blob/master/catalog/java/io/material/catalog/bottomappbar/BottomAppBarCutCornersTopEdge.java改变形状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());

这是最终的结果：