Customizing Support Android Action bar Tab : android.support.v7.app.ActionBar and Action Bar

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>  

Applying Custom font in entire android application through XML Layout

Installing custom font in entire application is very easy. We can set any custom font to our whole android application just like a theme. This is very simple procedure and easy to implements.

Requirement of Tutorial

• Custom Font
• No minimum SDk version

Basic tools of applying custom font to complete application is to create our own Views and apply font like other XML layout properties

This procedure include few simple steps

1) Create your own application and keep any font file (.ttf) inside assets folder of android project

2) Create one styleable inside your string.xml. This will allow you to set custom font like xml attributes

<!-- FONT FAIIMLY FOR Project -->
 <declare-styleable name="customfont"> <attr name="android:fontFamily"/> <attr name="android:textStyle"/> </declare-styleable>

3) Now create any custom views. Let take one TextView and set our custom font on this.

package com.customfont;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Typeface;
import android.util.AttributeSet;
import android.widget.TextView;

public class CustomText extends TextView {

    public CustomText(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    public void init(Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs,
                R.styleable.customfont);
        String fontFamily = null;
        final int n = a.getIndexCount();
        for (int i = 0; i < n; ++i) {
            int attr = a.getIndex(i);
            if (attr == R.styleable.customfont_android_fontFamily) {
                fontFamily = a.getString(attr);
            }
            a.recycle();
        }
        if (!isInEditMode()) {
            try {
                Typeface tf = Typeface.createFromAsset(
                        getContext().getAssets(), fontFamily);
                setTypeface(tf);
            } catch (Exception e) {
            }
        }
    }
}

Look at the styleable R.styleable.customfont. Its the same name which we declare in step 2

4) Now create one xml layout and use CustomText instead of normal TextView. You can directly use from your graphical layout. See Image

Step 5) Set font name to CustomText inside layout. and Use the same CustomText in entire application. The font will apply through XML layout

   <com.customfont.CustomText
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"

        android:fontFamily="Forza-Black.otf"
        android:text="@string/hello_world"
        android:textSize="50sp" />

Step 6) After creating a simple Layout. Used this inside Activity and run the Sample

Custom font had applied to your application. See screenshot above. Feel free to download sample application.

Download Sample Application