英文:
Rounded menu item in BottomNavigationMenu
问题
把BottomNavigation菜单中的每个菜单项都做成圆角，附有示例菜单图片。这样做是否可行？
英文:
I want to have rounded corners for each menu item in BottomNavigation menu. Sample menu image is attached. Is it possible?
答案1
得分: 1
最终，我找到了解决我的问题的方法。
1）在 bg_prog_round.xml 文件中添加以下内容：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<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" />
</shape>
2）创建另一个 XML 文件并添加以下内容（bg_prog_orange_round.xml）：
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<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" />
</shape>
3）创建 bottom_back_nav.xml 文件：
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_prog_orange_round" android:state_checked="true" />
<item android:drawable="@drawable/bg_prog_round" />
</selector>
4）将以下内容添加到你的 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" />
结果如下图所示：
英文:
Finally, I find a solution to my problem
-
Add to the bg_prog_round.xml file
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" ><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" /></shape>
-
Create another XML file and add this to it (bg_prog_orange_round.xml)
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle"><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" /></shape>
-
Create bottom_back_nav.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/bg_prog_orange_round" android:state_checked="true" />
<item android:drawable="@drawable/bg_prog_round" />
</selector> -
Add this to your BottomNavigationView ->
app:itemBackground="@drawable/bottom_nav_back"
also, add paddingStart, paddingEnd to it
> <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" />
And the result is here
答案2
得分: 0
我建议您使用一个库来创建这种类型的菜单，我找到了这个 https://github.com/gauravk95/bubble-navigation，可能会有帮助。
英文:
I recommend you to use a library to do this kind of menu, I found this one https://github.com/gauravk95/bubble-navigation which can be helpful
答案3
得分: 0
你可以在你的布局文件中添加以下内容：
<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>
英文:
You can Add in your layout file
<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>
Add gradient_in_purchase XML in your drawable folder and add below code
<?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>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论