Solved: How to add dividers in Bottom Navigation View

Anshul Tyagi picture Anshul Tyagi · Mar 29, 2017 · Viewed 7.5k times · Source

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

ShutterSoul picture ShutterSoul · Mar 31, 2017

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