articles

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

Styling the Action Bar in Andriod

Anonymous User6099 10-Nov-2014

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.

<applicationandroid: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

 

 

Styling the Action Bar in Andriod

 

 

 

Styling the Action Bar in Andriod

 

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 

 

                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 -->
   
<stylename="CustomActionBarTheme"
           
parent="@android:style/Theme.Holo.Light.DarkActionBar">
       
<item name="android:actionBarStyle">@style/MyActionBar</item>
   
</style>

   
<!-- ActionBar styles -->
   
<stylename="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:

<applicationandroid: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
 <?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.

Styling the Action Bar in Andriod


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


Updated 07-Sep-2019
I am a content writter !

Leave Comment

Comments

Liked By