ActionBar tab with custom view off-center

Question

I need to use a custom view for my tabs, the problem is that fill_parent is not working (as shown here ).

So, I need to use margin and stuff, but in order for the tab to be displayed in all settings in the internal configuration (landscape / portrait or on the tablet, where the height of the tabs will change), it's a little difficult to do.

I do not know what value to use for each configuration. In addition, I did not find the default layout that the system uses to start.

Answer 1

So, if you want to do this, you will need to do some dirty things. Since fill_parent does not work, you need to make the root view have more height than the height of the tab, and then center what you really need. So my first LinearLayout is useless, and the second will be in the center of the tab.

Here is what I used. I just lose one text image with another in the upper right corner.

<?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 vertical alignment, but the view only has the width of the content that I put in the text image. Therefore, if you need to use full width, you must put a really very long word in one of the invisible text views.

Answer 2

I would recommend you use the ActionBar tab styles. It is clean and simple. For example (zeroing in 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 will also note that tabs are very convenient with custom Drawables. But this is a theme for another day!)

Answer 3

the given answer from @ Stephane-Mathis is on the right track, but I could not get it to work just in my code. Here's a simpler version using the same concept.

Again, the idea is to make your view 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> 

There are spacer_1 and spacer_2 views for evenly positioning the ImageView and TextView on the left and right. Also, the height on spacer_1 is set to something absurdly high (1000dp) to make the parent view be excessively high. Then ImageView and TextView are both set to center_vertical .