Search code examples
androidmenuitembottomnavigationview

How to add dividers in Bottom Navigation View


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.


Solution

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