Rounded menu item in BottomNavigationMenu

Question

I want to have rounded corners for each menu item in BottomNavigation menu. Sample menu image is attached. Is it possible?

Answer 1

Finally, I find a solution to my problem

1. Add to the bg_prog_round.xml file

    <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" />
   

2. Create another XML file and add this to it (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" />
   

3. Create bottom_back_nav.xml

4. 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

Answer 2

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

Answer 3

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>