how to add icon on the top of text of actionbar in android

Question

I am new to android.I am trying to implement one actionbar which has three tabs,each tab contains one icon and name of tab.I am succeeded to place icon and text on each tab,but unfortunately icon is coming on left side of text(name of the tab) in tab. I want place icon on the top of the text instead of left side. Please find snippet of my code, and please help me to find solution. Thanks in advance,

        private void setActionBar()

         {               

           ActionBar bar = getActionBar();

    bar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
    bar.setDisplayShowHomeEnabled(false);
    bar.setDisplayShowTitleEnabled(false);

    ActionBar.Tab tabA = bar.newTab().setText("TabA");
        tabA.setIcon(R.drawable.iconA);

            ActionBar.Tab tabB = bar.newTab().setText("TabB");
    tabB.setIcon(R.drawable.iconB);

    ActionBar.Tab tabC = bar.newTab().setText("TabC");
            tabC.setIcon(R.drawable.iconC);
        }

Answer 1

You can use custom view to define how you want to have your tabs displayed.

1. define custom layout where you have an image above your text
2. in your activity, inflate the view and set the values for your image and your text
3. set custom view for the tab

Here is a rough example:

CUSTOM LAYOUT

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

<ImageView
    android:id="@+id/tabIcon"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:paddingTop="2dp" />

<TextView
    android:id="@+id/tabText"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:textColor="#FFFFFF" />

</LinearLayout>

INFLATE VIEW

View tabView = activity.getLayoutInflater().inflate(R.layout.actiobar_tab, null);
TextView tabText = (TextView) tabView.findViewById(R.id.tabText);
tabText.setText(R.String.sometext);

ImageView tabImage = (ImageView) tabView.findViewById(R.id.tabIcon);
tabImage.setImageDrawable(activity.getResources().getDrawable(R.drawable.someimage));

SET CUSTOM VIEW FOR THE GIVEN TAB

Tab tab = actionBar.newTab().setCustomView(tabView)