Action Bar is integral part of android design guidelines. Action Bar API was intruduces in android version 3.0 and above but few months ago Google launch backward compatibility support for ActionBar with Support v7 library. Here see
Action Bar Tab integration with Fragment
I have gone through some customization of Support Action Bar android Action Bar. So here I am sharing those piece of source code which help me to beautify Android Action Bar
Action Bar Background Color -
<!-- ActionBar styles -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.Light.ActionBar.Solid.Inverse">
<item name="android:background">@color/name</item>
<!-- Support library compatibility -->
<item name="background">@color/name</item>
</style>
Action Bar Title Text Customization
<!-- ActionBar styles -->
<style name="MyActionBar" parent="@style/Widget.AppCompat.ActionBar">
<item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
<!-- Support library compatibility -->
<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/tabText</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
Action Bar Tab Customization
- Action Bar Tab Text Customization
<!-- ActionBar tabs text -->
<style name="MyActionBarTabText" parent="@style/Widget.AppCompat.ActionBar.TabText">
<item name="android:textColor">@color/tabText</item>
<!-- The textColor property is backward compatible with the Support Library -->
</style>
- Action Bar Tab's View and Selector Customization - Action bar Tab
View can be customize. You can use your own custom view or set custom
selector align Tab Text, and Change padding of Tab Text inside action
bar Tab
<!-- ActionBar tabs styles -->
<style name="MyActionBarTabs" parent="@style/Widget.AppCompat.ActionBar.TabView">
<!-- tab indicator -->
<item name="android:background">@drawable/tab_selector</item>
<!-- Support library compatibility -->
<item name="background">@drawable/tab_selector</item>
<item name="android:paddingLeft">0dp</item>
<item name="android:paddingRight">0dp</item>
<item name="android:paddingTop">0dp</item>
<item name="android:paddingBottom">0dp</item>
</style>
Here how you create Tab Selector XML to apply all effect (i.e Selected,Pressed,Unselected) – All Images should be placed rightly in drawables
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@android:color/transparent" android:state_focused="false" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/tab_selected_example" android:state_focused="false" android:state_pressed="false" android:state_selected="true"/>
- <!-- Focused states -->
<item android:drawable="@drawable/tab_unselected_focused_example" android:state_focused="true" android:state_pressed="false" android:state_selected="false"/>
<item android:drawable="@drawable/tab_selected_focused_example" android:state_focused="true" android:state_pressed="false" android:state_selected="true"/>
- <!-- Pressed -->
- <!-- Non focused states -->
<item android:drawable="@drawable/tab_unselected_pressed_example" android:state_focused="false" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/tab_selected_pressed_example" android:state_focused="false" android:state_pressed="true" android:state_selected="true"/>
- <!-- Focused states -->
<item android:drawable="@drawable/tab_unselected_pressed_example" android:state_focused="true" android:state_pressed="true" android:state_selected="false"/>
<item android:drawable="@drawable/tab_selected_pressed_example" android:state_focused="true" android:state_pressed="true" android:state_selected="true"/>
</selector>
Now give all theme Reference to main theme and use this theme for any activity in Android manifest
<style name="AppBaseTheme" parent="@style/Theme.AppCompat.Light">
<item name="android:actionBarStyle">@style/MyActionBar</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarStyle">@style/MyActionBar</item>
<item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="android:actionMenuTextColor">@android:color/background_light</item>
<!-- Support library compatibility -->
<item name="actionBarStyle">@style/MyActionBar</item>
<item name="actionBarTabTextStyle">@style/MyActionBarTabText</item>
<item name="actionMenuTextColor">@color/tabText</item>
<item name="android:actionBarTabStyle">@style/MyActionBarTabs</item>
<!-- Support library compatibility -->
<item name="actionBarTabStyle">@style/MyActionBarTabs</item>
</style>
