How to stop background colour from being added to BottomNavigationView

Question

I'm new to android studio, any help would be greatly appreciated.

For some reason, adding a background colour to my FrameLayout is filling in the background of my BottomNavigationView. I don't understand why this is happening as I've set my FrameLayout above the BottomNavigationView using the layout_above tag and gave it the ID of my BottomNavigationView.

This is my xml file containing the FrameLayout and BottomNavigationView:

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

 <FrameLayout
   android:id="@+id/container"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_above="@id/bottom_navigation_bar"
   android:layout_alignParentTop="true"
   android:background="@color/colorPrimaryDark">
 </FrameLayout>

 <android.support.design.widget.BottomNavigationView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:id="@+id/bottom_navigation_bar"
   android:layout_gravity="bottom"
   design:menu="@menu/navigation_menu" />

</android.support.design.widget.CoordinatorLayout> 

Here is my menu xml file:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:id="@+id/action_home"
    android:title="@string/on_home"
    android:icon="@drawable/ic_home"/>

<item
    android:id="@+id/action_saved"
    android:title="@string/on_saved"
    android:icon="@drawable/ic_file_download"/>

<item
    android:id="@+id/action_profile"
    android:title="@string/on_profile"
    android:icon="@drawable/ic_action_user"/>

Answer 1

change this line

 android:layout_above="@id/bottom_navigation_bar"

with

android:layout_above="@+id/bottom_navigation_bar"

Hope it helps. If this doesn't work try changing your xml with below code

 <?xml version="1.0" encoding="utf-8"?>
    <android.support.design.widget.CoordinatorLayout
      xmlns:android="http://schemas.android.com/apk/res/android"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      xmlns:design="http://schemas.android.com/apk/res-auto">
    <RelativeLayout                                 
       android:layout_width="match_parent"
       android:layout_height="match_parent"                                                        
       >
     <FrameLayout
       android:id="@+id/container"
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       android:layout_above="@+id/bottom_navigation_bar"
       android:layout_alignParentTop="true"
       android:background="@color/colorPrimaryDark">
     </FrameLayout>

     <android.support.design.widget.BottomNavigationView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:id="@+id/bottom_navigation_bar"
       android:layout_gravity="bottom"
       android:layout_alignParentBottom="true"
       design:menu="@menu/navigation_menu" />
    </RelativeLayout>
    </android.support.design.widget.CoordinatorLayout> 

try using this xml