如何更改工具栏中图标的颜色？

Question

我正在尝试使用 Material Components 库在我的应用中实现 Material Design。我希望我的图标和后退箭头为白色，但我无法更改它们的颜色。我的代码哪里出错了？

我尝试在我的样式“NITraffic.Toolbar”中添加以下属性，但没有效果：

<item name="subtitleTextColor">@color/color_on_primary</item>
        <item name="android:colorControlNormal">@color/color_on_primary</item>
        <item name="android:textColorSecondary">@color/color_on_primary</item>

我在 theme.xml 中的顶级主题：

    <style name="NITrafficTheme.DayNight" parent="Base.NITrafficTheme"/>

    <style name="Base.NITrafficTheme" parent="Base.MaterialThemeBuilder">

        <!--Material color attributes -->
        <item name="colorPrimary">@color/color_primary</item>
        <item name="colorPrimaryVariant">@color/color_primary_variant</item>
        <item name="colorSecondary">@color/color_secondary</item>
        <item name="colorSecondaryVariant">@color/color_secondary_variant</item>

        <item name="android:colorBackground">@color/color_background</item>
        <item name="colorSurface">@color/color_surface</item>
        <item name="colorError">@color/color_error</item>

        <item name="colorOnPrimary">@color/color_on_primary</item>
        <item name="colorOnSecondary">@color/color_on_secondary</item>
        <item name="colorOnBackground">@color/color_on_background</item>
        <item name="colorOnSurface">@color/color_on_surface</item>
        <item name="colorOnError">@color/color_on_error</item>

....

        <!--Component styles-->
        <item name="materialAlertDialogTheme">@style/ThemeOverlay.MaterialComponents.Dialog.Alert</item>
        <item name="bottomSheetDialogTheme">@style/NITraffic.BottomSheetDialog</item>
        <item name="toolbarStyle">@style/NITraffic.Toolbar</item>
        <item name="bottomNavigationStyle">@style/NITraffic.BottomNavigation</item>
    </style>

    <style name="Base.MaterialThemeBuilder" parent="Theme.MaterialComponents.DayNight.NoActionBar">

        <item name="android:statusBarColor">?colorPrimary</item>
        <item name="android:windowLightStatusBar" tools:ignore="NewApi">false</item>
        <item name="android:navigationBarColor">?colorPrimary</item>
        <item name="android:windowLightNavigationBar" tools:ignore="NewApi">false</item>
        <item name="android:navigationBarDividerColor" tools:ignore="NewApi">?colorPrimary</item>

        <!--Remap legacy AppCompat attributes to MaterialComponent attributes-->
        <item name="colorPrimaryDark">?colorPrimaryVariant</item>
        <item name="colorAccent">?colorSecondary</item>
    </style>

我的styles.xml 文件：

    <style name="NITraffic.Toolbar" parent="@style/Widget.MaterialComponents.Toolbar.Primary">
        <item name="subtitleTextColor">@color/color_on_primary</item>
        <item name="android:colorControlNormal">@color/color_on_primary</item>
        <item name="android:textColorSecondary">@color/color_on_primary</item>
    </style>

活动中的我的工具栏：

    <com.google.android.material.appbar.AppBarLayout
            android:id="@+id/app_bar_layout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent">

        <androidx.appcompat.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_height="wrap_content"
                android:layout_width="match_parent"
        />

    </com.google.android.material.appbar.AppBarLayout>

Answer 1

我正在使用下面的主题，我在工具栏中得到白色的后退图标

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorControlNormal">@android:color/white</item>
    </style>


</resources>

您需要在主题中的colorControlNormal下设置白色。

Answer 2

您可以像这样设置工具栏导航图标： 工具栏工具栏 = binding.toolBar; toolbar.setNavigationIcon(R.drawable.baseline_arrow_back_white_24);