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;
}

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:

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

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>

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