How to change the item icon and text size in xamarin.forms android?

Question

I am using xamarin.forms (not shell template)

I added a tabbed page and how to change the tabbed page bottom navigation bar icon size and text size?

and how to remove the tap effect

and the color of the active item? I do not need it to set the color of the image.

Answer 1

Hello,

Welcome to our Microsoft Q&A platform!

how to change the tabbed page bottom navigation bar icon size and text size?

You can use Custom Renderers to achieve this.

Take the Xamarin.Forms TabbedPage sample for example,we can create a MyTabbedPageRenderer as follows:

[assembly:ExportRenderer(typeof(TabbedPage),typeof(MyTabbedPageRenderer))]  
namespace TabbedPageWithNavigationPage.Droid  
{  
    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_layout);  
  
            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 = DrawableCompat.Wrap(icon);  
                        DrawableCompat.SetTintList(icon, colors);  
                    }  
                }  
            }  
        }  
    }  
}  

And define custom_tab_layout.xml in folder layout, here we can adjust the size of ImageView and TextView of the tab button.

<?xml version="1.0" encoding="utf-8"?>  
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:orientation="vertical"  
    android:layout_width="match_parent"  
    android:layout_height="41dp"  
  >  
    <ImageView  
        android:id="@+id/icon"  
        android:layout_width="18dp"  
        android:layout_height="18dp"  
        android:layout_gravity="center"  
        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>  

The result is:

Best Regards,

Jessie Zhang

---
If the response is helpful, please click "Accept Answer" and upvote it.

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.