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>

@FerdousAhamed: same answer is already been given by rafsanahmad007(by using view),but i appreciate your effort. — sunil kushwah, Mar 27 '17 at 10:23
@FerdousAhamed: i am looking for some xml attribute for setting the border, but i think it is not there.. — sunil kushwah, Mar 27 '17 at 10:26
Yes there is no attribute for setting top border. You have to create it by using other view/viewgroup. — Ferdous Ahamed, Mar 27 '17 at 10:29
If you don't want to use VIEW then you can do it by another way. See my updated answer. Thank you~ — Ferdous Ahamed, Mar 27 '17 at 10:37

score 19 · Accepted Answer · answered Mar 27 '17 at 06:26

19

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

answered Mar 27 '17 at 06:26

rafsanahmad007

23,683
6
47
62

by View we can do this, but is any other way like inbuilt xml attribute for setting this border – sunil kushwah Mar 27 '17 at 06:44
1

From the [Documentation](https://developer.android.com/reference/android/support/design/widget/BottomNavigationView.html) i didn't find any xml attribute – rafsanahmad007 Mar 27 '17 at 06:51

score 12 · Answer 2 · edited Jul 26 '17 at 17:01

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>

Use it as background with

android:background="@drawable/myBackgroundBottomDrawer"

Ferdous Ahamed · Answer 3 · 2017-03-27T11:09:04.797

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~

score 0 · Answer 4 · answered Nov 14 '22 at 07:39

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

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>

Use it as background with

 android:background="@drawable/bottom_navigation_view_background"

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

4 Answers4

Related