Android dev: Changing The Title Bar Background

I’ve been redesigning the user interface for Echo lately and I ran into a bit of an issue when trying to customize the title bar background. Specifically I could get it to work on older versions of Android but not on the new Holo Themes. Knowing the solution now I can tell you…

It’s a silly issue. I blame myself for having spent much time on it, but as I was unable to find a solution when searching for one on the usual channels I will provide it here.

First things first you need to have a custom theme declared for your application (or activity, depending on your needs). Something like…

<!-- Somewhere in AndroidManifest.xml -->
<application ... android:theme="@style/ThemeSelector">

Then, declare your custom theme for two cases, API versions with and without the Holo Themes. For the old themes we’ll customize the windowTitleBackgroundStyle attribute, and for the newer ones the ActionBarStyle.

<!-- res/values/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="ThemeSelector" parent="android:Theme.Light">
        <item name="android:windowTitleBackgroundStyle">@style/WindowTitleBackground</item>
    </style>
 
    <style name="WindowTitleBackground">     
        <item name="android:background">@color/title_background</item>
    </style>
 
</resources>
<!-- res/values-v11/styles.xml -->
<?xml version="1.0" encoding="utf-8"?>
<resources>
 
    <style name="ThemeSelector" parent="android:Theme.Holo.Light">
        <item name="android:actionBarStyle">@style/ActionBar</item>
    </style>
 
    <style name="ActionBar" parent="android:style/Widget.Holo.ActionBar">     
        <item name="android:background">@color/title_background</item>
    </style>
 
</resources>

That’s it! Here we use @color/title_background as a background. It could also be a drawable, and you can also customize other attributes (I had to set a padding for my WindowTitleBackground style for instance).

 

24 thoughts on “Android dev: Changing The Title Bar Background

  1. Hello, very good example! Thank you.

    I also tried to set the text color of the title bar, but it did not work. What I did was change:

    @color/title_background

    to

    @color/title_background
    @color/title_color

    in both styles (values & values-v11).

    Why this doesn’t work?

  2. Sorry, the above xml code was destroyed…

    @color/title_background
    @color/title_color

    apologizes if this does not show up right again…

    • @color/title_background is just a color reference, the name does not matter. You’re going to want to look for an item name that corresponds to the style you want to change and place it in the ThemeSelectors.

  3. Thanks for the post; saved me after hours of pulling my hair out! There is a lot of incorrect/incomplete info out there on this question; very glad I found yours.

    • I think I stumbled on the answer myself:

      It looks like windowTitleBackgroundStyle applies to activities, but not Dialogs. For dialogs you set background via windowTitleStyle?

      This works for me:

      @style/PopupDialog.Title

      @drawable/backgroundUp

      • style name=”PopupDialogTheme” parent=”@android:style/Theme.Dialog”
        item name=”android:windowTitleStyle” @style/PopupDialog.Title
        /item
        /style

        style name=”PopupDialog.Title” parent=”@android:style/TextAppearance.DialogWindowTitle
        item name=”android:background” @drawable/backgroundUp
        /item
        /style

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>