how to set top border for bottom navigation bar in android as shown in image

Question

is it possible to set top border for bottom navigation bar in android, if possible tell me how we can do this, i am using the new bottom navigation view of android. Here is my code

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
        <LinearLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_alignParentTop="true">
                <include
                    android:id="@+id/gamebar"
                    layout="@layout/gamebar_layout"
                    />
                <include
                    android:id="@+id/toolbar"
                    layout="@layout/toolbar_layout" />
        </LinearLayout>

        <!-- Let's add fragment -->
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@+id/app_bar_layout"
            android:layout_above="@+id/bottom_navigation"
            android:id="@+id/contentContainer"/>
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_alignParentBottom="true"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
</RelativeLayout>

Bootleg

@FerdousAhamed: same answer is already been given by rafsanahmad007(by using view),but i appreciate your effort. – Bootleg

what is the current status of your problem? – Underdrawers

@FerdousAhamed: i am looking for some xml attribute for setting the border, but i think it is not there.. – Bootleg

Yes there is no attribute for setting top border. You have to create it by using other view/viewgroup. – Underdrawers

If you don't want to use VIEW then you can do it by another way. See my updated answer. Thank you~ – Underdrawers

Answer 1

You can try this: add a View element above BottomNavigationView

<View
    android:layout_width="match_parent"
    android:layout_height="4dp"
    android:layout_above="@+id/bottom_navigation"
    android:background="#000000"></View>

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:layout_alignParentBottom="true"
    app:itemBackground="@color/BottomNavigationBgColor"
    app:itemIconTint="@color/CelestialBlue"
    app:itemTextColor="@color/CelestialBlue"
    app:menu="@menu/bottom_navigation_main" />

Katlaps

by View we can do this, but is any other way like inbuilt xml attribute for setting this border – Bootleg

From the Documentation i didn't find any xml attribute – Katlaps

Answer 2

1. Define a background drawable using XML:

   <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
       <item>
           <shape android:shape="rectangle">
               <solid android:color="@color/colorPrimaryDark" />
           </shape>
       </item>
       <item android:top="1dp">
           <shape android:shape="rectangle">
               <solid android:color="@color/colorWhite" />
           </shape>
       </item>
   </layer-list>
   

2. Use it as background with

   android:background="@drawable/myBackgroundBottomDrawer"
   

Hasten

Answer 3

You can add top border by creating a new LinearLayout with a View for top border and place android.support.design.widget.BottomNavigationView below top ber View.

Here is the working code. Just update your XML as below:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentTop="true">

        <include
            android:id="@+id/gamebar"
            layout="@layout/gamebar_layout"/>
        <include
            android:id="@+id/toolbar"
            layout="@layout/toolbar_layout" />
    </LinearLayout>

    <!-- Bottom Navigation Layout-->
    <LinearLayout
        android:id="@+id/layout_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true">

        <!-- Top Border -->
        <View
            android:layout_width="match_parent"
            android:layout_height="6dp"
            android:background="#FF0000"> 

        </View>

        <!-- BottomNavigationView -->
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
    </LinearLayout>

    <!-- Let's add fragment -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/app_bar_layout"
        android:layout_above="@id/layout_bottom_navigation"
        android:id="@+id/contentContainer"/>

</RelativeLayout>

UPDATE: If you don't use View then you can add attribute android:layout_marginTop to android.support.design.widget.BottomNavigationView and set background color to android:background="#FF0000" to LinearLayout.

<!-- Bottom Navigation Layout-->
    <LinearLayout
        android:id="@+id/layout_bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_alignParentBottom="true"
        android:background="#FF0000">

        <!-- BottomNavigationView -->
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            android:layout_marginTop="6dp"
            app:itemBackground="@color/BottomNavigationBgColor"
            app:itemIconTint="@color/CelestialBlue"
            app:itemTextColor="@color/CelestialBlue"
            app:menu="@menu/bottom_navigation_main" />
    </LinearLayout>

Hope this will help you~

Underdrawers

Answer 4

Here is the fixed version of the latest answer's issue where the divider is slightly thin.

1. Define a background drawable using XML:

    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:gravity="top">
            <shape android:shape="rectangle">
                <size android:height="1.0dip" />
                <solid android:color="@color/colorWhite" />
            </shape>
        </item>
    </layer-list>
   

2. Use it as background with

    android:background="@drawable/bottom_navigation_view_background"
   

Variant