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/2015/03/07/styling-material-toolbar-in-android/

Check the normal toolbar in the below screenshot, the ripple effect selector is gone when using the standalone toolbar.

here is my style:

 <style name="ToolbarTheme" parent="Widget.AppCompat.Toolbar">
        <item name="actionMenuTextColor">@color/green</item>
        <item name="drawerArrowStyle">@style/DrawerArrowToggle</item>
        <item name="colorControlNormal">@color/white</item>
        <item name="colorControlActivated">@color/white</item>
        <item name="android:textColorPrimary">@color/white</item>
        <item name="titleTextAppearance">@style/ActionBar.TitleText</item>
        <item name="android:actionOverflowButtonStyle">@style/MoreActionButton</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>

EDIT: After isolating the issue from my code I was able to reproduce the issue and it seems it is related to the new support design library. And here is the test code that has the issue:

TestToolbar.zip

Unimposing

What is your problem? you are not getting the selectors? – Dewie

I don't get the selectors of the Toolbar items, that green ripple effect behind he search item on the above picture, it is gone when I use standalone toolbar instead of a normal toolbar. – Unimposing

It might be an issue, so I filed a bug for the library: code.google.com/p/android/issues/detail?id=176431 – Unimposing

@MahdiHijazi thanks for the bug filled. I do not agree with the Google team that it "works as intended" because if it did we wouldn't be needing workarounds. But the transparent background worked fine. – Coleorhiza

Answer 1

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.

Lillianalillie

Answer 2

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.

Crime

Answer 3

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.

Sand

Answer 4

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" >

Sneaker

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" />

Unimposing

Answer 6

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>

Minx