BottomNavigationMenu 中的圆形菜单项

Question

我想为 BottomNavigation 菜单中的每个菜单项设置圆角。附上示例菜单图片。可能吗？

Answer 1

我推荐你使用库来做这种菜单，我找到了这个https://github.com/gauravk95/bubble-navigation，它很有用

Answer 2

您可以在布局文件中添加

        <RelativeLayout
            android:id="@+id/rel_titleText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginLeft="@dimen/_20dp"
            android:layout_marginTop="265dp"
            android:layout_marginRight="@dimen/_20dp"
            android:gravity="center|right">
            <!---->
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_margin="3dp"
                android:background="@drawable/gradient_in_purchase"
                android:paddingTop="@dimen/_10dp"
                android:paddingBottom="@dimen/_10dp">

             <ImageView
                    android:layout_marginRight="@dimen/_20dp"
                    android:layout_alignParentRight="true"
                    android:src="@drawable/ic_pro1"
                    android:layout_width="@dimen/_24dp"
                    android:layout_height="@dimen/_24dp"/>

           </RelativeLayout>
  </RelativeLayout>

在你的drawable文件夹中添加gradient_in_purchase XML并添加下面的代码

     <?xml version="1.0" encoding="utf-8"?>
     <shape xmlns:android="http://schemas.android.com/apk/res/android"
     android:shape="rectangle">
     <gradient
    android:startColor="@color/orange"
    
    android:angle="0"/>
    <corners
    android:bottomLeftRadius="@dimen/_10dp"
    android:bottomRightRadius="@dimen/_10dp"
    android:topLeftRadius="@dimen/_10dp"
    android:topRightRadius="@dimen/_10dp"/>

    </shape>

Answer 3

终于，我找到了解决问题的方法

添加到bg_prog_round.xml文件

 <solid android:color="@color/edit_text_back" />

 <stroke
     android:width="0dp"
     android:color="@color/edit_text_back" />

 <corners
     android:bottomLeftRadius="10dp"
     android:bottomRightRadius="10dp"
     android:topLeftRadius="10dp"
     android:topRightRadius="10dp" />

创建另一个 XML 文件并将其添加到其中 (bg_prog_orange_round.xml)

 <solid android:color="@color/orange" />

 <stroke
     android:width="2dp"
     android:color="@color/orange" />

 <corners
     android:bottomLeftRadius="@dimen/_15sdp"
     android:bottomRightRadius="@dimen/_15sdp"
     android:topLeftRadius="@dimen/_15sdp"
     android:topRightRadius="@dimen/_15sdp" />

创建bottom_back_nav.xml
将此添加到您的 BottomNavigationView -> app:itemBackground="@drawable/bottom_nav_back"

另外，加上paddingStart, paddingEnd

 <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_nav"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            app:itemIconTint="@drawable/bottom_navigation_colors"
            app:itemTextColor="@drawable/bottom_navigation_colors"
            app:itemBackground="@drawable/bottom_nav_back"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:labelVisibilityMode="unlabeled"
            android:paddingStart="@dimen/_45sdp"
            android:paddingEnd="@dimen/_45sdp"
            android:paddingTop="@dimen/_8sdp"
            android:paddingBottom="@dimen/_5sdp"
            app:menu="@menu/bottom_nav_menu" />

结果在这里

BottomNavigationMenu 中的圆形菜单项

Rounded menu item in BottomNavigationMenu

java

android

kotlin

android-studio

android-bottomnav