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

Question

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

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

Tejas Dhawale · Accepted Answer · 2020-10-06T23:20:49.147

12

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:

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>

edited Oct 06 '20 at 23:20

answered Oct 06 '20 at 23:15

Tejas Dhawale

393
1
9

1

In this way you are overriding the default `MaterialShapeDrawable` and it means that shape appearance, Elevation Overlays in dark mode will be **ignored**. – Gabriele Mariotti Oct 07 '20 at 07:34
He mentioned in the question he is not looking for elevation (float). MaterialShapeDrawable and CardView are the best alternates but for this **Shape Drawable** can satisfy the required design. – Tejas Dhawale Oct 07 '20 at 08:54
1

You can also add specific corner radius using, `` – V Surya Kumar Apr 02 '22 at 17:30

Gabriele Mariotti · Answer 2 · 2020-10-07T07:35:20.950

8

The BottomNavigationView uses as background a MaterialShapeDrawable.
You can use something like:

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

and then apply a shapeAppearanceModel with rounded corners:

    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()

edited Oct 07 '20 at 07:35

answered Oct 07 '20 at 06:52

Gabriele Mariotti

320,139
94
887
841

What you have mentioned works, however it only makes corners round. should I assume you have used `elevation` and `margin` to give it shadow? – AaA Aug 23 '21 at 17:08
1

@AaA elevation is assigned by the original `shapeDrawable.shapeAppearanceModel`. We are just overriding the corners. – Gabriele Mariotti Aug 23 '21 at 18:10

score 4 · Answer 3 · answered Oct 06 '20 at 22:50

The easiest way is to wrap BottomNavigationView in a CardView and set radius to the value you want.

Here's an example:

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

And here's the result:

whats in itemIconTint? drawable? – Qadir Hussain Jul 07 '23 at 07:01 — Qadir Hussain, Jul 07 '23 at 07:01

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

3 Answers3