FloatingActionButton - Incorrect z-index after scrolling

Question

I have some FloatingActionButtons in an Android app, anchored below the title bar in a view where the content below the buttons is scrollable. On initial load, the view displays correctly, like this:

As the user scrolls the content on the page, what they should get to is something like this:

Notably, with the buttons remaining above all other content on the screen. However what actually happens is this:

Where the buttons are incorrectly rendered behind the title bar. My layout XML file looks like this:

<?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="au.com.suncoastpc.coastlive.activity.EventDetailsActivity">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

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

    <LinearLayout
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">


        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_facebook"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            app:backgroundTint="#3c5a99"
            app:srcCompat="@drawable/icon_facebook"/>
        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab_music"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="@dimen/fab_margin"
            android:layout_marginBottom="@dimen/fab_margin"
            android:layout_marginLeft="@dimen/fab_margin"
            app:backgroundTint="#008800"
            app:srcCompat="@drawable/icon_music"/>

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            app:backgroundTint="#880000"
            app:srcCompat="@drawable/icon_info"/>
    </LinearLayout>

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

...where the content_event_details layout has a NestedScrollView as its root element and contains the map, details text, and other UI elements that can be seen in the pictures above (basically everything except the title bar and floating buttons).

How do I make the FloatingActionButtons stay on top of the title bar at all times?

Answer 1

Hy Aroth,

In You Appbar, add android:elevation="4dp" >>>

<android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="@dimen/app_bar_height"
        android:fitsSystemWindows="true"
        android:elevation="4dp"
        android:theme="@style/AppTheme.AppBarOverlay">

and in your LinearLayout containing FAB, add android:elevation="6dp" >>>

<LinearLayout
        app:layout_anchor="@id/app_bar"
        app:layout_anchorGravity="bottom|end"
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:elevation="6dp">

Hope it Helps :)