Search code examples
androidmaterial-designandroid-themeandroid-appbarlayoutandroid-dark-theme

Proper theme attribute for AppBar icons


I have vector icons in my AppBar. How do I ensure they get the correct color depending on the theme?

My application uses Theme.MaterialComponents.DayNight.NoActionBar with custom colorPrimary and colorSecondary.

Should the icons look like so:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorOnSurface">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or should they use colorControlNormal?

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorControlNormal">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or colorOnPrimarySurface? (This one makes it always white)

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:tint="?attr/colorOnPrimarySurface">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

or should the color be in the path?

<vector xmlns:android="http://schemas.android.com/apk/res/android" >
    <path android:fillColor="?attr/colorControlNormal (colorOnSurface)" android:pathData="..." />
</vector>

or should the color not be set here, but straight in the layout?

<vector xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#FFFFFF" android:pathData="..." />
</vector>

<com.google.android.material.appbar.AppBarLayout
        android:foregroundTint="?attr/colorControlNormal" (colorOnSurface)
        android:theme="@style/ThemeOverlay.MaterialComponents.ActionBar"
        app:popupTheme="@style/ThemeOverlay.MaterialComponents.Light">

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

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

Solution

  • Ok, I think I found the answer

    It should be colorControlNormal

    In menu/navigation icons:

    <vector
        ...
        android:tint="?attr/colorControlNormal">
        ...
    </vector>
    

    Source: https://material.io/develop/android/components/top-app-bars/#regular-top-app-bar