有没有办法在安卓Material View底部导航栏上添加圆角？

Question

我正在尝试给我的底部导航添加圆角，我已经尝试改变宽度和高度但是没有起作用。我使用的是相对布局，宽度设置为“fill_parent”，高度设置为“warp_content”。我有两个图标登录和注册，我希望整个导航都有圆角。我正在使用Material Design底部导航：

  <com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:id="@+id/botttom_navigation"
    app:itemBackground="@android:color/darker_gray"
    app:itemTextColor="@drawable/selector"
    app:itemIconTint="@drawable/selector"
    android:layout_alignParentBottom="true"
    app:menu="@menu/menu_navigation"/>

这就是它的样子。

我希望它像这样有圆角。不是浮动，而是这种

- Pistone Sanjama

Answer 1

正如您在问题中提到的，如果您不想要阴影效果，可以使用简单的Shape Drawable来实现，无需添加额外的库：

在您的activity/fragment XML中：

        <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/botttom_navigation"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="@dimen/spacing_40"
        android:background="@drawable/nav_background_curved"
        app:itemIconTint="@color/c_white"
        app:itemTextColor="@color/c_white"
        app:menu="@menu/dashboard_menu" />
</RelativeLayout>

在drawable文件夹中创建名为nav_background_curved的XML文件。

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="#1bc0a7" />
<corners android:radius="10dp" />
</shape>

- Tejas Dhawale

---

通过这种方式，您正在覆盖默认的MaterialShapeDrawable，这意味着在形状外观、暗模式下的高程叠加方面将被忽略。 - Gabriele Mariotti

他在问题中提到他不需要高程（float）。MaterialShapeDrawable和CardView是最好的替代品，但对于这个Shape Drawable可以满足所需的设计。 - Tejas Dhawale

你还可以使用以下代码为视图添加特定的圆角： <corners android:topLeftRadius="16dp" android:topRightRadius="16dp"/> - V Surya Kumar

Answer 2

BottomNavigationView 使用 MaterialShapeDrawable 作为背景。
你可以使用类似以下的代码：

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:backgroundTint="....."
        android:id="@+id/botttom_navigation"
        app:menu="@menu/...."/>

然后应用一个带有圆角的shapeAppearanceModel：

    val bottomNavigationViewation : BottomNavigationView = findViewById(R.id.botttom_navigation)
    val radius = resources.getDimension(R.dimen.cornerSize)

    val shapeDrawable : MaterialShapeDrawable= bottomNavigationViewation.background as MaterialShapeDrawable
    shapeDrawable.shapeAppearanceModel = shapeDrawable.shapeAppearanceModel
        .toBuilder()
        .setAllCorners(CornerFamily.ROUNDED, radius)
        .build()

- Gabriele Mariotti

---

你提到的方法是可行的，但它只能使角落变圆。我可以假设你使用了“elevation”和“margin”来添加阴影效果？ - AaA

@AaA 的高度是由原始的 shapeDrawable.shapeAppearanceModel 分配的。我们只是在覆盖角落。 - Gabriele Mariotti

Answer 3

最简单的方法是将BottomNavigationView包装在CardView中，并将半径设置为所需值。

以下是一个示例：

<androidx.cardview.widget.CardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:layout_marginEnd="10dp"
android:layout_marginBottom="10dp"
app:cardCornerRadius="20dp"
app:layout_constraintBottom_toBottomOf="parent">

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary"
    app:itemIconTint="@drawable/bottom_nav_colors"
    app:itemTextColor="@drawable/bottom_nav_colors"
    app:menu="@menu/menu_nav_bottom" />

</androidx.cardview.widget.CardView>

以下是结果：

- ameencarpenter

---

itemIconTint中有什么内容？是drawable吗？ - Qadir Hussain