Search code examples
androidbottomnavigationviewmaterial-components-androidandroid-bottomnavandroid-bottomnavigationview

Is there a way to add rounded corners to an android Material View bottom navigation?


I am trying to add rounded corners to my bottom navigation and i have tried changing widths and heights but its not working. I am using Relative layout with width set to 'fill_parent' and height set to 'warp_content' I have two icons login and register and i want the whole of the navigation to have rounded corners. I am using Material Design bottom navigation:

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

This is how it is looking

this is how it is looking

I want it to have rounded corners like this. Not float but the corners rounded corners


Solution

  • As you mention in the question if you are not looking for a shadow. You can achieve it using Simple Shape Drawable no need add an extra library for this result:

    enter image description here

    In your 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>
    

    create XML in drawable folder named nav_background_curved

    <?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>