title: Android - customizing actionbar sherlock tabs
body: <p>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.</p>
  
  <p>Here are the results I'm getting:</p>
  
  <p>Custom tab1 selected
  <img src="https://i.stack.imgur.com/Dcuky.png" alt="Selected"></p>
  
  <p>Custom tab1 not selected, standard tab2 selected
  <img src="https://i.stack.imgur.com/xD1sr.png" alt="Not selected"></p>
  
  <p>This is what I have so far:</p>
  
  <p>Created my own styles.xml where I change some of the actionbar settings:</p>
  
  <p>
  </p>
  
  <pre><code>&lt;style name="SkoletubeTheme" parent="Theme.Sherlock"&gt;
      &lt;item name="actionBarSize"&gt;@dimen/st__action_bar_default_height&lt;/item&gt;
      &lt;item name="actionBarTabStyle"&gt;@style/Skoletube.TabView&lt;/item&gt;
      &lt;item name="actionBarTabTextStyle"&gt;@style/Skoletube.Tab.Text&lt;/item&gt;
  &lt;/style&gt;
  
  &lt;style name="Skoletube.TabView" parent="Widget.Sherlock.ActionBar.TabView"&gt;
      &lt;item name="android:background"&gt;@drawable/abs__tab_indicator_holo&lt;/item&gt;
      &lt;item name="android:paddingLeft"&gt;6dp&lt;/item&gt;
      &lt;item name="android:paddingRight"&gt;6dp&lt;/item&gt;
  &lt;/style&gt;
  
  &lt;style name="Skoletube.Tab.Text" parent="Widget.Sherlock.ActionBar.TabText"&gt;
      &lt;item name="android:textAppearance"&gt;@android:style/TextAppearance.Medium&lt;/item&gt;
      &lt;item name="android:textColor"&gt;@android:color/primary_text_dark&lt;/item&gt;
      &lt;item name="android:textSize"&gt;10sp&lt;/item&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p></p>
  
  <p>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</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;resources&gt;
  &lt;!-- Default height of an action bar. --&gt;
  &lt;dimen name="st__action_bar_default_height"&gt;58dip&lt;/dimen&gt;
  &lt;!-- Text size for action bar titles --&gt;
  &lt;dimen name="ab__action_bar_title_text_size"&gt;10dp&lt;/dimen&gt;
  &lt;!-- Text size for action bar subtitles --&gt;
  &lt;dimen name="ab__action_bar_subtitle_text_size"&gt;6dp&lt;/dimen&gt;
  &lt;!-- Top margin for action bar subtitles --&gt;
  &lt;dimen name="ab__action_bar_subtitle_top_margin"&gt;-3dp&lt;/dimen&gt;
  &lt;!-- Bottom margin for action bar subtitles --&gt;
  &lt;dimen name="ab__action_bar_subtitle_bottom_margin"&gt;5dip&lt;/dimen&gt;
  &lt;/resources&gt;
  </code></pre>
  
  <p>Then I've defined a custom layout for the tabs to use, where I place the text below the icon:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;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"
  &gt;
  &lt;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"
      /&gt;
  &lt;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"
      /&gt;
  &lt;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"
      /&gt;
  </code></pre>
  
  <p></p>
  
  <p>Just for the record the attribute passed as the style for the relative  layout points to this:</p>
  
  <pre><code>&lt;style name="Widget.Sherlock.ActionBar.TabBar" parent="android:Widget"&gt;&lt;/style&gt;
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>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);
  </code></pre>
  
  <p>While I think I'm close to the solution, I think I've missed a step somewhere.</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>Appreciate any suggestions and ideas.</p>