Android Action Bar Tabs, Styling the Icon and Text together

Question

Firstly, there is the image of my current tab bar enter image description here

What I want is either aligning the images to very left, while keeping the text centered or moving the images on top of the text centered.

Here is how I add the texts:

var tab = this.ActionBar.NewTab ();            
tab.SetText (tabText);
tab.SetIcon (iconResourceId);

Here is my relevant style.xml entries:

<style name="Theme.Discover" parent="@android:style/Theme.Holo.Light">
    <item name="android:actionBarStyle">@style/MyActionBar</item>
    <item name="android:actionBarTabStyle">@style/MyActionBarTabStyle</item>
    <item name="android:actionBarTabTextStyle">@style/MyActionBarTabText</item>
    <item name="android:actionMenuTextColor">#ffffff</item>
    <item name="android:windowBackground">@drawable/bg</item>
</style>

<style name="MyActionBarTabStyle" parent="@android:style/Widget.Holo.Light.ActionBar.TabView">
    <item name="android:background">@drawable/action_tab_selector</item>
</style> 

<!-- ActionBar tabs text styles -->
<style name="MyActionBarTabText"
       parent="@android:style/Widget.Holo.ActionBar.TabText">
    <item name="android:textColor">#ffffff</item>
</style>

I can understand java code too so if you are not familiar with Xamarin, I still appreciate the java examples&answers.

score 6 · Accepted Answer · edited Apr 28 '16 at 08:50

6

My solution isn't perfect, but to move the icons above the text here is what I have so far, which might be able to help you.

TabLayout.axml

<?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:orientation="vertical">
    <ImageView
        android:id="@+id/tab_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/transparent" />
    <TextView
        android:id="@+id/tab_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

MainActivity.cs

 void AddTabToActionBar(int labelResourceId, int iconResourceId)
        {
            var tab = this.ActionBar.NewTab();
            tab.SetCustomView(Resource.Layout.Tablayout);
            tab.CustomView.FindViewById<ImageView>(Resource.Id.tabImage).SetImageResource(iconResourceId);
            tab.CustomView.FindViewById<TextView>(Resource.Id.tabText).SetText(labelResourceId);
            tab.TabSelected += TabOnTabSelected;
            ActionBar.AddTab(tab);

        }

edited Apr 28 '16 at 08:50

vbvs

173
1
1
9

answered Mar 06 '14 at 20:54

goober_nut

150
1
9

This is really helpful. I'll try styling this the way I want. – erkinyldz Mar 07 '14 at 11:18
I can't seem to edit the tabbars height or width. I tried giving linearLayouts layout_height property as wrap_content and as 100dp and 150dp nothing changed. Any idea? – erkinyldz Mar 07 '14 at 11:48
I haven't tried it yet, but it looks like you have to change the styling of the action bar: http://stackoverflow.com/a/10280063/3183686 – goober_nut Mar 07 '14 at 14:24
Tried different approaches with the link you gave. I couldn't change the height of the action bar tabs. Even when I changed the height of tabs it did not help. – erkinyldz Apr 25 '14 at 08:03
To be honest, I think Android really wants you to put your icons to the left or right of the text. Maybe a new version of the API will allow for an icon to be easily placed above text on an action bar. This might be their way to differentiate themselves from iOS. An idea to place your icons to the far left would be to add blank spaces to your string to make it invisible to the user. – goober_nut Apr 25 '14 at 17:00

score 3 · Answer 2 · answered Aug 14 '14 at 10:30

I managed to do it successfully. Here is the xml I used:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:p1="http://schemas.android.com/apk/res/android"
    p1:minWidth="15px"
    p1:minHeight="15px"
    p1:layout_width="wrap_content"
    p1:layout_height="wrap_content"
    p1:id="@+id/tabRelative"
    p1:gravity="center">
    <ImageView
        p1:src="@drawable/discover_icon_nightlife"
        p1:layout_width="20dp"
        p1:layout_height="20dp"
        p1:id="@+id/tabImage"
        p1:layout_centerHorizontal="true"
        p1:scaleType="centerInside"
        p1:layout_marginTop="4dp"
        p1:paddingTop="1dp" />
    <TextView
        p1:text="Menu"
        p1:layout_width="wrap_content"
        p1:layout_height="wrap_content"
        p1:id="@+id/tabText"
        p1:layout_centerHorizontal="true"
        p1:layout_below="@+id/tabImage"
        p1:paddingTop="2dp" />
</RelativeLayout>

And I setted it as custom view to my ab like goober_nuts answer suggests.

It wasn't as good as I wanted it to be. I would also want to change the height of the tabs but haven't managed to do it. Here is the picture of the last look:

Last Look

Android Action Bar Tabs, Styling the Icon and Text together

2 Answers2

Linked