ActionBar Tab with custom View not centered

Question

I need to use a custom View for my tabs, the problem is that fill_parent doesn't work (as seen here).

So I need to use margin and stuff, but in order to have the view centered inside the tab in all configuration (landscape/portrait, or on a tablet where the height of the tabs will change) it's a bit tricky to do.

I don't know what value to use on each configuration. Plus, I don't find the default layout that the system uses to start with.

Answer 1

I'd recommend that you use the ActionBar Tab styles. This is clean and simple. For example (zeroing in on the TabView):

<style name="MyActionBar" parent="@style/android:Widget.Holo.ActionBar">
    <item name="android:titleTextStyle">@style/MyActionBarTitleText</item>
    <item name="android:attr/actionBarTabTextStyle">@style/MyActionBarTabText</item>
    <item name="android:attr/actionBarTabStyle">@style/MyActionBarTabStyle</item>
</style>

<!-- styling for the tabs -->
<style name="MyActionBarTabStyle" parent="@style/android:Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/tab_bar_bg_master</item>
    <item name="android:gravity">center</item>
</style>

(I'll also note that the tabs are highly styleable by using custom Drawables. But that's a topic for another day!)

Answer 2

So, if you want to do that you will need to do a bit of dirty stuff. Since fill_parent doesn't work, you need to force the root view to have more height than the tab height and then center what you really need. So my first LinearLayout is useless, and the second one will be in the center of the tab.

Here is what I used. I just wanted one textview with another one at the top right of it.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical">
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:visibility="invisible">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView" />
</LinearLayout>
<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_centerInParent="true"
    android:orientation="vertical">
    <TextView
        android:id="@+id/tv_tab_count"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_tab_title"
        android:layout_gravity="right"
        android:background="@drawable/bg_notification"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:text="1"
        android:gravity="center"
        android:minWidth="14dp"
        android:textStyle="bold"
        android:textColor="@color/blanc"
        android:textSize="8dp" />
    <TextView
        android:id="@+id/tv_tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="TextView"
        android:textColor="@color/noire"
        android:textSize="12dp"
        android:textStyle="bold" />
    <TextView //this has the same height as the `tv_tab_count` so it remains centered vertically
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/tv_tab_title"
        android:layout_gravity="right"
        android:background="#0f0"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:text="1"
        android:textSize="8dp"
        android:visibility="invisible" />
</LinearLayout>

This work for the vertical alignment but the view only has the width of the content I put in my textview. So if you need to use the complete width, you should put a really really long word in one of the invisible textviews.

Answer 3

the above reply from @Stephane-Mathis is on the right track, but I couldn't get it to work just right in my code. Here's a simpler version that uses the same concept.

Again, the idea is to force your view to be much taller than the tab itself.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:paddingTop="3dp"
    android:paddingBottom="3dp">
    <View
        android:id="@+id/spacer_1"
        android:layout_width="0dp"
        android:layout_height="1000dp"
        android:layout_weight="1" />
    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:src="@drawable/ic_tabicon_1" />
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="6dp"
        android:layout_gravity="center_vertical"
        android:textColor="?accentColor"
        android:text="My Albums" />
    <View
        android:id="@+id/spacer_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_weight="1" />
</LinearLayout>

The spacer_1 and spacer_2 views exist to pad the ImageView and TextView evenly on the left and right side. Furthermore, the height on spacer_1 is set to something absurdly high (1000dp) so force the parent view to be excessively tall. Then the ImageView and the TextView re both set to center_vertical.