question

6666666 avatar image
0 Votes"
6666666 asked JessieZhang-2116 edited

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

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.

dotnet-xamarin
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JessieZhang-2116 avatar image
0 Votes"
JessieZhang-2116 answered JessieZhang-2116 edited

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:
91196-image.png


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.




image.png (24.1 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.