How to add dividers in Bottom Navigation View

Question

I'm trying to add divider in menu items of BottomNavigationView

All items are showing horizontally in the bottom but I'm not able to add dividers into it.

Bottom Navigation View xml:

<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:focusable="false"
        app:itemBackground="@color/colorPrimaryDark"
        app:itemIconTint="@color/bottom_navigation_selector"
        app:itemTextColor="@color/bottom_navigation_selector"
        app:layout_anchor="@id/container"
        app:layout_anchorGravity="bottom"
        app:menu="@menu/bottom_nav_items" />

And bottom_nav_items.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/menu_family"
    android:checked="false"
    android:icon="@drawable/family"
    android:title="@string/family" />
<item
    android:id="@+id/menu_me"
    android:checked="false"
    android:icon="@drawable/me"
    android:title="@string/me" />

<item
    android:id="@+id/menu_blank"
    android:checkable="false"
    android:enabled="false"
    android:title="" />
<item
    android:id="@+id/menu_event"
    android:checked="false"
    android:icon="@drawable/event"
    android:title="@string/event" />
<item
    android:id="@+id/menu_more"
    android:checked="false"
    android:icon="@drawable/more"
    android:title="@string/more" />

Thanks for your support.

Answer 1

create a drawable item_bg.xml like this,

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item>
        <shape android:shape="rectangle" >
            <solid android:color="#F4F4F4" />
        </shape>
    </item>

    <item android:top="-2dp" android:right="-2dp" android:left="-2dp">
        <shape>
            <solid android:color="@android:color/transparent" />
            <stroke
                android:width="1dp"
                android:color="#EAEAEA" />
        </shape>

    </item>

</layer-list>

Then add it to NavigationView as app:itemBackground="@drawable/item_bg"

 <android.support.design.widget.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:focusable="false"
    app:itemBackground="@drawable/item_bg"
    app:itemIconTint="@color/bottom_navigation_selector"
    app:itemTextColor="@color/bottom_navigation_selector"
    app:layout_anchor="@id/container"
    app:layout_anchorGravity="bottom"
    app:menu="@menu/bottom_nav_items" />

Answer 2

If someone still interested to do that despite it is not recommended. You can achieve that programmatically to avoid having a divider at the end of the screen like the accepted solution.

 val bottomNavigationMenuView = (binding.navView[0] as BottomNavigationMenuView)
    if (bottomNavigationMenuView.isNotEmpty()) {
                  bottomNavigationMenuView[1].setBackgroundResource(R.drawable.bottom_view_divider)
        bottomNavigationMenuView[2].setBackgroundResource(R.drawable.bottom_view_divider)
        bottomNavigationMenuView[3].setBackgroundResource(R.drawable.bottom_view_divider)

    }

Note: you will lose the ripple effect in the bottom view navigation when clicking on the item.