Monday, March 30, 2015

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.

8 comments:

Vikramaditya said...

Thanks a lot! Really helpful

Vikramaditya said...

Thank you very much! Really useful

Unknown said...

Hi, What is the purpose of adding support library compatibility? Do you know when we need to add it?

Unknown said...

@+Robert Loh AppCompat v21 does not require android: namespace, but older version AppCompat still need it. So you should add both for compatibility.

Unknown said...

@+Robert Loh AppCompat v21 does not require android: namespace, but older version AppCompat still need it. So you should add both for compatibility.

Unknown said...

Works like a charm. Great job

Unknown said...

Helpful,Thanks

Unknown said...

Mine isn't working