Background Ripple Effect on StandAlone Toolbar items is gone

Question

Using the Standalone toolbar has an issue with the select able background of the items, following this article didn\'t work also:

http://blog.mohitkanwal.com/blog/20

Answer 1

The workaround regarding the selectableItemBackground also didn't work for me. The best strategy I came up till now is to set the background of the Toolbar to transparent:

<android.support.v7.widget.Toolbar
   ...
   android:background="@android:color/transparent"/>

This enables the ripple effect (cropped to the Actionbar heigth) in expanded/collapsed/intermediate state.

Answer 2

Good example from my project:

            android:id="@+id/..."
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:layout_marginEnd="@dimen/..."
            android:background="@drawable/button_ripple_circle_green"
            android:theme="@style/SearchViewTheme"
            android:visibility="visible"
            app:elementColor="@color/white"
            app:hintColor="@color/text_disabled_light"
            app:leftIconMode="back"
            app:leftSearchSpace="@dimen/..."
            app:textColor="@color/white"
            app:textSize="@dimen/..."
            tools:visibility="visible" />

This is xml (android:background) where is ripple effect on icons "search" & "back":

<item android:state_pressed="true">
    <shape android:shape="oval">
        <solid android:color="@color/icon_toolbar_pressed"/>
        <corners android:radius="3dp"/>
    </shape>
</item>

<item android:state_pressed="false">
    <shape android:shape="oval">
        <solid android:color="@color/primary"/>
        <corners android:radius="3dp"/>
    </shape>
</item>

Answer 3

This worked for me:

Define a custom theme in the styles.xml

<style name="MyAppbarTheme" parent="@style/ThemeOverlay.AppCompat.Light">
    <item name="colorControlHighlight">@color/colorAccent</item>
</style>

Then apply this theme on the AppBarLayout or Toolbar

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/MyAppbarTheme" >

Answer 4

This was done using android 5.1 genymotion emulator

I didn't figure out your problem, but I just tried to create a toolbar the same as yours, but with removing some style that I don't have

here is my style

  <style name="ToolbarTheme"
      parent="Widget.AppCompat.Toolbar">
    <item name="actionMenuTextColor">#1bff3a</item>
    <item name="colorControlNormal">#FFF</item>
    <item name="colorControlActivated">#FFF</item>
    <item name="android:textColorPrimary">#FFF</item>
    <item name="actionButtonStyle">@style/Widget.AppCompat.ActionButton</item>
    <item name="selectableItemBackground">?android:selectableItemBackground</item>
    <item name="selectableItemBackgroundBorderless">?android:selectableItemBackground</item>
    <item name="colorControlHighlight">@color/accentColor</item>
  </style>

---

My Toolbar layout

 <android.support.v7.widget.Toolbar
      android:id="@+id/toolbar"
      android:layout_width="match_parent"
      android:layout_height="?attr/actionBarSize"
      android:background="?colorPrimary"
      app:theme="@style/ToolbarTheme"
      app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      />

---

My Menu

<item
      android:id="@+id/action_settings"
      android:title="@string/action_settings"
      android:icon="@drawable/abc_ic_clear_mtrl_alpha"
      app:showAsAction="always"
      />

---

The activity code

   Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
   toolbar.inflateMenu(R.menu.menu_home);

---

Screenshot of the result

---

Edit

after downloading the sample you provided in the question, the problem has nothing to do with standalone toolbar or actionbar (both have the same problem) when using AppBarLayout, the problem seems that the Ripple effect will be drawn on AppBarLayout instead of the View of the selected menu item, I'll record a video explaining it.

the video: AppBarLayout with Toolbar Video

I'll try to find a solution for this.

Answer 5

Chris Bane answer on the original issue:

https://code.google.com/p/android/issues/detail?id=176431

This is because by default ?attr/actionBarItemBackground is an unbounded RippleDrawable, which means that it projects/draws onto the next parent. In this case, this is the CollapsingToolbarLayout which you can't actually see.

There's not much we can do here from a library perspective. The 'workaround' is to set actionBarItemBackground to not be borderless:

<style name="Theme.Toolbar.Collapsing" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="actionBarItemBackground">?attr/selectableItemBackground</item>
</style>

<Toolbar
    ...
    android:theme="Theme.Toolbar.Collapsing" />

Answer 6

It looks like the ripple effect is still there but the ripple color has changed. I am not sure of what your problem is but this is what I see.

I suggest you remove

        <item name="colorControlHighlight">@color/accentColor</item>

from your code and run it again. If the ripples dont display (they should), change the accent color.