Android - customizing actionbar sherlock tabs
Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.

Here are the results I'm getting:

Custom tab1 selected
![Selected][1]

Custom tab1 not selected, standard tab2 selected
![Not selected][2]

This is what I've have so far:

Created my own styles.xml where I change some of the actionbar settings:

<?xml version="1.0" encoding="utf-8"?>
<resources>

	<style name="SkoletubeTheme" parent="Theme.Sherlock">
		<item name="actionBarSize">@dimen/st__action_bar_default_height</item>
		<item name="actionBarTabStyle">@style/Skoletube.TabView</item>
		<item name="actionBarTabTextStyle">@style/Skoletube.Tab.Text</item>
	</style>

	<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
		<item name="android:background">@drawable/abs__tab_indicator_holo</item>
		<item name="android:paddingLeft">6dp</item>
		<item name="android:paddingRight">6dp</item>
	</style>

	<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
		<item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
		<item name="android:textColor">@android:color/primary_text_dark</item>
		<item name="android:textSize">10sp</item>
	</style>

</resources>

Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<!-- Default height of an action bar. -->
    <dimen name="st__action_bar_default_height">58dip</dimen>
    <!-- Text size for action bar titles -->
    <dimen name="ab__action_bar_title_text_size">10dp</dimen>
    <!-- Text size for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
    <!-- Top margin for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
    <!-- Bottom margin for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
    </resources>

Then I've defined a custom layout for the tabs to use, where I place the text below the icon:


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/customTabLayout"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:layout_weight="1"
    android:focusable="true"
    android:gravity="center"
    style="?attr/actionBarTabStyle"
    >
    <ImageView
        android:id="@+id/sk_abs__tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@android:color/transparent"
        />
    <com.actionbarsherlock.internal.widget.ScrollingTextView
        android:id="@+id/sk_abs__tab_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/sk_abs__tab_icon"
        android:layout_alignWithParentIfMissing="true"
        android:layout_weight="1"
        android:layout_centerHorizontal="true"
        android:lines="1"
        android:scrollHorizontally="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        style="@style/Skoletube.Tab.Text"
        />
    <FrameLayout
        android:id="@+id/abs__tab_custom"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:padding="5dip"
        android:layout_weight="1"
        android:visibility="gone"
        />
</RelativeLayout>


Just for the record the attribute passed as the style for the relative  textview points to this:

    <style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>

Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:

    final ActionBar actionBar;
		actionBar = getSupportActionBar();
		actionBar.setDisplayHomeAsUpEnabled(false);
		actionBar.setDisplayUseLogoEnabled(true);
		// Set up tabs

		myMediaTab = actionBar.newTab();
		myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
		ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
		myMediaImg.setImageResource(R.drawable.tab_mymedia);
		ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
		myMediaText.setText("Tab1");
		myMediaTab.setTabListener(this);
		myMediaTab.setTag("MyMediaTab");
		actionBar.addTab(myMediaTab);

		myChannelsTab = actionBar.newTab();
		myChannelsTab.setIcon(drawable.tab_mychannels);
		myChannelsTab.setText("Tab2");
		myChannelsTab.setTabListener(this);
		myChannelsTab.setTag("myChannelsTab");
		actionBar.addTab(myChannelsTab);

[1]: http://i.stack.imgur.com/Dcuky.png
[2]: http://i.stack.imgur.com/xD1sr.png


While I think I'm close to the solution, I think I've missed a step somewhere.

Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?

I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.

Appreciate any suggestions and ideas.
Android - customizing actionbar sherlock tabs
===

Im trying to customize the actionbar sherlock tabs so they display the tab text below the tab icon. After searching and reading about the subject, I'm still not having much luck.

Here are the results I'm getting:

Custom tab1 selected
![Selected][1]

Custom tab1 not selected, standard tab2 selected
![Not selected][2]

This is what I've have so far:

Created my own styles.xml where I change some of the actionbar settings:

<?xml version="1.0" encoding="utf-8"?>
<resources>

	<style name="SkoletubeTheme" parent="Theme.Sherlock">
		<item name="actionBarSize">@dimen/st__action_bar_default_height</item>
		<item name="actionBarTabStyle">@style/Skoletube.TabView</item>
		<item name="actionBarTabTextStyle">@style/Skoletube.Tab.Text</item>
	</style>

	<style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView">
		<item name="android:background">@drawable/abs__tab_indicator_holo</item>
		<item name="android:paddingLeft">6dp</item>
		<item name="android:paddingRight">6dp</item>
	</style>

	<style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText">
		<item name="android:textAppearance">@android:style/TextAppearance.Medium</item>
		<item name="android:textColor">@android:color/primary_text_dark</item>
		<item name="android:textSize">10sp</item>
	</style>

</resources>

Created an xml ressource where I change and owerwrite some textsettings for the actionbar. Here I have increased the height of the actionbar, which in turn increases the height of the tabs. I also decreased the size of the text in order to make room for fitting icon and text in the tab

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
	<!-- Default height of an action bar. -->
    <dimen name="st__action_bar_default_height">58dip</dimen>
    <!-- Text size for action bar titles -->
    <dimen name="ab__action_bar_title_text_size">10dp</dimen>
    <!-- Text size for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_text_size">6dp</dimen>
    <!-- Top margin for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_top_margin">-3dp</dimen>
    <!-- Bottom margin for action bar subtitles -->
    <dimen name="ab__action_bar_subtitle_bottom_margin">5dip</dimen>
    </resources>

Then I've defined a custom layout for the tabs to use, where I place the text below the icon:


    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:id="@+id/customTabLayout"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:layout_weight="1"
    android:focusable="true"
    android:gravity="center"
    style="?attr/actionBarTabStyle"
    >
    <ImageView
        android:id="@+id/sk_abs__tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:background="@android:color/transparent"
        />
    <com.actionbarsherlock.internal.widget.ScrollingTextView
        android:id="@+id/sk_abs__tab_txt"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/sk_abs__tab_icon"
        android:layout_alignWithParentIfMissing="true"
        android:layout_weight="1"
        android:layout_centerHorizontal="true"
        android:lines="1"
        android:scrollHorizontally="true"
        android:ellipsize="marquee"
        android:marqueeRepeatLimit="marquee_forever"
        style="@style/Skoletube.Tab.Text"
        />
    <FrameLayout
        android:id="@+id/abs__tab_custom"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:padding="5dip"
        android:layout_weight="1"
        android:visibility="gone"
        />
</RelativeLayout>


Just for the record the attribute passed as the style for the relative  textview points to this:

    <style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"></style>

Then I've applied these changes to my app as follows, the first tab has my customized implementation, the second tab has the standard implementation:

    final ActionBar actionBar;
		actionBar = getSupportActionBar();
		actionBar.setDisplayHomeAsUpEnabled(false);
		actionBar.setDisplayUseLogoEnabled(true);
		// Set up tabs

		myMediaTab = actionBar.newTab();
		myMediaTab.setCustomView(R.layout.skoletube_tab_layout);
		ImageView myMediaImg = (ImageView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_icon);
		myMediaImg.setImageResource(R.drawable.tab_mymedia);
		ScrollingTextView myMediaText = (ScrollingTextView) myMediaTab.getCustomView().findViewById(R.id.sk_abs__tab_txt);
		myMediaText.setText("Tab1");
		myMediaTab.setTabListener(this);
		myMediaTab.setTag("MyMediaTab");
		actionBar.addTab(myMediaTab);

		myChannelsTab = actionBar.newTab();
		myChannelsTab.setIcon(drawable.tab_mychannels);
		myChannelsTab.setText("Tab2");
		myChannelsTab.setTabListener(this);
		myChannelsTab.setTag("myChannelsTab");
		actionBar.addTab(myChannelsTab);

[1]: http://i.stack.imgur.com/Dcuky.png
[2]: http://i.stack.imgur.com/xD1sr.png


While I think I'm close to the solution, I think I've missed a step somewhere.

Obviously the blue bar behind the text/below the image needs to not be there, but I also haven't seemed to find out where I can set the focused image(I want the img to change color when a tab is selected) andtext color. Do I need to make the imageview focusable and handle it through that or?

I'm still fairly new at this, so the approach I have taken here might be wrong if there is a better/smarter way to go about doing this please do say.

Appreciate any suggestions and ideas.