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

StackOverflow https://stackoverflow.com/questions/8024706

Question

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 ?

Was it helpful?

Solution

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.

OTHER TIPS

Try this

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

try this:

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

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! :)

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

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

Direct add this line with your color code

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

not need to create ActionBar object every time...

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://stackoverflow.com/a/17198657/1022454

try one line code :

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

Use below code to provide different color to actionbar text and actionbar background just use below theme in manifest against the activity in which you want output :)

<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:titleTextStyle">@style/TitleBarTextColor</item>
    <item name="android:background">YOUR_COLOR_CODE</item>
</style>

<style name="TitleBarTextColor" parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">
    <item name="android:textColor">YOUR_COLOR_CODE</item>
</style>

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);

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"));

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>

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

If you are using androidx AppCompact. Use below code.

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

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

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>

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>

Use this, it would work.

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

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

color.xml file:

<resources> <color name="TabColor">#11FF00</color> </resources>`
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top