Transparent ActionBar using CoordinatorLayout

Question

I'm using CoordinatorLayout to create a parallax effect in my details activity, however the ActionBar is not transparent, I mean the imageview I've added to the CollapsingToolbarLayout is not being displayed as the background of the ActionBar, like here:

This way I cannot have the back button to go to the parent activity. Also, my status bar is not becoming transparent too, but probably because my device is running Android 4.4.4 (right?).

What can I do to fix at least the ActionBar thing?

Here is how my activity currently is:

<?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"
    xmlns:fresco="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context=".ui.BookActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="210dip"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:contentScrim="?attr/colorPrimary"
            app:expandedTitleMarginStart="48dp"
            app:expandedTitleMarginEnd="64dp"
            android:fitsSystemWindows="true"
            android:id="@+id/collapsing_toolbar">

            <com.facebook.drawee.view.SimpleDraweeView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax"
                android:id="@+id/imageViewProfile"
                fresco:placeholderImage="@mipmap/hq_item_background"
                fresco:placeholderImageScaleType="centerCrop"
                android:fitsSystemWindows="true"
                />

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


            </android.support.v7.widget.Toolbar>

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

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

    <include layout="@layout/content_book" /> <!-- Just a LinearLayout with random content -->


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

Answer 1

Please check this answer taken from: Material Design Transparent ActionBar

You just need to put <item name="colorPrimary">@android:color/transparent</item> and set windowActionBarOverlay to true on your app theme like this:

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light">
        <item name="android:textColorPrimary">@color/my_text_color</item>
        <item name="colorPrimary">@android:color/transparent</item>
        <item name="windowActionBarOverlay">true</item>
    </style>

</resources>

Final result should look like this:

It should work

Answer 2

set app:contentScrim="@color/colorPrimary" to app:contentScrim="@android:color/transparent"

in

<android.support.design.widget.CollapsingToolbarLayout

same as above if you want statusbar transparent

Answer 3

Thanks for the other answers, but correct solution to my problem was to use the Theme.AppCompat.Light.NoActionBar theme and set the android.support.v7.widget.Toolbar as the ActionBar, like this:

setSupportActionBar((Toolbar) findViewById(R.id.toolbar));
getSupportActionBar().setDisplayHomeAsUpEnabled(true);