Toolbar showing even with background transparent in CollapsingToolbarLayout

Question

I have a number of applications that use the CollapsingToolbarLayout on Details fragments, but I'm attempting to put on on a List (RecyclerView) fragment. On the RecyclerView fragment, the toolbar is opaque above the CTL, instead of being transparent and allowing the image to show below.

The Fragment is placed in a FrameLayout:

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@id/application_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimaryDark">

    <FrameLayout
        android:id="@id/main_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"/>

</RelativeLayout>

The Fragment Layout file:

<?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:background="@android:color/background_light">

    <android.support.design.widget.AppBarLayout
        android:id="@id/appbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        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"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true">

            <ImageView
                android:id="@id/toolbar_image"
                android:src="@drawable/header_image"
                android:contentDescription="@string/header_image"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                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="@color/colorPrimaryTransparent"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:layout_collapseMode="pin" />

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

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

    <android.support.v7.widget.RecyclerView
        android:id="@id/recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:clickable="true" />

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

In Android Studio, the designer looks good and as it should (image 1); but on my phone and the emulators, it looks like (image 2).

Image 1 - AS Design layout

enter image description here

Image 2 - Phone SS

enter image description here

Its #00brown, i forget the exact numbers now. I had to walk away it was driving me crazy. — kendavidson, Mar 18 '16 at 03:21
I think that addresses what you want. As a side note, you should put the RecyclerView inside a NestedScrollView — OneCricketeer, Mar 18 '16 at 03:25
Not sure the NSV is going to work. [I think i mentioned, can't remember] that I have two Fragments, one with a RecyclerView (list) and one with a NestedScrollView (details) and the toolbar displays above them both. I can give wrapping it a shot, but that doesn't explain why my details frag is displaying the same. I definitely do appreciate the help, this was driving me insane tonight, but i don't think the Actionbar link is the same, as i'm attempting to use support/design Views that should just work. Thx. — kendavidson, Mar 18 '16 at 03:41
Okay, but you are trying to implement a Collapsing Toolbar with an image that fades into a solid color, right? — OneCricketeer, Mar 18 '16 at 03:43
Yup. The collapsing toolbar scrim should provide the solid color once it hits, I'm not setting the scrim value manually, so it's at like 50% or whatever the default value is. When I moved the toolbar above the Image in the XML. The collapse doesn't cause the scrim to show and the toolbar ends up being the right size but displaying the Image, because it's layered above the Toolbar. — kendavidson, Mar 18 '16 at 03:50
First thing, `toolbar` is *top level entity* so it should always be placed in `Activity` instead of any of it's child layout. — Apurva, Mar 18 '16 at 04:49

Varun Kumar · Accepted Answer · 2016-03-18T04:31:28.057

If you want your toolbar to be transparent, use @android:color/transparent in place of @color/colorPrimaryTransparent.

Updated answer:

I've tried your code.Try adding some height to your AppBarLayout like 200p and make height of ImageView to matchparent.I've tested it on an emulator running API 23 (Marshmallow) and it hides the toolbar and works perfectly.

Here is the code that i tried:

Please note: Since i don't have your drawable file, I used the ic_launcher and changed it from src to background just for a better ui on my emulator.

<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:background="@android:color/background_light">

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:fitsSystemWindows="true"
    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"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:contentScrim="?attr/colorPrimary"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <ImageView
            android:id="@+id/toolbar_image"
            android:background="@mipmap/ic_launcher"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            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="@android:color/transparent"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

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

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

<android.support.v7.widget.RecyclerView
    android:id="@+id/recycler_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:clickable="true" />

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

Thanks man, but been there and tried that. No dice. My list frag was my custom color #00brown and my details frag was android:color/trans and toolbar displays on them both. — kendavidson, Mar 18 '16 at 03:20
I've tried something and updated my answer. Please do have a look. In case of any queries or doubts, feel free to ask. — Varun Kumar, Mar 18 '16 at 03:59
Gave it a shot.. AppBar 200dp, CTL match, IV match. Something is up with the Toolbar background color. If I tint it green, it turns green, but if I change the background to green, it doesn't change. Still primary color toolbar above the image view. — kendavidson, Mar 18 '16 at 04:05
When we add support libraries to our project, android now-a-days supplies the alpha versions (24.0.0-alpha) of support libraries by default. Make sure you are not running the alpha versions of your support libraries. They are packed with bugs. In case you are using the alpha versions, just change them to 23.2.1 in your gradle files. — Varun Kumar, Mar 18 '16 at 04:17
I've also updated the answer with my code. See if it can help you in any way. — Varun Kumar, Mar 18 '16 at 04:25

Toolbar showing even with background transparent in CollapsingToolbarLayout

1 Answers1