我应该如何使用 material 设计更改顶部工具栏中图标和标题的颜色？ -NoActionBar 主题 - Android Material 设计

Question

我开始使用 material 设计，但不熟悉指南（我正在遵循 https://material.io/components/app-bars-top/android#contextual-action-bar 的教程）。在按照示例进行操作时，与其他图标（后退导航和编辑图标）相比，我的标题和它们的默认溢出菜单图标（3 个垂直点）出现了不同的白色阴影，我不知道这是不是这样应该是，但我不这么认为。此外，如果我在 xml 文件中使用 `android:tint="?attr/colorControlNormal">' 作为矢量，就像它们在教程中显示的那样，它们会变成浅色，我希望它接近黑色，这样它在我的工具栏背景下看起来更好。我无法将其默认溢出菜单图标（3 个垂直点）的颜色从白色编辑。

我的解决方案：我制作了自己的更多选项图标（3 个垂直点）将从 colors.xml 文件中获取颜色，然后向更多选项图标添加一个微调器。

这是默认 material 设计更多选项图标（3 个垂直点）左侧的浅色主题图标的屏幕截图。此处未显示标题，但这对我来说不是问题。：

我的主题：

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">

这是我有工具栏的 activity：

<androidx.coordinatorlayout.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/colorPrimary"
tools:context=".ui.main.view.MainActivity">

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:liftOnScroll="true">

    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/topAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:titleTextColor="?attr/colorControlNormal"
        app:menu="@menu/top_app_bar"
        app:navigationIcon="@drawable/ic_navigation_24dp"
        app:layout_scrollFlags="scroll|enterAlways|snap"
        style="@style/Widget.MaterialComponents.Toolbar.Primary" />

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

<androidx.recyclerview.widget.RecyclerView
    android:id="@+id/recyclerView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:visibility="gone" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

这是我的 top_app_bar 菜单：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">

<item
    android:id="@+id/edit"
    android:icon="@drawable/ic_edit_24dp"
    android:title="@string/appbar_edit"
    app:showAsAction="ifRoom"/>

<item
    android:id="more_options"
    android:icon="@drawable/ic_more_options_24dp"
    android:title="More Options"
    app:showAsAction="ifRoom"/>

<item
    android:id="@+id/place_holder"
    android:title="@string/appbar_more_place_holder"
    app:showAsAction="never" />

这是我的 'edit' 矢量项目：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal"
    android:alpha="0.8">
    <path
        android:fillColor="#FF000000"
        android:pathData="M3,17.25V21h3.75L17.81,9.94l-3.75,-3.75L3,17.25zM20.71,7.04c0.39,-0.39 0.39,-1.02 0,-1.41l-2.34,-2.34c-0.39,-0.39 -1.02,-0.39 -1.41,0l-1.83,1.83 3.75,3.75 1.83,-1.83z"/>
</vector>

是否有使用 material 设计更改图标颜色的更好方法？另外，这些应该有特定的颜色吗（我感觉标准是黑色或白色，没有其他颜色）？

Answer 1

此解决方案仅适用于 Android 版本的 Lollipop 及更高版本，这很可能没问题。在此范围之外的设备上，图标将只是不同的颜色。

制作您自己的更多选项图标并在您的 activity kotlin/java class 中以编程方式设置图标：topAppBar.overflowIcon = getDrawable(R.drawable.ic_more_options_24dp)

正如@Mohammed Abdul Bari 所说，这种方法的一个缺点是，“...当项目变大时，这种方法维护起来会变得乏味。”

我应该如何使用 material 设计更改顶部工具栏中图标和标题的颜色？ -NoActionBar 主题 - Android Material 设计

How should I change the color of the icons and title in the top toolbar using material design? -NoActionBar theme - Android Material Design

android

toolbar

material-design

android-toolbar