Tab Image colored Icon in Xamarin.Forms Shell

RakeshKumarKhandelwal

I am using Xamain.Forms Shell App. I am showing tab using Shelll.TabBarIsVisible = true and set tab icons as colored images but these are showing like Black & White icon. Could anyone suggest?

jezh

You need to use custom renderer of shell to customize the tabbar selected icon on each platform.

In 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)
        {
            // code here
            bottomView.ItemIconTintList = null;
        }
    }
}

The result is:

jezh

In 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)
            {
                if (controller.TabBar.Items != null)
                {
                    foreach (UITabBarItem tabbaritem in controller.TabBar.Items)
                    {
                        tabbaritem.Image = tabbaritem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                        tabbaritem.SelectedImage = tabbaritem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                }
            }

            public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
            {
                UITabBar myTabBar = controller.TabBar;

                if (myTabBar.Items != null)
                {
                    foreach (UITabBarItem tabbaritem in controller.TabBar.Items)
                    {
                        tabbaritem.Image = tabbaritem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                        tabbaritem.SelectedImage = tabbaritem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                }            
            }

            public void UpdateLayout(UITabBarController controller)
            {       

            }
        }
    }

jezh

@RakeshKumarKhandelwal Have you resolved your question?

jezh

You need to use custom renderer of shell to customize the tabbar selected icon on each platform.

In 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)
        {
            // code here
            bottomView.ItemIconTintList = null;
        }
    }
}

The result is:

jezh

In 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)
            {
                if (controller.TabBar.Items != null)
                {
                    foreach (UITabBarItem tabbaritem in controller.TabBar.Items)
                    {
                        tabbaritem.Image = tabbaritem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                        tabbaritem.SelectedImage = tabbaritem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                }
            }

            public void SetAppearance(UITabBarController controller, ShellAppearance appearance)
            {
                UITabBar myTabBar = controller.TabBar;

                if (myTabBar.Items != null)
                {
                    foreach (UITabBarItem tabbaritem in controller.TabBar.Items)
                    {
                        tabbaritem.Image = tabbaritem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                        tabbaritem.SelectedImage = tabbaritem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                }            
            }

            public void UpdateLayout(UITabBarController controller)
            {       

            }
        }
    }

jezh

@RakeshKumarKhandelwal Have you resolved your question?

RakeshKumarKhandelwal

@jezh said:
@RakeshKumarKhandelwal Have you resolved your question?

Yes, It resolved, thanks