How do I change the background color of the ActionBar of an ActionBarActivity using XML?

Asked 6/11, 2011 at 1:53 Answered 15/4, 2021 at 16:27

Solved android android-actionbar android-theme android-styles

302

Details:

I'm extending ActionBarActivity.
Eclipse and SDK fully patched as of 2011-11-06.

<uses-sdk android:minSdkVersion="4" android:targetSdkVersion="14" />

Deployed to Samsung device with Android 2.3.3
Application has android:theme="@android:style/Theme.Light"

Issue: application is light, but ActionBar is blue with grey icons, hardly visible against the blue background color. I also want the ActionBar to be light, so they grey icons are more visible.

I've tried modifying the styles but to no avail.
I'm probably missing something trivial.

How do I change the background color of the ActionBar of an ActionBarActivity using XML ?

Gehman answered 6/11, 2011 at 1:53 Comment(3)

Closing this old chestnut. Points to Sannidhi, by popular demand, however the replies to this question span quite a few versions of Android, and in my context David Millers suggestion to use SherlockActionBar was most relevant. – Gehman 24/6, 2013 at 4:55

Little tidbit for others: If you make the first element in your XML view the same background as your ActionBar (in our case, white), the ActionBar turns grey. – Lactate 31/12, 2019 at 20:29

When you think about, TitleBar and ActionBar dont offer anything special. They are more like a nuisance, especially when you dont know them. A.better alternative would be to hide them and design your own title bar. You can add your own widgets with Views and drawables. As Title bar provides no widgets. And action bar can only have one drop down list, for all menuItems.Even alot of Apps have ditched Action Bar in favour of their own. – Multiplication 7/2, 2020 at 5:14

539

As per documentation - "You can control the behaviors and visibility of the action bar with the ActionBar APIs, which were added in Android 3.0 (API level 11)."

So, ActionBar will not work for your target environment which is at API level 10 (Android 2.3.3).

Just in case, if you target for minimum API level 11 , you can change ActionBar's background color by defining custom style, as:

<resources>
    <style name="MyTheme" parent="@android:style/Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/MyActionBar</item>
    </style>

    <style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
        <item name="android:background">ANY_HEX_COLOR_CODE</item>
    </style>
</resources>

And, set "MyTheme" as theme for application / activity.

Calica answered 12/2, 2012 at 14:51 Comment(11)

@AlexanderFragotsis use <item name="android:textColor">@color/my_color</item>. – Salta 7/1, 2013 at 19:54

The same approach should be used if you are using ActionBarCompat library. The only difference is that you should change actionBarStyle (without android: prefix) item to define how actionbar will look on pre-3.0 Android devices – Kingbolt 14/11, 2013 at 7:55

Is there any possibility to, instead of putting the color's HEX code, reference a @android:color or even a custom color defined in colors.xml? I've tried it with no success. – Stutz 30/7, 2014 at 22:33

@Stutz use <item name="android:background">@color/black</item> – Conciliar 19/11, 2014 at 6:0

Actionbar behavior can be changed for api < 11. see #8025206 – Fike 6/2, 2015 at 10:22

Can you help https://mcmap.net/q/76331/-custom-theme-not-applying-in-fragmentactivity – Marketa 19/2, 2015 at 14:44

I'm not able to change text action bar text color using "<item name="android:textColor">@color/my_color</item>" – Trier 5/3, 2015 at 15:10

is it possible to set the color directly in "MyTheme" without creating the additional style tag? – Indict 14/1, 2016 at 12:42

This didn't work for me with android:background tag but when I left out the android tag and put just <item name="background"> the color changed for all platforms. – Teleplay 28/1, 2016 at 0:15

<item name="actionBarStyle"> and <item name="background"> pair works for me. I'm using com.android.support:appcompat-v7:25.4.0. – Loriloria 1/5, 2018 at 8:32

It works, but now this changes my preferences screen background to the same color – Mattiematting 27/11, 2020 at 10:28

219

Try this

ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new ColorDrawable("COLOR"));

Trapeze answered 6/11, 2011 at 2:18 Comment(9)

11-06 10:53:16.985: E/AndroidRuntime(16956): java.lang.NoSuchMethodError: com.acme.myActivity.getActionBar – Gehman 6/11, 2011 at 9:55

@Trapeze do you know how can I get a contextual action bar? – Lemaceon 1/9, 2012 at 18:23

afaik, the support library itself doesn't have the ActionBar, for that you wil have to include the SherlockActionBar. – Midwifery 2/10, 2012 at 15:53

maybe this is strange but in my case bar.setBackgroundDrawable(new ColorDrawable(Color.BLUE)); change the action bar color to grey. These happens also if put other color, like Color.RED, Color.GREEN and so on... Does anybody have the same problem, or know the cause of this issue? I use a Nexus S device – Thrave 16/10, 2012 at 12:59

What if I want to align text to center?? <item name="android:textAlignment">??</item> what could be the attribute at "??" – Righthanded 9/1, 2014 at 7:56

https://mcmap.net/q/76332/-change-actionbar-color-programmatically-more-than-once This post seems to fix the issue where the action bar color goes grey. – Punctual 30/1, 2014 at 14:41

in order to add a Hex color simply use Color.parseColor("#7bb42c"). – Fillbert 19/3, 2014 at 19:37

@KennyWest Please do not edit an answer with code modifications, they should be comments – Gainful 19/3, 2014 at 19:44

@KennyWest bar.setBackgroundDrawable(new ColorDrawable(Color.GREEN)); NULLPOINTEREXCEPTION? – Totality 1/11, 2015 at 20:56

127

try this:

ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000ff")));

Porridge answered 23/6, 2013 at 14:40 Comment(4)

How does this fit into the rest of the code? just curious where to actually add this – Sobel 3/11, 2014 at 22:50

I have the exact question as @Sobel . Where do you add this? I tried it in onCreate but it gave a NullPointerException Edit: This is the code I added to restoreActionBar ActionBar actionBar = getSupportActionBar(); actionBar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#E5E4E2"))); – Selfstyled 15/1, 2015 at 20:15

Add it your Activity's onCreate method. – Unstopped 30/7, 2015 at 11:17

use getSupportActionBar() instad of getActionBar() – Dialectics 27/10, 2017 at 7:43

Use this - http://jgilfelt.github.io/android-actionbarstylegenerator/

Its an amazing tool that lets you customize your actionbar with a live preview.

I tried the earlier answers but always had problems with changing other colors like the tabs and letters and spent hours tweaking stuff. This tool helped me get my design done in just a couple of minutes.

Here's a screenshot of the tool

All the best! :)

Nonaligned answered 28/1, 2014 at 23:22 Comment(3)

how do I set my app to use the files once they are added into my app? – Britishism 16/2, 2015 at 8:57

In the context of the screenshot above (named example), after pasting the generated res folder, you should have a new style @style/Theme.Example. In AndroidManifest.xml, set <application android:theme="@style/Theme.example">. Should work :) – Nonaligned 17/2, 2015 at 12:13

deprecated. unfortunately – Nereen 23/12, 2015 at 20:19

I had the same problem, where my Action Bar would turn grey when I entered that code. Chances are your original style sheet looked like this:

<style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar">
    <!-- API 14 theme customizations can go here. -->
</style>

The "DarkActionBar" was what was keeping your Action Bar grey. I changed it to this, and it worked:

<style name="AppBaseTheme" parent="android:Theme.Holo.Light">
    <!-- API 14 theme customizations can go here. -->
    <item name="android:actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar" parent="@android:style/Widget.Holo.Light.ActionBar">
    <item name="android:background">#2aa4cd</item>
    <item name="android:titleTextStyle">@style/Theme.MyAppTheme.ActionBar.TitleTextStyle</item>
</style>        

<style name="Theme.MyAppTheme.ActionBar.TitleTextStyle" parent="android:style/TextAppearance.Holo.Widget.ActionBar.Title">
    <item name="android:textColor">#FFFFFF</item>
</style>

I also threw in how to edit the text color. Also, no need to change anything surrounding the resources.

-Warren

Holds answered 13/5, 2013 at 0:43 Comment(0)

Behavior of Actionbar can also be changed in APIs < 11

See the Android Official Documentation for reference

I am building an app with minSdkVersion = "9" and targetSdkVersion = "21" I changed the color of action bar and it works fine with API level 9

Here is an xml

res/values/themes.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!-- the theme applied to the application or activity -->
    <style name="CustomActionBarTheme"
           parent="@style/Theme.AppCompat.Light.DarkActionBar">
        <item name="android:actionBarStyle">@style/MyActionBar</item>

        <!-- Support library compatibility -->
        <item name="actionBarStyle">@style/MyActionBar</item>
    </style>

    <!-- ActionBar styles -->
    <style name="MyActionBar"
           parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
        <item name="android:background">@color/actionbar_background</item>

        <!-- Support library compatibility -->
        <item name="background">@color/actionbar_background</item>
    </style>
</resources>

and set the color of actionbar you want

res/values/colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="actionbar_background">#fff</color> //write the color you want here
</resources>

Actionbar color can also be defined in .class file, the snippet is

ActionBar bar = getActionBar();
bar.setBackgroundDrawable(new ColorDrawable(Color.parseColor("#0000ff")));

but this will not work with the API < 11, so styling the actionbar in xml is only way for API < 11

Fike answered 6/11, 2011 at 1:53 Comment(3)

Can you help https://mcmap.net/q/76331/-custom-theme-not-applying-in-fragmentactivity – Marketa 19/2, 2015 at 14:40

The snippet doesn't work in my app when used in a fragment. I changed it for ActionBar bar = getActivity().getActionBar(); . As soon as fragment is about to be opened it crashes. – Manifestative 15/4, 2015 at 22:56

Found the problem, it works with : ActionBar actionBar = getSupportActionBar(); – Manifestative 15/4, 2015 at 23:20

For Kotlin users - I tried it and this works with light mode and dark mode -

    getSupportActionBar()?.setBackgroundDrawable(
             ColorDrawable(Color.parseColor("#003459"))
        
)

Add this in onCreate like this -

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        getSupportActionBar()?.setBackgroundDrawable(
             ColorDrawable(Color.parseColor("#003459"))
        )

Chandelle answered 8/6, 2016 at 11:29 Comment(1)

Would be better to use resources to get the color rather than having it as a text. getSupportActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(android.R.color.black))); – Peder 29/9, 2017 at 8:17

On the Nexus 4 people this seems to make the color go grey.

ActionBar bar = getActionBar(); // or MainActivity.getInstance().getActionBar()
bar.setBackgroundDrawable(new ColorDrawable(0xff00DDED));
bar.setDisplayShowTitleEnabled(false);  // required to force redraw, without, gray color
bar.setDisplayShowTitleEnabled(true);

(all credit to this post, but it is buried in the comments, so I wanted to surface it here) https://mcmap.net/q/76332/-change-actionbar-color-programmatically-more-than-once

Windlass answered 19/5, 2014 at 3:43 Comment(1)

After spending countless hours trying to figure out WTH was wrong, this answer helped me. – Twedy 11/6, 2014 at 2:51

try one line code :

getActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.MainColor)));

Kruse answered 4/2, 2015 at 10:54 Comment(3)

My app crashes with this answer. To make it work in a fragment I changed it like this : getActivity().getActionBar().setBackgroundDrawable(new ColorDrawable(getActivity().getResources().getColor(R.color.col_nar))); , also tried getActivity().getActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.col_nar))); . It crashes as soon as the fragment is opened. – Manifestative 15/4, 2015 at 22:53

Found the problem, it works with : ActionBar actionBar = getSupportActionBar(); – Manifestative 15/4, 2015 at 23:19

the answer is for the activity. If you want to use it with fragment then you have to use getActivity().getActionBar() for fragments – Kruse 16/4, 2015 at 8:45

2021: Kotlin oneliner with no deprecation:

supportActionBar?.setBackgroundDrawable(ColorDrawable(ContextCompat.getColor(this,R.color.red)))

Simply put it into onCreate and change the color depending on your needs

Biretta answered 15/4, 2021 at 16:27 Comment(0)

This is how you can change the color of Action Bar.

import android.app.Activity;
import android.content.Context;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;


public class ActivityUtils {

public static void setActionBarColor(AppCompatActivity appCompatActivity, int colorId){
    ActionBar actionBar = appCompatActivity.getSupportActionBar();
    ColorDrawable colorDrawable = new ColorDrawable(getColor(appCompatActivity, colorId));
    actionBar.setBackgroundDrawable(colorDrawable);
}

public static final int getColor(Context context, int id) {
    final int version = Build.VERSION.SDK_INT;
    if (version >= 23) {
        return ContextCompat.getColor(context, id);
    } else {
        return context.getResources().getColor(id);
    }
}
}

From your MainActivity.java change the action bar color like this

    ActivityUtils.setActionBarColor(this, R.color.green_00c1c1);

Mathia answered 25/5, 2017 at 9:0 Comment(0)

When you are Extending Activity use following Code

ActionBar actionbar = getActionBar();
actionbar.setBackgroundDrawable(new ColorDrawable("color"));

When you are Extending AppCompatActivity use following Code

ActionBar actionbar = getSupportActionBar();
actionbar.setBackgroundDrawable(new ColorDrawable("color"));

Thurman answered 14/3, 2018 at 6:0 Comment(0)

Sometimes this option throws NullPointerException

ActionBar actionbar = getActionBar(); actionbar.setBackgroundDrawable(new ColorDrawable("color"));

But this option is worked for me. So you can try this.

getSupportActionBar().setBackgroundDrawable(new ColorDrawable(Color.parseColor("#FFFFFF")));

Happy Coding

Comparable answered 4/2, 2020 at 3:54 Comment(0)

This worked for me, for AppCompatActivity,

    <item name="actionBarStyle">@style/BlackActionBar</item>
</style>

<style name="BlackActionBar" parent="@style/Widget.AppCompat.ActionBar.Solid">
    <item name="background">@android:color/black</item>
    <item name="titleTextStyle">@style/BlackActionBarTitleTextStyle</item>
</style>

<style name="BlackActionBarTitleTextStyle" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">@android:color/white</item>
    <item name="android:fontFamily">@font/cinzel_decorative</item>
</style>

Advanced answered 28/2, 2019 at 18:7 Comment(0)

If you are using androidx AppCompact. Use below code.

androidx.appcompat.app.ActionBar actionBar = getSupportActionBar();
actionBar.setBackgroundDrawable(new ColorDrawable("Color"));

Unreality answered 15/2, 2020 at 10:56 Comment(0)

This code may be helpful

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light">
    <!-- Customize your theme here. -->
</style>
<style name="Theme.MyTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- customize the color palette -->
    <item name="colorPrimary">@color/material_blue_500</item>
    <item name="colorPrimaryDark">@color/material_blue_700</item>
    <item name="colorAccent">@color/material_blue_500</item>
    <item name="colorControlNormal">@color/black</item>

</style>
<style name="CardViewStyle" parent="CardView.Light">
    <item name="android:state_pressed">@color/material_blue_700</item>
    <item name="android:state_focused">@color/material_blue_700</item>
    <!--<item name="android:background">?android:attr/selectableItemBackground</item>-->
</style>

Gwenny answered 26/2, 2015 at 11:49 Comment(0)

Its very simple for those who are using API 21 or greater Use this code below

for Dark ActionBar

<resources>
<style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
    <!-- Customize your theme here. -->
    <item name="android:background">@color/colorDarkGrey</item>
</style>

for_LightActionBar

<resources>
<style name="AppTheme" parent="Theme.AppCompat.Light.ActionBar">
    <item name="android:background">@color/colorDarkGrey</item>
</style>

Darrondarrow answered 22/12, 2019 at 8:54 Comment(0)

Use This code ..to change action bar background color. open "res/values/themes.xml" (if not present, create it) and add

<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- the theme applied to the application or activity -->
<style name="CustomActionBarTheme"
       parent="@android:style/Theme.Holo.Light.DarkActionBar">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
</style>
 <!-- ActionBar styles -->
<style name="MyActionBar"
       parent="@android:style/Widget.Holo.Light.ActionBar.Solid.Inverse">
    <item name="android:background">@drawable/actionbar_background</item>
</style>

Note : this code works for android 3.0 and higher versions only

Coinstantaneous answered 29/9, 2015 at 14:1 Comment(0)

Use this, it would work.

ActionBar actionbar = getActionBar();
actionbar.setBackgroundDrawable(new ColorDrawable("color"));

Oversubtlety answered 24/8, 2016 at 5:19 Comment(0)

-2

getActionBar().setBackgroundDrawable(new ColorDrawable(getResources().getColor(R.color.TabColor)));

color.xml file:

<resources> <color name="TabColor">#11FF00</color> </resources>`

Log answered 30/12, 2015 at 18:32 Comment(0)

Hot tags

Godot Unity Godot Help Programming Godot 4.X GUI GDScript 3D 2D Physics CSharp Godot 3.X VR XR Projects C++