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

打玻璃 1,526 Reputation points
2021-04-26T05:45:38.657+00:00

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.

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
4,818 questions
No comments
{count} votes

Accepted answer
  1. JessieZhang-MSFT 7,516 Reputation points
    2021-04-26T06:35:48.94+00:00

    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.

    No comments

0 additional answers

Sort by: Most helpful