Android Bottom Bars overlapping Toolbar

Question

I'm using a library for the new Material Design Bottom Bars, and I am having a very strange problem. Whenever I put this into my Coordinator Layout, it shows on top of the toolbar. Why is this happening, and how can I fix it? Also, how can I have it so the Floating Action Button is above these bars, and not overlapping it?

    <?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"
android:fitsSystemWindows="true"
tools:context="com.marlonjones.kansei.MainActivity">
<android.support.design.widget.AppBarLayout
    android:layout_height="wrap_content"
    android:layout_width="match_parent"
    app:elevation="0dp"
    android:theme="@style/AppTheme.AppBarOverlay">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:elevation="4dp"
        android:background="?attr/colorPrimary"/>
</android.support.design.widget.AppBarLayout>
<include layout="@layout/content_main"/>
<android.support.design.widget.FloatingActionButton
    android:id="@+id/fab"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    android:layout_margin="@dimen/fab_margin"
    android:src="@drawable/ic_write" />
<com.luseen.luseenbottomnavigation.BottomNavigation.BottomNavigationView
    android:id="@+id/bottomNavigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    app:bnv_colored_background="true"
    app:bnv_with_text="false"
    app:bnv_shadow="true"
    app:bnv_tablet="false"
    app:bnv_viewpager_slide="true"
    app:bnv_active_color="@color/colorPrimary"
    app:bnv_active_text_size="@dimen/bottom_navigation_text_size_active"
        app:bnv_inactive_text_size="@dimen/bottom_navigation_text_size_inactive"/>
</android.support.design.widget.CoordinatorLayout>

Answer 1

Three alternative ways to try, i dont know if them works:

1 - Place the BottomNavigationView outside the CoordinatorLayout, nesting all those in a RelativeLayout and setting a marginBottom for the CoordinatorLayout (as that library's example:

android:layout_marginBottom="@dimen/bottom_navigation_height"

).

2 - Retain the BottomNavigationView inside the CoordinatorLayout, but using the FrameLayout's param (CoordinatorLayout is a FrameLayout)

android:layout_gravity

instead of

android:layout_alignParentBottom

(that is a RelativeLayout's param). You have to add the marginBottom to the main content too.

3 - The better if works: Retain the BottomNavigationView inside the CoordinatorLayout, removing the android:layout_alignParentBottom and trying to give it the BottomSheetBehavior as Design Library tells

app:behavior_peekHeight="XXdp" app:layout_behavior="android.support.design.widget.BottomSheetBehavior"

PeekHeight XX should be the BottomNavigationView height, you have to add the marginBottom to the main content too.