Custom AppBar and Toolbar styles not applying in MaterialComponents Theme

I am trying to create a global custom style for the AppBar and Toolbar in my Android application using MaterialComponents. I want the styles to apply globally across all activities. However, the customizations are not being reflected. The background color and title text color are not visible.

Here are the details:

styles.xml:

<resources>
    <style name="GlobalButtonStyle" parent="Widget.AppCompat.Button">
        <item name="textAllCaps">false</item>
        <item name="android:backgroundTint">@color/dark_green</item>
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="CustomTextViewStyle" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/white</item>
    </style>

    <style name="CustomAppBarStyle" parent="Widget.MaterialComponents.AppBarLayout.Primary">
        <item name="backgroundTint">#000080</item>
    </style>

    <style name="CustomTooolbarStyle" parent="Widget.MaterialComponents.Toolbar">
        <item name="backgroundTint">#000080</item>
        <item name="titleTextColor">@color/white</item>
    </style>
</resources>

2. Applied styles in the theme (themes.xml):

<resources>
    <style name="Theme.EchoPoint" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="buttonStyle">@style/GlobalButtonStyle</item>
        <item name="android:windowBackground">@color/black</item>
        <item name="android:textViewStyle">@style/CustomTextViewStyle</item>
        <item name="appBarLayoutStyle">@style/CustomAppBarStyle</item>
        <item name="toolbarStyle">@style/CustomTooolbarStyle</item>
    </style>
</resources>

3. activity_main.xml layout:

<com.google.android.material.appbar.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/MainAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
</com.google.android.material.appbar.AppBarLayout>

Despite applying the appBarLayoutStyle and toolbarStyle in the theme, the background remains white, and the title text is not visible. I am visually impaired, and using Android TalkBack, I can confirm that the title text exists but is not visible (possibly due to the white background and white text).

What I have tried:

Confirmed that the styles are applied in the theme.
Ensured the parent styles inherit from MaterialComponents.
Used backgroundTint to set the background color.

Expected result:

The AppBar should have a background color of #000080, and the title text should be white.

Question:

What am I missing in my configuration? How can I ensure that the custom styles for AppBar and Toolbar are applied globally across all activities?

Additional context:

I am using the latest Material Components library and TalkBack for accessibility testing.

Solution

You are using wrong attribute for coloring toolbar's background i.e backgroundTint (it does its job , when you have any background , if you don't have any background , what will be tinted) . You have to use , <item name="android:background">#000080</item> ,attribute for changing the background color for both AppBarLayout and MaterialToolbar . Remember one thing , when you are overriding any attribute , you have to choose the correct attribute , otherwise result will be different . Always refer the material docs for specific widget when creating specific style for them (Especially for attributes).

Coming to your second question , if you are specifying custom style for widgets in your application theme like `

<style name="Theme.Essentials" parent="Theme.AppCompat.Light.NoActionBar">
     <item name="buttonStyle">@style/GlobalButtonStyle</item>
     <item name="android:windowBackground">@color/black</item>
     <item name="android:textViewStyle">@style/CustomTextViewStyle</item>
     <item name="toolbarStyle">@style/CustomTooolbarStyle</item>
     <item name="appBarLayoutStyle">@style/CustomAppBarStyle</item>"
    </style>

it is applied to all the same widgets you create all in your activities , untill and unless you specifically set the style in widget's style attribute to a different one like

<com.google.android.material.appbar.MaterialToolbar
        android:id="@+id/MainAppBar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        style="Enter Your Style" />

`. If you change your activity theme , then you have to take care how to get the same style.

One more important thing is Material Design 3 is the latest one right now , but you are using Material Design 2 . I have added links below , you can check there for more information. Material Design 3 , Top App Bar Styling In Material Design 2