---
title: "Styling the Action Bar in Andriod"  
description: "Hi Everyone, I am here explaining how to style the action bars and customize the styling in Andriod"  
author: "Anonymous User"  
published: 2014-11-10  
updated: 2019-09-07  
canonical: https://www.mindstick.com/articles/1521/styling-the-action-bar-in-andriod  
category: "android"  
tags: ["android", "android styles", "gui"]  
reading_time: 5 minutes  

---

# Styling the Action Bar in Andriod

I my last post we have implemented how to add the action bar in Adding the Action Bars and Action Buttons in Android. This post is the [extension](https://www.mindstick.com/articles/22/extension-method) of the same. Now we see how to style the actin bar.

We can easily style Action Bar using Android's style and theme resources. Android includes a few built-in activity themes that include "dark" or "light" action bar styles. You can also extend these themes to further customize the look for your action bar.

Android [includes two](https://yourviews.mindstick.com/view/83280/jahangirpuri-violence-includes-two-main-accused-aslam-and-ansar) baseline activity themes that dictate the color for the action bar:

1. Theme.Holo for a "dark" theme.

2. Theme.Holo.Light for a "light" theme.

You can apply these themes to [your entire](https://yourviews.mindstick.com/view/87869/how-can-reading-a-book-change-your-entire-life) app or to individual [activities](https://www.mindstick.com/interview/2242/differentiate-activities-from-services) by declaring them in your [manifest file](https://www.mindstick.com/forum/158884/what-is-the-purpose-of-the-android-manifest-file) with the android:theme attribute for the <[application](https://www.mindstick.com/articles/12824/calculator-application-in-android)> element or individual <activity> elements.

<application android:theme="@android:style/Theme.Holo.Light" ... />

You can also use a dark action bar while the rest of the activity uses the light color scheme by declaring the Theme.Holo.Light.DarkActionBar theme.

![Styling the Action Bar in Andriod](https://www.mindstick.com/mindstickarticle/b3e09326-1fd0-4ff6-9b86-7f3c5561b11e/images/e2f9302f-56b0-4476-8c1a-038a8a94981d.png)

![Styling the Action Bar in Andriod](https://www.mindstick.com/mindstickarticle/b3e09326-1fd0-4ff6-9b86-7f3c5561b11e/images/7509c36e-3543-4a6f-a2a4-2ad8d43eeff0.png)

![Styling the Action Bar in Andriod](https://www.mindstick.com/mindstickarticle/b3e09326-1fd0-4ff6-9b86-7f3c5561b11e/images/545e2f52-92c1-4b3e-9125-420c5d439c09.png)

##### Customize the Background

To change the action bar background, create a custom theme for your activity that overrides the actionBarStyle property. This property points to another style in which you can override the background property to specify a drawable resource for the action bar background.

If your app uses navigation tabs or the split action bar,

then you can also specify the background for these bars using the backgroundStacked

and backgroundSplit properties, respectively.

\
![Styling the Action Bar in Andriod](https://www.mindstick.com/mindstickarticle/b3e09326-1fd0-4ff6-9b86-7f3c5561b11e/images/8dbf360e-e89a-4c13-89c8-4a6cc8f1986b.png)

When supporting Android 3.0 and higher only, you can define the action bar's [background](https://www.mindstick.com/articles/65/how-to-change-background-color-of-tab-control-in-c-sharp) like this:

res/values/themes.xml

<?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>\
</resources>

Then apply your theme to your entire app or individual activities:

<application android:theme="@style/CustomActionBarTheme" ... />

##### Customize the Text Color

To modify the color of text in the action bar, you need to override separate [properties](https://yourviews.mindstick.com/view/81845/now-it-s-possible-to-predict-properties-of-any-molecule) for each text element:

1. Action bar title: Create a custom style that specifies the textColor property and specify that style for the titleTextStyle property in your custom actionBarStyle.

2. Action bar tabs: Override actionBarTabTextStyle in your activity theme.

3. Action buttons: Override actionMenuTextColor in your activity theme.

```
 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.Holo">
        <item name="android:actionBarStyle">@style/MyActionBar</item>        <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>        <item name="android:actionMenuTextColor">@color/actionbar_text</item>
    </style>
    <!-- ActionBar styles -->    <style name="MyActionBar"           parent="@style/Widget.Holo.ActionBar">        <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>    </style>    <!-- ActionBar title text -->    <style name="MyActionBarTitleText"           parent="@style/TextAppearance.Holo.Widget.ActionBar.Title">        <item name="android:textColor">@color/actionbar_text</item>    </style>    <!-- ActionBar tabs text styles -->    <style name="MyActionBarTabText"
           parent="@style/Widget.Holo.ActionBar.TabText">        <item name="android:textColor">@color/actionbar_text</item>
    </style>
</resources>
```

##### Customize the Tab Indicator

To change the indicator used for the [navigation](https://www.mindstick.com/blog/62/different-navigation-in-asp-dot-net) tabs, create an activity theme that overrides the actionBarTabStyle property. This property points to another style resource in which you override the background property that should specify a state-list drawable.

![Styling the Action Bar in Andriod](https://www.mindstick.com/mindstickarticle/b3e09326-1fd0-4ff6-9b86-7f3c5561b11e/images/91ae8b69-27bd-448f-a574-b56ecd393287.png)

\

res/drawable/actionbar_tab_indicator.xml

```
 <?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- STATES WHEN BUTTON IS NOT PRESSED -->
    <!-- Non focused states -->    <item android:state_focused="false" android:state_selected="false"          android:state_pressed="false"          android:drawable="@drawable/tab_unselected" />    <item android:state_focused="false" android:state_selected="true"          android:state_pressed="false"          android:drawable="@drawable/tab_selected" />
    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->    <item android:state_focused="true" android:state_selected="false"          android:state_pressed="false"          android:drawable="@drawable/tab_unselected_focused" />    <item android:state_focused="true" android:state_selected="true"          android:state_pressed="false"          android:drawable="@drawable/tab_selected_focused" />
<!-- STATES WHEN BUTTON IS PRESSED -->    <!-- Non focused states -->    <item android:state_focused="false" android:state_selected="false"
   android:state_pressed="true"          android:drawable="@drawable/tab_unselected_pressed" />    <item android:state_focused="false" android:state_selected="true"        android:state_pressed="true"        android:drawable="@drawable/tab_selected_pressed" />
    <!-- Focused states (such as when focused with a d-pad or mouse hover) -->
    <item android:state_focused="true" android:state_selected="false"          android:state_pressed="true"          android:drawable="@drawable/tab_unselected_pressed" />    <item android:state_focused="true" android:state_selected="true"          android:state_pressed="true"          android:drawable="@drawable/tab_selected_pressed" />
</selector>
```

Our style XML file might look like this :

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.Holo">        <item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>    </style>
    <!-- ActionBar tabs styles -->    <style name="MyActionBarTabs"           parent="@style/Widget.Holo.ActionBar.TabView">        <!-- tab indicator -->        <item name="android:background">@drawable/actionbar_tab_indicator</item>    </style></resources>
```

This article is referred from Google docs Styling the Action Bar

---

Original Source: https://www.mindstick.com/articles/1521/styling-the-action-bar-in-andriod

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.