Firstly, there is the image of my current tab bar
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.
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);
}
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:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With