如何使用自定义形状的 fab 按钮制作底部栏？

Question

I want to make a bottombar with attach fab button like given below image. If anyone knows about that type of different shape button library with a bottom with fab then suggest to me.

The image is given below make a bottombar with fab like this.

Answer 1

It is just an idea the code can be improved.
You can change the shape of the FloatingActionButton with the shapeAppearanceOverlay attribute:

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

with:

<style name="cutfab">
    <item name="cornerFamily">cut</item>
    <item name="cornerSize">15dp</item>
</style>

Then you can define the BottomAppBar in your layout:

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

Finally you can apply to the BottomAppBar a TopEdgeTreatment . Something like:

BottomAppBar bar = findViewById(R.id.bar);
BottomAppBarTopEdgeTreatment topEdge = new BottomAppBarCutCornersTopEdge(
        bar.getFabCradleMargin(),
        bar.getFabCradleRoundedCornerRadius(),
        bar.getCradleVerticalOffset());
MaterialShapeDrawable babBackground = (MaterialShapeDrawable) bar.getBackground();

babBackground.setShapeAppearanceModel(
  babBackground.getShapeAppearanceModel()
  .toBuilder()
  .setTopEdge(topEdge)
  .build());

Where the BottomAppBarCutCornersTopEdge is something like:

public class BottomAppBarCutCornersTopEdge extends BottomAppBarTopEdgeTreatment {

    private final float fabMargin;
    private final float cradleVerticalOffset;

    BottomAppBarCutCornersTopEdge(
            float fabMargin, float roundedCornerRadius, float cradleVerticalOffset) {
        super(fabMargin, roundedCornerRadius, cradleVerticalOffset);
        this.fabMargin = fabMargin;
        this.cradleVerticalOffset = cradleVerticalOffset;
    }

    @Override
    @SuppressWarnings("RestrictTo")
    public void getEdgePath(float length, float center, float interpolation, ShapePath shapePath) {
        float fabDiameter = getFabDiameter();
        if (fabDiameter == 0) {
            shapePath.lineTo(length, 0);
            return;
        }

        float diamondSize = fabDiameter / 2f;
        float middle = center + getHorizontalOffset();

        float verticalOffsetRatio = cradleVerticalOffset / diamondSize;
        if (verticalOffsetRatio >= 1.0f) {
            shapePath.lineTo(length, 0);
            return;
        }

        shapePath.lineTo(middle - (fabMargin + diamondSize), 0);    
        shapePath.lineTo(middle - fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + fabDiameter/3, (diamondSize - cradleVerticalOffset + fabMargin) * interpolation);    
        shapePath.lineTo(middle + (fabMargin + diamondSize), 0);    
        shapePath.lineTo(length, 0);
    }

}

To obtain a better result you should extend the CutCornerTreatment , implementing in the getCornerPath method the same path used in the BottomAppBar and apply it to the FloatingActionButton .

Answer 2

In order to use latest style BottomAppBar in your app.

1) Include Google Maven repository in build.gradle.

allprojects {
repositories {
  jcenter()
  maven {
    url "https://maven.google.com"
   }
  }
}

2) Place material components dependency in your build.gradle . Keep in mind that material version is regularly updating.

implementation 'com.google.android.material:material:1.0.0-alpha1'

3) Make sure your app inherits Theme.MaterialComponents theme in order to make BottomAppBar use the latest style. Alternatively you can declare the style for BottomAppBar in widget declaration within layout xml file as follows.

style=”@style/Widget.MaterialComponents.BottomAppBar”

You can include BottomAppBar in your layout as follows. BottomAppBar must be a child of CoordinatorLayout.

<com.google.android.material.bottomappbar.BottomAppBar
android:id="@+id/bottom_app_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
app:backgroundTint="@color/colorPrimary"
app:fabAlignmentMode="center"
app:fabAttached="true"
app:navigationIcon="@drawable/baseline_menu_white_24"/>

You can anchor a Floating Action Button (FAB) to BottomAppBar by specifying the id of the BottomAppBar in app:layout_anchor attribute of the FAB. BottomAppBar can cradle FAB with a shaped background or FAB can overlap BottomAppBar.

<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/baseline_add_white_24"
app:layout_anchor="@id/bottom_app_bar" />

THANKS