CODEWITHSUNDEEP
androidandroid-layoutbottomnavigationview
sunil kushwah
sunil kushwah

Reputation: 505

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

enter image description here

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>

Upvotes: 9

Views: 18602

Answers (4)

Joonsoo
Joonsoo

Reputation: 908

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"

Upvotes: 1

chntgomez
chntgomez

Reputation: 2119

  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"

Upvotes: 12

Ferdous Ahamed
Ferdous Ahamed

Reputation: 21766

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~

Upvotes: 1

rafsanahmad007
rafsanahmad007

Reputation: 23881

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

enter image description here

Upvotes: 19

Related Questions