Why colors are not applying in android material3?

Question

I have recently familiarized myself with Material3 during my android learning journey. I have successfully defined colors in my colors.xml file, however, I am facing issues with the app bar, toolbar, and FAB not applying those defined colors. Additionally, I am using the Theme.Material3.Light.NoActionBar theme, but the icons in the toolbar are appearing in black, whereas I want them to be white. Below is the code snippet that I am currently working with:

In short, can't see any colors in my app that are defined in colors.xml

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- Primary Colors -->
    <color name="colorPrimary">#2BAD7D</color>
    <color name="colorPrimaryVariant">#239366</color>
    <color name="colorOnPrimary">#FFFFFF</color>

    <!-- Secondary Colors -->
    <color name="colorSecondary">#FFFFFF</color>
    <color name="colorSecondaryVariant">#F2F2F2</color>
    <color name="colorOnSecondary">#2BAD7D</color>

    <!-- Background Colors -->
    <color name="colorBackground">#FFFFFF</color>
    <color name="colorOnBackground">#737373</color>

    <!-- Surface Colors -->
    <color name="colorSurface">#F2F2F2</color>
    <color name="colorOnSurface">#737373</color>

    <!-- Error Colors -->
    <color name="colorError">#B00020</color>
    <color name="colorOnError">#FFFFFF</color>

    <!-- On-Surface Colors -->
    <color name="colorHighEmphasis">#1B1B1B</color>
    <color name="colorMediumEmphasis">#737373</color>
    <color name="colorDisabled">#C5C5C5</color>
</resources>

activity_main.xml

 <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/AppBarLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true">
        <com.google.android.material.appbar.MaterialToolbar
            android:id="@+id/ToolBar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:title="@string/app_name"
            android:titleTextAppearance="@style/ToolbarTitleAppearance"/>
        <com.google.android.material.tabs.TabLayout
            android:id="@+id/TabLayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:tabIndicatorColor="@color/tabIndicator"
            app:tabTextAppearance="@style/TabLayoutStyle"
            app:tabTextColor="@color/tabTextColor"
            app:tabSelectedTextColor="@color/tabSelectedTextColor"
            app:tabGravity="fill"
            app:tabInlineLabel="true"
            app:tabIconTint="@drawable/x_tab_icon_opacity"
            android:contentDescription="@string/homeTabLayout"/>
    </com.google.android.material.appbar.AppBarLayout>
 
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentBottom="true"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:contentDescription="@string/homeFAB"
        android:src="@drawable/x_icon_message"
        tools:ignore="ImageContrastCheck"/>

You show that you have defined various colors, but have you put them in a theme? — Tenfour04, Apr 29 '23 at 05:55

score 0 · Answer 1 · answered Apr 29 '23 at 08:28

Maybe you haven't apply the material 3 theme into your layout.

Put material 3 theme in your activity_main: android:theme="@style/Material3Theme"

and in your values/themes create Material3Theme with the color that you want:

 <style name="Material3Theme" parent="Theme.Material3.Light.NoActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/...</item>
        <item name="colorPrimaryVariant">@color/...</item>
        <item name="colorOnPrimary">@color/...</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/...</item>
        <item name="colorSecondaryVariant">@color/...</item>
        <item name="colorOnSecondary">@color/...</item>
        <!-- Status bar color. -->
        <!--        <item name="android:statusBarColor">?attr/colorPrimary</item>-->
        <item name="android:statusBarColor">@color/...</item>
        <!-- Customize your theme here. -->
    </style>

score 0 · Answer 2 · answered May 18 '23 at 00:54

This partially answers your question.

For the FloatingActionButton black icon; it can be solved by using app:tint="@null" to get the intended color applied:

<com.google.android.material.floatingactionbutton.FloatingActionButton
    app:tint="@null"
    ...

Regarding the Toolbar, it's not clear which icons on the Toolbar that you referred to.

Why colors are not applying in android material3?

2 Answers2