如何更改MaterialToolbar按钮的背景颜色？

Question

如何在 MaterialToolbar 按钮被按下时改变其颜色？

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/main_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?android:attr/actionBarSize"
        app:menu="@menu/webview_toolbar"
        app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_up_24" />

截图按下状态是圆形的。

我尝试使用ColorStateList，但它不能与MaterialToolbar一起使用。但它可以与LinearLayout一起使用。

android:background="@drawable/selector_state_list"

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/pressed_toolbox_item"  android:state_pressed="true" />
</selector>

- Viewed

---

你想要改变背景颜色还是涟漪效果？ - ltp

@ltp 我想要更改溢出菜单按钮点击时显示的颜色。 - Viewed

Answer 1

如果你只想改变图标的颜色而不是移除圆形图案（它是可选择的项目背景边框，要摆脱它会更难，你需要玩溢出属性，看看这里，溢出菜单属性部分），那么你可以在你的片段/活动中使用以下代码：

mainToolbar.overflowIcon = ContextCompat.getDrawable(this, R.drawable.selector_state_list)

你的选择器应该包含两个可绘制对象（不是像你文件中那样的颜色），用于表示按下和非按下状态，具有不同的色调颜色。以防万一，如果你不知道如何生成矢量图：点击drawable文件夹，新建 -> 矢量资产 -> 剪贴艺术。

- PineapplePie

Answer 2

尝试这种方式，使用MaterialToolbar或（androidx和Material主题）更改按钮颜色：

<com.google.android.material.appbar.MaterialToolbar
    android:id="@+id/main_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/actionBarSize"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:navigationIcon="@drawable/ic_baseline_keyboard_arrow_up_24"/>

创建一个可绘制文件_state.xml，添加以下代码。这里有两个不同所需的图像。

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

   <item android:drawable="@drawable/ic_baseline_add_24"  android:state_pressed="true" />
   <item android:drawable="@drawable/ic_baseline_add_24_press" android:state_pressed="false" />

</selector>

在activity.java文件中，添加以下代码。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    
    MaterialToolbar toolbar = findViewById(R.id.main_toolbar);
    toolbar.setOverflowIcon(ContextCompat.getDrawable(this, R.drawable.state));
    setSupportActionBar(toolbar);
    Objects.requireNonNull(getSupportActionBar()).setDisplayShowHomeEnabled(true);
}

public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.webview_toolbar, menu);
    return true;
}

- Sayooj

---

不行，没有起作用。 - Viewed

@Viewed 我更新了我的答案，请尝试一下，看看是否有效。 - Sayooj

Answer 3

在您的应用程序主题中覆盖android:actionOverflowButtonStyle和actionOverflowButtonStyle，并使用自己的可绘制对象设置background和android:background样式属性：

<style name="Theme.App" parent="Theme.Material3.DynamicColors.DayNight">
       ...
     <item name="android:actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
     <item name="actionOverflowButtonStyle">@style/ActionButtonOverflowStyle</item>
      ...
</style>
            
<style name="ActionButtonOverflowStyle" parent="Widget.AppCompat.ActionButton.Overflow">  
   <!--To change the icon-->
   <item name="src">@drawable/....</item>    
   <item name="android:src">@drawable/....</item>

   <!--To change the icon background/ripple-->
   <item name="background">@drawable/...</item>
   <item name="android:background">@drawable/...</item>

  
</style>

- ltp

Answer 4

如果您正在使用矢量可绘制对象作为导航图标， 您可以直接将颜色设置到矢量中。

<vector
 ...
 android:tint="@color/design_default_color_primary_dark"> // if you are using themes then ?attr/colorControlNormal or whatever as you prefer

     <path />
</vector>

点击这里阅读Material App Bar

或者

如果您正在使用PNG作为导航图标，您可以使用以下"iconTint"属性：

    <item android:id="@+id/action_one"
    android:icon="@drawable/ic_action_icon"
    app:iconTint="@color/design_default_color_error"
    android:title="@string/action_one"
    app:showAsAction="ifRoom" />

为了遵循最佳实践，最好创建一个样式并将其应用为工具栏样式，或者直接在应用程序主题中设置如下。

    <style name="Theme.MyApptheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="iconTint">@color/purple_500</item>
    <item name="colorPrimary">@color/purple_200</item>
    .
    .
</style>

- Heshan Sandeepa