CODEWITHSUNDEEP
androidandroid-layoutandroid-actionbarmaterial-components-androidmaterial-components
Chandra Sekhar
Chandra Sekhar

Reputation: 19492

ActionBar background with MaterialComponents theme

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?

Upvotes: 9

Views: 9406

Answers (4)

hamthenormal
hamthenormal

Reputation: 921

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

Upvotes: 2

shtolik
shtolik

Reputation: 1368

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>

Upvotes: 16

Gabriele Mariotti
Gabriele Mariotti

Reputation: 363567

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>

enter image description here

Upvotes: 21

Edric
Edric

Reputation: 26720

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!

Upvotes: 0

Related Questions