No ripple on menu item if actionBar/Toolbar is white

Question

I have white toolbar with menu item showed as action that is a black vector asset from material icons. There is no ripple effect on menu item click because ripple effect is also white. If toolbar background is changed to other color e.g blue, ripple appears. How to change menu item ripple color so it will be visible on white background? I was trying to change colorControlHighlight in AppTheme but it hasn't changed menu item ripple color.

Style

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">  
    <item name="colorPrimary">#ffffff</item>     
</style>

Layout

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

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

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

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

</LinearLayout>

Menu

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <item
        android:id="@+id/menu_action_read_all"
        android:icon="@drawable/ic_done_all_black_24dp"
        android:title="@string/menu_notifications_read_all"
        app:showAsAction="ifRoom" />

</menu>

Activity

@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {      
    super.onCreate(savedInstanceState);    
    setSupportActionBar((Toolbar) findViewById(R.id.toolbar));     
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu_notifications, menu);
    return true;
}

Sanbenito

Answer 1

In your styles:

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

Apply this theme to your toolbar:

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:popupTheme="@style/MyToolbarTheme"/>

Result:

EDIT

For the action item:

<style name="MyAppBarLayoutTheme" parent="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="colorControlHighlight">@color/colorAccent</item>
</style>

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/MyAppBarLayoutTheme">

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

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

Result:

Franny

Thank you for answer but it doesn't work for menu items showed as actions. I've edited question. – Sanbenito

It works like a charm:) But now there is another problem, if you don't mind. I have also actionMode in different color than toolbar with its menu items. Is it possible to specify different ripple color for action mode items? – Sanbenito

I'm not sure you can dynamically change a theme. – Franny

I see, there is already such question without answers. #29820678 – Sanbenito

@AleksanderMielczarek, will have a look. – Franny

"Edit" notion worked for my BottomNavigationView. Thanks a lot! – Sorce

Answer 2

Even I faced similar issue due to AppTheme. I was using Theme.MaterialComponents.NoActionBar as default theme for App and only for toolbar the ripple effect was not working. However I solved it using app:theme.

Please try adding a app:theme="@style/Theme.AppCompat.Light.NoActionBar" to your toolbar. This is test with androidx.appcompat.widget.Toolbar it is working for me.

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="@android:color/white"
    app:layout_collapseMode="pin"
    android:elevation="4dp"
    app:theme="@style/Theme.AppCompat.Light.NoActionBar"
    android:stateListAnimator="@animator/appbar_elevation"
    tools:targetApi="lollipop">

If your view doesn't ripple by default then, all you have to do is add android:background="?attr/selectableItemBackground" to your view to get that ripple/touch effect.

<ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:background="?attr/selectableItemBackground"
            android:contentDescription="@null"
            android:src="@mipmap/ic_launcher" />

Devolve

Answer 3

path : drawable/action_item_ripple

action_item_ripple.xml

<?xml version="1.0" encoding="utf-8"?>
<ripple 
   xmlns:android="http://schemas.android.com/apk/res/android"
   android:color="@android:color/white"
   android:radius="20dp">
</ripple>

use

<com.google.android.material.appbar.AppBarLayout 
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="wrap_content"
android:theme="@style/AppTheme.AppBarOverlay">

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:popupTheme="@style/AppTheme.PopupOverlay"
    app:titleTextAppearance="@style/TextAppearance.Widget.Event.Toolbar.Title"
    app:titleTextColor="@android:color/white">


    <TextView
        android:id="@+id/textViewTitleToolbar"
        style="@style/TextAppearance.AppCompat.Widget.ActionBar.Title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/app_name"
        android:textColor="@android:color/white" />

    <androidx.appcompat.widget.AppCompatImageButton
        android:id="@+id/imageViewToolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="start"
        android:background="@drawable/action_item_ripple"
        android:src="@android:drawable/ic_delete"
        android:visibility="invisible" />
</androidx.appcompat.widget.Toolbar>

Zelaya