ActionBar background with MaterialComponents theme

Question

I want to customize my ActionBar. My Theme looks as below:

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@style/ThemeOverlay.MaterialComponents.ActionBar">
    <item name="background">@drawable/actionBarBackground</item>
</style>

In values folder:

<drawable name="actionBarBackground">#FFFFFFFF</drawable>

In values-night folder:

<drawable name="actionBarBackground">#FF000000</drawable>

Not sure why my ActionBar background colour doesn't change accordingly. I have tried to change my theme in different other ways as well but nothing works. Here are my other tries:

Instead of actionBarStyle, I used actionBarTheme.

<item name="actionBarTheme">@style/MyActionBar</item>

I also tried using colorPrimary.

<item name="colorPrimary">@color/actionBarBackground</item>

Am I missing something?

Terrilynterrine

That's probably because you've declared the colour as a drawable, which are not the same concepts. – Embank

I have also tried with colors, but still same problem. – Terrilynterrine

Are you using the ActionBar or a Toolbar? – Mallen

My Activity's layout file has nothing. As my theme is Theme.MaterialComponents.DayNight, it includes an ActionBar by default. – Terrilynterrine

Answer 1

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

  <style name="AppThemeActionBar" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">@color/mycolor</item>
  </style>

where mycolor is define in res/values/colors.xml

<resources>
  <color name="mycolor">#xxxxxx</color>
  ...
</resources>

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

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

where:

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

Otherwise you can use the actionBarTheme attribute to override the background color:

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

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

Mallen

This is not clear, what's the difference between using actionBarStyle and actionBarTheme? – Build

Thanks, your 2nd suggestion overriding Widget.MaterialComponents.Light.ActionBar.Solid worked for me. – Copyist

@David: both are attributes but actionBarStyle is a style where you can customize some attributes like the background, the title text style.. while the actionBarTheme is a theme overlay where you can override some values defined in the app theme, like the colorPrimary but only for a specific widget, in this case the ActionBar. – Mallen

Apparently, if your theme inherits from Material, actionBarStyle is completely ignored and the ONLY way to style the action bar is via actionBarTheme. Wasted ANOTHER half day on this. – Hambrick

Thank for your answer, and how to change color of title and menu of actionbar, I'm using MaterialComponents – Soar

This the only advice which works for me with Theme.MaterialComponents.DayNight theme. I use Widget.MaterialComponents.ActionBar.Primary as parent value for my action bar. – Keon

Answer 2

For me neither setting background nor colorPrimary has helped. Apparently this is the intended behavior, as according to dark theme guidance for components that use a large portion of a screen. They should use colorSurface for their background instead of colorPrimary or colorAccent. AppBarLayouts, Toolbars, and ActionBars now default to their Surface styles in dark theme.

So I had to define colorSurface attribute for my theme in order for it to work.

<item name="colorSurface">@color/my_color_primary_dark</item>

Fariss

thank you so much, you're awesome, this solution works for me, as for light primary color is picked up, but for dark, no solution was working, even with actionbarStyle or actionBarTheme, – Ftlb

This is a nice short way of achieving it; but please bear in mind that this also changes the colour of switches, at least when using ` parent="Theme.MaterialComponents.DayNight.DarkActionBar"`. – Sackey

Answer 3

I'm on the latest stable of MDC, and this is how it works here.

<style name="AppTheme" parent="Theme.MaterialComponents.DayNight">
    <item name="colorPrimary">@color/purple_500</item>
    <item name="actionBarStyle">@style/Widget.MaterialComponents.ActionBar.PrimarySurface</item>
</style>

If you want the app bar to be the same color as your color surface, change @style/Widget.MaterialComponents.ActionBar.PrimarySurface to @style/Widget.MaterialComponents.ActionBar.Surface

Tumultuous

Thank you, but how to change the color of title and menu of actionbar – Soar

Answer 4

This is most likely because that's not the right way to declare colours in an app.

Typically, colour resources are located in one-singular file: colors.xml

This XML file is typically located in your app's resources folder (usually res/values/colors.xml)

They are then declared with a <resources> element as the root of the XML file and your colour resources (as defined with the <color> element):

<!-- Note: The XML header (aka <?xml version="1.0" ...?>) is optional -->
<resources>
    <color name="your_color_res">#FFFFFF</color>
    <!-- Your other colour resources go here -->
</resources>

You can then specify qualifiers for your colour resources by creating the same colors.xml in your app's resources with the following file format:

res/values-<qualifier>/colors.xml

These colours can then be referenced with the @color/ prefix in XML files or with R.color.* in your app's Java/Kotlin code.

Hope this helps!

Embank