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>
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