Design Support Library, Toolbar buttons cropped ripple

Question

I'm trying to utilize the CoordinatorLayout, AppBarLayout, CollapsingToolbarLayout, Toolbar and a parallax'ed ImageView. It looks like the ripple effect of the toolbar menu items is cropped. The following image displays the ripple effect of the back button in expanded and in partially collapsed mode. In complete collapsed mode the ripple effect is not shown at all. I think this is caused by the parallax'ed ImageView that is positioned there.

Layout:

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="224dp"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:weightSum="1.0">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:minHeight="56dp"
            android:layout_weight="1.0"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_marginTop="48dp"
                android:scaleType="centerInside"
                app:layout_collapseMode="parallax"
                app:layout_collapseParallaxMultiplier="0.4"/>

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:background="@color/transparent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:tabGravity="fill"
            app:tabMode="fixed"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"/>

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

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

The ImageView displays a 9-patch'ed Image. Is there something wrong with the layout or is it a bug/inability in the design support library to draw the ripple ontop of the ImageView?

Answer 1

I think your solution is here.

You can try to add this line:

<item name="actionBarItemBackground">?attr/selectableItemBackground</item>

in the theme/style of your Toolbar.

If it doesn't work, add this in your Toolbar attributes:

android:background="@android:color/transparent"