How to change the Android ActionBar background from the default dark color

By default, the background color of the ActionBar in any Android App is black as shown in the example below.

I wanted to style the background to a different non-black color. After some investigation, I had to do the following:

• Choose a color
• Define a custom theme
• Assign the custom theme to the application

Choose a color

1. Decide on a color to use for the background e.g. red or #303f9f in hex.
   
2. Decide on a color for the text e.g. white of #ffffff in hex.
   
3. Add these colors to the Android app's XML file e.g. [app]/res/values/color.xml.

<?xml version="1.0" encoding="utf-8"?>

<resources>

<color name="actionbar_background">#303f9f</color>

<color name="actionbar_text">#ffffff</color>

</resources>

Define a Custom theme

1. Open up the Android app's styles XML file e.g. [app]/res/valuess/styles.xml, in a text editor.
   
2. Append in a new style e.g. CustomActionBarTheme that inherits a parent theme e.g. Theme.AppCompat.Light.DarkActionBar.
   
3. Append in new styles for the action bar, title text, and tabs text, e.g. MyActionBar, MyActionBarTitleText and MyActionBarTabText.
   
4. The following code shows the complete styles.xml file.

<resources>

<!-- Base application theme. -->

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

<!-- Customize your theme here. -->

</style>

<style name="CustomActionBarTheme"

parent="@style/Theme.AppCompat.Light.DarkActionBar">

<item name="android:actionBarStyle">@style/MyActionBar</item>

<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="android:actionMenuTextColor">@color/actionbar_text</item>

<!-- Support library compatibility -->

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

<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>

<item name="actionMenuTextColor">@color/actionbar_text</item>

</style>

<!-- ActionBar styles -->

<style name="MyActionBar"

parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse" >

<item name="android:background">@color/actionbar_background</item>

<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>

<!-- Support library compatibility -->

<item name="background">@color/actionbar_background</item>

<item name="titleTextStyle">@style/MyActionBarTitleText</item>

</style>

<!-- ActionBar title text -->

<style name="MyActionBarTitleText"

parent="@style/TextAppearance.AppCompat.Widget.ActionBar.Title">

<item name="android:textColor">@color/actionbar_text</item>

</style>

<!-- ActionBar tabs text -->

<style name="MyActionBarTabText"

parent="@style/Widget.AppCompat.ActionBar.TabText">

<item name="android:textColor">@color/actionbar_text</item>

</style>

</resources>

Assign the new custom theme to the Android Application

1. Open up the AndroidManifest.xml file in a text editor.
   
2. In the application tag, change the theme to the new theme e.g. @style/CustomActionBarTheme.
   
3. The following code snippet shows the relevant portion of the edited AndroidManifest.xml file.

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

android:installLocation="auto"

package="com.dom925.demo" >

<application

android:name=".App"

android:allowBackup="true"

android:icon="@drawable/ic_launcher"

android:label="@string/app_name"

android:theme="@style/CustomActionBarTheme">

<!-- etc -->

</manifest>

Now the application's ActionBar should be using the custom theme with a non-black background.