Home > DeveloperSection > Articles > Styling the Action Bar in Andriod

Styling the Action Bar in Andriod


Android Android  Android Styles  Gui 
Ratings:
0 Comment(s)
 1729  View(s)
Rate this:

Styling the Action Bar

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 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 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 app or to individual activities by declaring them in your manifest file with the android:theme attribute for the <application> 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.

 

 

 

 

 

 

 

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.

                    

 

 

                When supporting Android 3.0 and higher only, you can define the action bar's background 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 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

5.  <?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 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.

 

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


Don't want to miss updates? Please click the below button!

Follow MindStick