Xamarin.Forms: Change Icon & Text size in TabbedPage tabs
In your Android project's Resources/values/style.xml
file, you can create a style:
<style name="MyTabTextStyle" parent="Base.Widget.Design.TabLayout">
<item name="android:textSize">8sp</item>
</style>
And then in your Resources/layout/tabs.axml
file, you can use the style:
<android.support.design.widget.TabLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
... other attributes ...
app:tabTextAppearance="@style/MyTabTextStyle" />
As for the icon, try this: https://stackoverflow.com/a/46465233/3183946
And by the way, I think "Dairy" should be "Diary" in your app
After some effort i get it work for android using TabbedPageRenderer
. Created custom layout with ImageView
& TetxtView
below Custom_tab_layou.xaml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="41dp"
android:orientation="vertical">
<ImageView
android:id="@+id/icon"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_gravity="center_vertical"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="4dp" />
<TextView
android:id="@+id/tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="hello"
android:gravity="center"
android:textSize="11dp"
android:textColor="#00FF6F" />
</LinearLayout>
Created MyTabbedPageRenderer
class
public class MyTabbedPageRenderer : TabbedPageRenderer
{
private Dictionary<Int32, Int32> icons = new Dictionary<Int32, Int32>();
bool setup;
ViewPager pager;
TabLayout layout;
public MyTabbedPageRenderer(Context context) : base(context)
{
}
protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
{
base.SetTabIcon(tab, icon);
tab.SetCustomView(Resource.Layout.Custom_tab_layou);
var imageview = tab.CustomView.FindViewById<ImageView>(Resource.Id.icon);
var tv = tab.CustomView.FindViewById<TextView>(Resource.Id.tv);
tv.SetText(tab.Text, TextView.BufferType.Normal);
imageview.SetBackgroundDrawable(tab.Icon);
ColorStateList colors2 = null;
if ((int)Build.VERSION.SdkInt >= 23)
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors2 = Resources.GetColorStateList(Resource.Color.icon_tab);
tv.SetTextColor(colors2);
}
//this is for changing text color of select tab
protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
{
base.OnElementPropertyChanged(sender, e);
if (setup)
return;
if (e.PropertyName == "Renderer")
{
pager = (ViewPager)ViewGroup.GetChildAt(0);
layout = (TabLayout)ViewGroup.GetChildAt(1);
setup = true;
ColorStateList colors = null;
if ((int)Build.VERSION.SdkInt >= 23)
colors = Resources.GetColorStateList(Resource.Color.icon_tab, Forms.Context.Theme);
else
colors = Resources.GetColorStateList(Resource.Color.icon_tab);
for (int i = 0; i < layout.TabCount; i++)
{
var tab = layout.GetTabAt(i);
var icon = tab.Icon;
Android.Views.View view = GetChildAt(i);
if (view is TabLayout) layout = (TabLayout)view;
if (icon != null)
{
icon = Android.Support.V4.Graphics.Drawable.DrawableCompat.Wrap(icon);
Android.Support.V4.Graphics.Drawable.DrawableCompat.SetTintList(icon, colors);
}
}
}
}
}