Make BottomNavigationView stay under other view

Question

I've implemented BottomNavigationView (BNV). My BNV always stay on top of other view, how can I make it stay under other view?

This is my View

<RelativeLayout xmlns:ads="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
<android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_bottom_navi"
            app:itemBackground="@drawable/selector_navi_bottom"
            app:itemIconTint="@color/colorPrimary"
            app:itemTextColor="@color/colorPrimary"
            app:menu="@menu/bottom_navigation" />
        <FrameLayout
            android:id="@+id/frm_content_full"
            android:layout_width="match_parent"
            android:background="@color/colorPrimaryDark"
            android:layout_height="match_parent" />
    </RelativeLayout>

This is what it shown.

Thanks.

EDIT 1: The space below BNV is for AdView, my question is about when I use above code, screen will become Blue, BNV will be hidden.

Try changing the order of the views, i.e first your `frame_layout` then your `bottom_navigation_layout`. You can also try creating an instance of the bottom navigation view in your class and call `your_view.bringToFront()` to make it visible. :) — SripadRaj, Jun 27 '17 at 10:06

score 14 · Accepted Answer · answered Jun 27 '17 at 10:05

Try this xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/frm_content_full"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/linear_bottombar"
        android:background="@color/colorPrimaryDark" />


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

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/color_bottom_navi"
            app:itemBackground="@drawable/selector_navi_bottom"
            app:itemIconTint="@color/colorPrimary"
            app:itemTextColor="@color/colorPrimary"
            app:menu="@menu/bottom_navigation" />

        <!--your adview-->

    </LinearLayout>
</RelativeLayout>

Bring BottomNavigationView inside a ViewGroup like LinearLayout work! Can you explain a bit why? — Harry T., Jun 27 '17 at 10:20
Since you want bottom navigation at the bottom and above your adview I added it inside a view(call it LinearLayout) and aligned that linearlayout to bottom of parent using android:layout_alignParentBottom="true". Secondly I set your framelayout in reference to your bottomlayout otherwise your framelayout would overlap. Hence added android:layout_above="@+id/linear_bottombar" — Yyy, Jun 27 '17 at 10:26

score 0 · Answer 2 · answered Jun 27 '17 at 10:31

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


  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true"
  android:orientation="vertical"
  tools:context="com.study.navcon.module.home.HomeScreenActivity">

  <RelativeLayout
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="?attr/colorPrimary"
      android:minHeight="?attr/actionBarSize"
      app:titleTextColor="@android:color/white"/>


    <FrameLayout
      android:id="@+id/fragment_container"
      android:layout_width="match_parent"
      android:layout_height="0dp"
      android:layout_marginBottom="50dp"
      android:layout_above="@+id/navigation"
      android:animateLayoutChanges="true"
      app:layout_behavior="@string/appbar_scrolling_view_behavior"/>


    <android.support.design.widget.BottomNavigationView
      android:id="@+id/navigation"
      android:layout_width="match_parent"
      android:layout_height="50dp"
      android:layout_alignParentBottom="true"
      android:background="?android:attr/windowBackground"
      app:menu="@menu/navigation"/>

  </RelativeLayout>
</LinearLayout>

score -1 · Answer 3 · answered Jun 27 '17 at 10:26

    try this

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

        <FrameLayout
            android:id="@+id/frm_content_full"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/colorPrimaryDark" />

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottomNavi"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            app:itemBackground="@android:color/holo_red_light"
            app:itemIconTint="@android:color/white"
            app:itemTextColor="@android:color/white"
            app:menu="@menu/bottom_navigation_main" />

    </RelativeLayout>


  [1]: https://i.stack.imgur.com/iyDlC.jpg

Make BottomNavigationView stay under other view

3 Answers3