如何使用圆角的方式添加Android底部应用栏

Question

我正在使用 Google 的 BottomAppBar，代码如下：

 <com.google.android.material.bottomappbar.BottomAppBar
            android:id="@+id/vNavigationBar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

自定义的底部栏是平的，我需要在底部栏上添加圆角（下面是图片示例）

我该怎么做才能让它变成这样？

- José Nobre

---

我强烈建议不要按照您的想法去做，因为这违反了Material Design指南：https://material.io/design/components/app-bars-bottom.html# - S. Czop

Answer 1

BottomAppBar与MaterialShapeDrawable配合使用，您可以对其应用圆角（使用RoundedCornerTreatment）。

在您的布局中：

  <com.google.android.material.bottomappbar.BottomAppBar
      android:id="@+id/bottom_app_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:backgroundTint="@color/..."
      ../>

然后在代码中定义：

//Corner radius
float radius = getResources().getDimension(R.dimen.default_corner_radius);
BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);

MaterialShapeDrawable bottomBarBackground = (MaterialShapeDrawable) bottomAppBar.getBackground();
bottomBarBackground.setShapeAppearanceModel(
       bottomBarBackground.getShapeAppearanceModel()
                .toBuilder()
                .setTopRightCorner(CornerFamily.ROUNDED,radius)
                .setTopLeftCorner(CornerFamily.ROUNDED,radius)
                .build());

它也可以与fabCradle一起使用:

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

需要版本1.1.0。

- Gabriele Mariotti

---

无法工作 `val shapeAppearanceModel = ShapeAppearanceModel() .toBuilder() .setTopRightCorner(CornerFamily.ROUNDED, 16f)
.setTopLeftCorner(CornerFamily.ROUNDED, 16f)
.build() ViewCompat.setBackground(bottom_appbar, MaterialShapeDrawable(shapeAppearanceModel))` - Akshay Raj.

@AkshayRaj。你的代码有效，我刚试过了。但是16f != 16dp。 - Gabriele Mariotti

@AkshayRaj。我已经更新了答案。BottomAppBar提供了一个MaterialShapeDrawable。只需将圆角应用于它，改变ShapeAppearanceModel即可。 - Gabriele Mariotti

如果你的目标是 Android L，那么这就是正确的答案。 - Arshad Ali

Answer 2

你可以尝试添加一个形状可绘制的XML文件，并将以下代码添加到其中。

<corners
    android:topLeftRadius="16dp"
    android:topRightRadius="16dp" />

然后将BottomAppBar的背景设置为可绘制对象

- Pabi Moloi

Answer 3

根据this，您可以创建一个继承自BottomAppBar的customView类，并实现以下代码：

`@Override protected void onLayout(boolean changed, int left, int top, int 
 right, int bottom) {
 super.onLayout(changed, left, top, right, bottom);
 }
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mNavigationBarWidth = getWidth();
    mNavigationBarHeight = getHeight();
}

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    mPath.reset();
    mPath = RoundedRect(0, 0, mNavigationBarWidth, mNavigationBarHeight, 50, 50, true);
    canvas.drawPath(mPath, mPaint);
}

`

记住，在你自定义类的每个构造函数中，都要这样做：

mPath = new Path();
    mPaint = new Paint();
    mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
    mPaint.setColor(Color.WHITE);
    setBackgroundColor(Color.TRANSPARENT);

- Azin Nilchi