In Xamarin Forms is there any way I can change the size of the images used in the tab bars when using Xamarin Shell? - xamarin

Question

I would like to be able to customize the bottom tab bar. From what I understand this isn’t yet possible but it might be a future feature. Until that time has anyone come across any custom renderers for iOS and Android that would allow me to change the size of the images that display in the bottom tab area?

Answer 1

You could use Custom Renderer to reset the size of icon in specific platforms .
in iOS projet
In the renderer I set the first icon as 60pt *60pt . You need to set the size on each item
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using xxx;
using xxx.iOS;
using CoreGraphics;
using Foundation;
using UIKit;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace xxx.iOS
{
public class MyShellRenderer : ShellRenderer
{
protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
{
var renderer = base.CreateShellSectionRenderer(shellSection);
if (renderer != null)
{
}
return renderer;
}
protected override IShellTabBarAppearanceTracker CreateTabBarAppearanceTracker()
{
return new CustomTabbarAppearance();
}
}
public class CustomTabbarAppearance : IShellTabBarAppearanceTracker
{
public void Dispose()
{
}
public void ResetAppearance(UITabBarController controller)
{
}
public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
{
UITabBar myTabBar = controller.TabBar;
if (myTabBar.Items != null)
{
UITabBarItem itemOne = myTabBar.Items[0];
itemOne.Image = ScalingImageToSize(UIImage.FromBundle("tab_feed.png"),new CGSize(60,60)); // set the size here if you want to customize it
itemOne.SelectedImage = ScalingImageToSize(UIImage.FromBundle("tab_feed.png"), new CGSize(60, 60));
UITabBarItem itemTwo = myTabBar.Items[1];
itemTwo.Image = UIImage.FromBundle("tab_about.png");
itemTwo.SelectedImage = UIImage.FromBundle("tab_about.png");
//The same logic if you have itemThree, itemFour....
}
}
public UIImage ScalingImageToSize(UIImage sourceImage, CGSize newSize)
{
UIGraphics.BeginImageContextWithOptions(newSize, false, UIScreen.MainScreen.Scale);
sourceImage.Draw(new CGRect(0, 0, newSize.Width, newSize.Height));
UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();
UIGraphics.EndImageContext();
return newImage;
}
public void UpdateLayout(UITabBarController controller)
{
}
}
}
in Android
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using Android.App;
using Android.Content;
using Android.Graphics;
using Android.Graphics.Drawables;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Views;
using Android.Widget;
using xxx;
using xxx.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace xxx.Droid
{
public class MyShellRenderer : ShellRenderer
{
Context context;
public MyShellRenderer(Context context) : base(context)
{
this.context = context;
}
protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
{
return new CustomBottomNavAppearance(context);
}
}
public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
{
Context context;
public CustomBottomNavAppearance(Context context)
{
this.context = context;
}
public void Dispose()
{
}
public void ResetAppearance(BottomNavigationView bottomView)
{
}
public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
{
bottomView.ItemIconSize=250;
//The same logic if you have myItemTwo, myItemThree....
}
}
}