Android - My Snackbar appears in front of my Bottom Nav Bar instead above it, how to fix it?

Question

I've been for stuck hours because of my Snackbar pops out in front of the bottom navigation bar.

Is there something wrong with my layout?

Is it the nesting of the layout?

Any answers are appreciated, thanks :D

My Main Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/overview_coordinator_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <include
                layout="@layout/app_bar_home"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />

            <android.support.design.widget.BottomNavigationView
                android:id="@+id/navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:background="@color/colorNavIcon"
                app:itemIconTint="@color/colorNavIcon"
                app:itemTextColor="@color/colorNavText"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintLeft_toLeftOf="parent"
                app:layout_constraintRight_toRightOf="parent"
                app:menu="@menu/navigation" />

        </RelativeLayout>

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

    <FrameLayout
        android:id="@+id/frame_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        android:animateLayoutChanges="true">

    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_home"
        app:menu="@menu/activity_home_drawer" />

App Bar Layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.project.adrianangub.project_adesua.home">

    <android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/AppBarOverlay">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimaryDark"
        app:popupTheme="@style/PopupOverlay" />

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

<include layout="@layout/content_home" /></android.support.design.widget.CoordinatorLayout>

Java Code for my Snackbar:

Snackbar.make(findViewById(R.id.overview_coordinator_layout), "Can you smell what The Rock is cooking?", Snackbar.LENGTH_LONG).show();

Pictures here:

If you guys needed which more parts of the code to be viewed, comment here :D

Answer 1

You are using the coordinator widget in the wrong way. Always Remember the hierarchy of coordinator's children must be:

<CoordinatorLayout>
    <Appbar/>
    <View/> <!--Mostly NestedScrollView or something scrollable-->
    <fab/> <!--Optional-->
    <bottomBar/> <!--Optional-->
</CoordinatorLayout>`

So your main_layout.xml must be changed as:

<android.support.v4.widget.DrawerLayout>
.
.
.
<android.support.design.widget.CoordinatorLayout 
    android:id="@+id/overview_coordinator_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

   <android.support.design.widget.AppBarLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:theme="@style/AppBarOverlay">

       <android.support.v7.widget.Toolbar
           android:id="@+id/toolbar"
           android:layout_width="match_parent"
           android:layout_height="?attr/actionBarSize"
           android:background="?attr/colorPrimaryDark"
           app:popupTheme="@style/PopupOverlay" />

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

   <include layout="@layout/content_home" />

   <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorNavIcon"
        android:layout_gravity="bottom"
        app:itemIconTint="@color/colorNavIcon"
        app:itemTextColor="@color/colorNavText"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

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

And for showing the SnackBar use this code:

Snackbar.make(findViewById(overview_coordinator_layout), "Hello!", Snackbar.LENGTH_LONG)
        .setAction("Action", null).show();