locked
Tab Image colored Icon in Xamarin.Forms Shell RRS feed

  • Question

  • User234709 posted

    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?

    Thursday, March 12, 2020 12:27 PM

Answers

  • User371688 posted

    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:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 13, 2020 7:19 AM
  • User371688 posted

    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)
                {       
    
                }
            }
        }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 13, 2020 7:50 AM
  • User371688 posted

    @RakeshKumarKhandelwal Have you resolved your question?

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, March 16, 2020 9:04 AM

All replies

  • User371688 posted

    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:

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 13, 2020 7:19 AM
  • User371688 posted

    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)
                {       
    
                }
            }
        }
    
    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Friday, March 13, 2020 7:50 AM
  • User371688 posted

    @RakeshKumarKhandelwal Have you resolved your question?

    • Marked as answer by Anonymous Thursday, June 3, 2021 12:00 AM
    Monday, March 16, 2020 9:04 AM
  • User234709 posted

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

    Yes, It resolved, thanks

    Friday, March 20, 2020 10:50 AM