How to change the size and position of icons in Xamarin Shell Tabbar

jojo1234

I'm pretty new to Xamarin Shell and I would like to change the size and position of the icons in my TabBar.
I'd want to increase the size a little bit and move the icons to the center vertically like so;
How would I achieve this?

<!--BluePill Pages-->
<TabBar Style="{StaticResource FreeStyle}">
    <!--TeleMED Tab-->
    <Tab Icon="telemedicineIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:TelemedicineMainPage}"/>
    </Tab>

    <!--FlemingTab-->
    <Tab Icon="chatbotIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:ChatbotPage}"/>
    </Tab>

    <!--FirstAid Tab-->
    <Tab Icon="firstaidIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:FirstAidPage}"/>
    </Tab>

    <!--User Profile Tab-->
    <Tab Icon="profileIcon.png">
        <ShellContent ContentTemplate="{DataTemplate views:UserProfilePage}"/>
    </Tab>
</TabBar>

ColeX

Here is an excellent article for customizing tabbar in xamarin shell project , you could create you own layout and replace the default one in Custom renderer .

Key code

public override AView OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
{
    base.OnCreateView(inflater, container, savedInstanceState);

    _outerLayout = inflater.Inflate(Resource.Layout.BottomTabLayout, null);
    _bottomView = _outerLayout.FindViewById<BottomNavigationView>(Resource.Id.bottomtab_tabbar);
    _navigationArea = _outerLayout.FindViewById<FrameLayout>(Resource.Id.bottomtab_navarea);

    // ... omitted code ..
}

jojo1234

What of iOS? is there an implementation of this for iOS?

ColeX

Please check the simple solution with help of Custom renderer , it both works for iOS and Android .

iOS

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace App30.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 = UIImage.FromBundle("tab_about.png");
                itemOne.SelectedImage = UIImage.FromBundle("tab_feed.png");


                UITabBarItem itemTwo = myTabBar.Items[1];

                itemTwo.Image = UIImage.FromBundle("tab_feed.png");
                itemTwo.SelectedImage = UIImage.FromBundle("tab_about.png");

                //The same logic if you have itemThree, itemFour....
            }

        }

        public void UpdateLayout(UITabBarController controller)
        {

        }
    }
}

Android

[assembly: ExportRenderer(typeof(AppShell), typeof(MyShellRenderer))]
namespace App30.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new CustomBottomNavAppearance();
        }
    }

    public class CustomBottomNavAppearance : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {

        }

        public void ResetAppearance(BottomNavigationView bottomView)
        {

        }

        public void SetAppearance(BottomNavigationView bottomView, ShellAppearance appearance)
        {
            IMenu myMenu = bottomView.Menu;

            IMenuItem myItemOne = myMenu.GetItem(0);

            if (myItemOne.IsChecked)
            {
                myItemOne.SetIcon(Resource.Drawable.tab_about);
            }
            else
            {
                myItemOne.SetIcon(Resource.Drawable.tab_feed);
            }

            //The same logic if you have myItemTwo, myItemThree....

        }
    }
}