How do I change the background color of the ActionBar in the new MaterialComponents

Question

I'm using the new MaterialComponents and my app theme is:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="colorPrimary">@color/primaryColor</item>
    <item name="colorPrimaryDark">@color/primaryDarkColor</item>
    <item name="colorAccent">@color/secondaryColor</item>
</style>

how to change the background color of ActionBar

I know about this question but it's outdated and doesn't use MaterialComponents

I don't want to add Toolbar to every screen just to change the background color.

score 8 · Answer 1 · answered Feb 28 '19 at 20:47

You need use ThemeOverlay.MaterialComponents.ActionBar or ThemeOverlay.MaterialComponents.Dark.ActionBar depending on the background color.

  <style name="AppTheme" parent="Theme.MaterialComponents.Light">
        <item name="colorPrimary">@color/primaryColor</item>
        <item name="colorPrimaryDark">@color/primaryDarkColor</item>
        <item name="colorAccent">@color/secondaryColor</item>
        <item name="actionBarTheme">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
        <item name="android:background">#fff</item>
    </style>

score 3 · Answer 2 · answered Aug 20 '20 at 14:33

I know it's already too late.

According to Material Component. You have to add in your AppTheme:

<style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <!--  This will change ActionBar BackgroundColor to Black -->
    <item name="colorSurface">#000000</item>

    <!--  This will change ActionBar TextColor to White  -->
    <item name="colorOnSurface">#FFFFFF</item>
</style

NOTE: If you create your project from template with action bar, check your file: res/layout/app_bar_main.xml Make sure to delete: android:background="?attr/colorPrimary" in <androidx.appcompat.widget.Toolbar /> as shown below:

<com.google.android.material.appbar.AppBarLayout
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:theme="@style/AppTheme.AppBarOverlay">

   <androidx.appcompat.widget.Toolbar
       android:id="@+id/toolbar"
       android:layout_width="match_parent"
       android:layout_height="?attr/actionBarSize"
  android:background="?attr/colorPrimary" <<== MAKE SURE YOU DELETE THIS ONE LINE
       app:popupTheme="@style/AppTheme.PopupOverlay" />

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

Otherwise, the ActionBar BackgroundColor will depend on: ?attr/colorPrimary

score 3 · Answer 3 · answered Sep 24 '20 at 07:52

Since you are using a Theme.MaterialComponents.Light app theme the ActionBar background color is defined by default by the colorPrimary attribute.

Just use the actionBarTheme attribute to override the background color:

  <style name="AppTheme" parent="Theme.MaterialComponents.Light">
    <item name="actionBarTheme">@style/ThemeOverlay.ActionBar</item>
    ...
  </style>

with:

  <style name="ThemeOverlay.ActionBar" parent="">
    <item name="colorPrimary">@color/mycolor</item>
  </style>

You can also customize the background color using the actionBarStyle attribute in your app theme.

Something like:

  <style name="AppTheme" parent="Theme.MaterialComponents.*">
      <item name="actionBarStyle">@style/Custom.ActionBar</item>
      ...
  </style>

In this case you can use the background attribute:

  <style name="Custom.ActionBar" parent="Widget.MaterialComponents.Light.ActionBar.Solid">
    <item name="background">@color/mycolor</item>
  </style>

How do I change the background color of the ActionBar in the new MaterialComponents

3 Answers3