question

RezaMohamed-8816 avatar image
0 Votes"
RezaMohamed-8816 asked JessieZhang-2116 commented

How to set the padding/height of the icons in a tabbedpage

How would I set the padding around the icons and text of a tabbedbar page?

 <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="TestXam.Views.MainPage"
             xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
             android:TabbedPage.ToolbarPlacement="Bottom">
    
     <TabbedPage.Children>
         <ContentPage Title="Content1" IconImageSource="cheeseburger.png" BackgroundColor="LightSteelBlue">
             <ContentPage.Content>
                 <StackLayout>
                     <Label Text="Hello, world!"
                            VerticalOptions="CenterAndExpand"
                            HorizontalOptions="CenterAndExpand" />
                 </StackLayout>
             </ContentPage.Content>
         </ContentPage>
    
         <ContentPage Title="Content2" IconImageSource="cheeseburger.png" BackgroundColor="LightSkyBlue">
             <ContentPage.Content>
                 <StackLayout>
                     <Label Text="Hello, world!"
                            VerticalOptions="CenterAndExpand"
                            HorizontalOptions="CenterAndExpand" />
                 </StackLayout>
             </ContentPage.Content>
         </ContentPage>
     </TabbedPage.Children>
 </TabbedPage>

In the image below, the icon seems to touch the end of the content, I want to put some padding around.
90045-screen-shot-2021-04-21-at-13809-pm.png


dotnet-xamarin
· 1
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.

Hi @RezaMohamed-8816 ,I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·

1 Answer

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

Hello,


Welcome to our Microsoft Q&A platform!

You can use Custom Renderers to achieve this.

  1. In android, create class MyTabbedPageRenderer

    [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);
                         }
                     }
                 }
             }
         }
     }
    

The custom_tab_layout.xml is a layout in folder layout

 <?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>

Take the official sample Xamarin.Forms - TabbedPage for example, the result is:
90039-image.png

2.For IOS platform, you can refer to the following code:

 [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer ))]
 namespace My.App.iOS
 {
 public class MyTabbedPageRenderer : TabbedRenderer
 {
    
   public static void Initialize()
   {
   }
    
   public override void ViewWillAppear(bool animated)
   {
      base.ViewWillAppear(animated);
      ResizeIcons();
   }
    
   public override void ItemSelected(UITabBar tabbar, UITabBarItem item)
   {
      ResizeIcons();
   }
    
   private void ResizeIcons()
   {
      if (TabBar?.Items == null)
         return;
    
    
      var tabs = Element as TabbedPage;
      if (tabs != null)
      {
         for (int i = 0; i < TabBar.Items.Length; i++)
         {
            UpdateItem(TabBar.Items[i]);
         }
      }
   }
    
   private void UpdateItem(UITabBarItem item)
   {
      try
      {
    
         if (item == null)
            return;
         if (item.Image != null)
            item.Image = MaxResizeImage(item.Image, 20, 20);
         if (item.SelectedImage != null)
            item.SelectedImage = MaxResizeImage(item.SelectedImage, 20, 20);
      }
      catch (Exception)
      {
      }
   }
    
   public UIImage MaxResizeImage(UIImage sourceImage, float maxWidth, float maxHeight)
   {
      var sourceSize = sourceImage.Size;
      var maxResizeFactor = Math.Min(maxWidth / sourceSize.Width, maxHeight / sourceSize.Height);
      if (maxResizeFactor > 1)
         return sourceImage;
      var width = maxResizeFactor * sourceSize.Width;
      var height = maxResizeFactor * sourceSize.Height;
      UIGraphics.BeginImageContext(new CGSize(width, height));
      sourceImage.Draw(new CGRect(0, 0, width, height));
      var resultImage = UIGraphics.GetImageFromCurrentImageContext();
      UIGraphics.EndImageContext();
      return resultImage;
   }
   }
 }

Refer:https://forums.xamarin.com/discussion/44069/tab-bar-icon-sizing


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 (29.3 KiB)
· 1
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.

Hi @RezaMohamed-8816 ,I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·