如果 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>
我有白色工具栏,其中菜单项显示为来自 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>