Transparent AppBarLayout and CollapsingToolbarLayout

Devdroid picture Devdroid · Jan 18, 2016 · Viewed 21.6k times · Source

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.

enter image description here

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

ʍѳђઽ૯ท picture ʍѳђઽ૯ท · Jan 18, 2016

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:

enter image description here

Hope that helps.