如果 actionBar/Toolbar 为白色,则菜单项上没有波纹

No ripple on menu item if actionBar/Toolbar is white

我有白色工具栏,其中菜单项显示为来自 material 图标的黑色矢量资产的操作。菜单项点击没有波纹效果,因为波纹效果也是白色的。如果工具栏背景更改为其他颜色,例如蓝色,则会出现波纹。如何更改菜单项波纹颜色以使其在白色背景上可见?我试图在 AppTheme 中更改 colorControlHighlight 但它没有更改菜单项波纹颜色。

风格

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

布局

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

菜单

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

你的风格:

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

将此主题应用到您的工具栏:

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

结果:

编辑

对于行动项目:

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

结果:

由于 AppTheme,我什至遇到了类似的问题。我使用 Theme.MaterialComponents.NoActionBar 作为 App 的默认主题,并且仅对于工具栏,涟漪效果不起作用。但是我使用 app:theme.

解决了它

请尝试将 app:theme="@style/Theme.AppCompat.Light.NoActionBar" 添加到您的工具栏。这是 androidx.appcompat.widget.Toolbar 的测试,对我有用。

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

如果您的视图在默认情况下没有波纹,那么您所要做的就是将 android:background="?attr/selectableItemBackground" 添加到您的视图中以获得 ripple/touch 效果。

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

路径: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>