Transparent AppBarLayout and CollapsingToolbarLayout

Question

I would like to achive the following layout:

1. Map as a base layout
2. Transparent window above inside a CollapsingToolbarLayout
3. RecyclerView for content

I included an example of how this should look like.

I was following this great example from Cheesesquare for the CollapsingToolbarLayout and AppBarLayout implementation. I managed to get the content working with the map inside the CollapsingToolbarLayout (commented out in the layout xml), but this is not the desired result.

However I did not find any solution / documentation to make the grey box (see inside image in the middle) to be transparent in the initial position. I would like it to be transparent in order to see through to the map. When the user would scroll up, the CollapsingToolbarLaoyut should do it's work and collapse the transparent window and show the Toolbar. For now the image looks just white or whatever color I give it. I already tried to set the color to transparent, but it didn't have the desired effect.

So my question: How could I set the "CollapsingToolbarLayout" transparent in the initial phase (see image Layer 1 grey box)?

Here is my code for the layout. The CollapsingToolbarLayout works great, but I can't see the map below. Would be great if it would be possible to implement.

 <android.support.design.widget.CoordinatorLayout
    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"
    android:fitsSystemWindows="true">


    <!-- Layer 0 -->
    <FrameLayout
        android:id="@+id/overlayFragmentMap"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="0dip"
        />


    <!-- Layer 1 -->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="192dp"
        android:fitsSystemWindows="true"
        android:theme="@style/CustomActionBar">
        <!--android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar-->

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorAccent"
            app:expandedTitleMarginBottom="32dp"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleTextAppearance="@color/black"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">


            <!-- Map view inside here works perfectly but is not
            the deisired result -->
            <!--
            <FrameLayout
                android:id="@+id/overlayFragmentMap"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:elevation="0dip"
                app:layout_collapseMode="parallax"
                />
            -->

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="@drawable/transparent"
                android:elevation="4dip"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

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




    <!-- Fragment with recyclerview inside -->
    <FrameLayout
        android:id="@+id/overlayFragmentContent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:elevation="3dip"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dip"
        android:clickable="true"
        app:layout_anchor="@+id/appbar"
        app:layout_anchorGravity="bottom|right|end" />

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

Answer 1

How could I set the "CollapsingToolbarLayout" transparent in the initial phase (see image Layer 1 grey box)?

Try to use this in your AppBarLayout: android:background="@android:color/transparent"

<android.support.design.widget.AppBarLayout
            android:id="@+id/appbar"
            android:layout_width="match_parent"
            android:layout_height="192dp"
            android:background="@android:color/transparent"
            android:fitsSystemWindows="true">

Here is the result:

Hope that helps.