CODEWITHSUNDEEP
androidandroid-actionbarandroid-appcompatmaterial-design
user3184899
user3184899

Reputation: 3069

Change Material Design AppCompat ActionBar Color

I used to change AppCompat status bar color with actionBarStyle, and creating a style with a background which is the color I want.

Now, with Material Design AppCompat, this method doesn't work anymore.

Can you help me? Thanks.

Upvotes: 29

Views: 38097

Answers (5)

Minas Mina
Minas Mina

Reputation: 2107

Theme.MaterialComponents

<style name="Theme.EmojiBible" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
    <item name="actionBarTheme">@style/ThemeOverlay.Actionbar</item>
</style>

<style name="ThemeOverlay.Actionbar" parent="ThemeOverlay.MaterialComponents.Dark.ActionBar" >
    <item name="android:textColorPrimary">#f00</item>
</style>

Upvotes: 1

Suragch
Suragch

Reputation: 511576

The directions in the documentation to set up the app bar recommend setting the the theme in the Android Manifest file like this:

<application
    android:theme="@style/Theme.AppCompat.Light.NoActionBar"
    />

However, in my experience this overrode the colorPrimary style set up for the custom AppTheme. What worked for me was to define a custom theme like this:

<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

And then to use this theme in the AndroidManifest file.

<application
    android:theme="@style/AppTheme"
    />

After that setting the Toolbar background color in the activity based on colorPrimary worked fine.

<android.support.v7.widget.Toolbar
    android:id="@+id/my_toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

(Setting the ThemeOverlay with a dark theme ensures that the text is light.)

Upvotes: -1

Half Moon
Half Moon

Reputation: 589

   <style name="AppTheme" parent="Theme.AppCompat.Light">

        <item name="colorPrimary">@color/ColorPrimary</item>
        <item name="colorPrimaryDark">@color/ColorPrimaryDark</item>
        <!-- Customize your theme here. -->
    </style>

Also See: Making Custom ActionBar

Upvotes: -1

Justin
Justin

Reputation: 6594

In my case, @reVerse had a partial answer. I had to make some additional changes to get colorPrimary to work, because I was customizing other parts of the toolbar... specifically, the text color.

Here is my working styles.xml file, with comments indicating what I was doing wrong:

<!-- As @reVerse mentioned, you need to use colorPrimary instead of android:colorPrimary -->
<style name="MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <item name="colorPrimary">@color/my_toolbar_color</item>
</style>

<!-- I was incorrectly using @style/Theme.AppCompat.Light for the popupTheme attribute -->
<style name="MyToolbarStyle" parent="Widget.AppCompat.ActionBar">
    <item name="theme">@style/MyToolbarTextStyle</item>
    <item name="popupTheme">@style/ThemeOverlay.AppCompat.Light</item>
</style>

<!-- I was incorrectly using Them.AppCompat.Light for the parent here -->
<style name="MyToolbarTextStyle" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
    <item name="android:textColorPrimary">@color/my_toolbar_text_color</item>
</style>

So, when customizing more than the toolbar background color, you need to be sure to use one of the ThemeOverlay themes or, for whatever reason, colorPrimary will be ignored.

For completeness, here is the layout file I use for my toolbar, Toolbar.xml:

<android.support.v7.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schmeas.android.com/apk/res-auto"
    style="@style/MyToolbarStyle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />

Hopefully this helps someone!

Upvotes: 2

reVerse
reVerse

Reputation: 35254

There's a new attribute called colorPrimary which you can define in your Theme. This will give you ActionBar or Toolbar a solid color.

Following a little example:

<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- colorPrimary is used for the default action bar background -->
    <item name="colorPrimary">@color/my_action_bar_color</item>
</style>

Please note: It has to be only colorPrimary, not android:colorPrimary, in every values-folder except the values-v21 one.

You can read more about customizing the Color Palette on developer.android.com.

Upvotes: 89

Related Questions