1

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.

enter image description here

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?

Andreas Wenger
  • 4,310
  • 1
  • 22
  • 31
  • Duplicate of http://stackoverflow.com/questions/30576926/background-ripple-effect-on-standalone-toolbar-items-is-gone Workaround is discussed here: https://code.google.com/p/android/issues/detail?can=1&start=0&num=100&q=CollapsingToolbarLayout%20Ripple&colspec=ID%20Type%20Status%20Owner%20Summary%20Stars&groupby=&sort=&id=176431 – Andreas Wenger Aug 03 '15 at 15:30

1 Answers1

5

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"
Louis CAD
  • 10,965
  • 2
  • 39
  • 58
  • This is exactly the link I provided when I marked this question as a duplicate. Back then I also proposed the workaround with the transparent background, both in the android bug tracker and in the referenced SO question. However I'm willing to accept *your* answer if you think this question is not a duplicate. – Andreas Wenger Nov 05 '15 at 18:50
  • Sorry, I didn't see your own comment when I encountered this issue… Anyway, I didn't found the question link you provided in your comment when I searched on Google for my issue, and your one is better explained with visuals, so I think it's not really a duplicate and this thread could help future programmers to quickly get the solution – Louis CAD Nov 05 '15 at 19:02