how to use multicolored icons on tabbedPage

Unloki59Unloki59 Member ✭✭

Hi all,
I just want to add an multicolored icon on my tabbedPage but my tabbedPage display the icon with one color
thanks for ur help

Tagged:

Best Answer

Answers

  • LandLuLandLu Member, Xamarin Team Xamurai

    If you want to show multicolor tabbar Items on iOS, you have to use the custom renderer for TabbedPage to change the image to the original color:

    [assembly: ExportRenderer(typeof(YourTabbedPage), typeof(CustomTabbedRenderer))]
    namespace TabbedDemo.iOS
    {
        public class CustomTabbedRenderer : TabbedRenderer
        {
            public override void ViewWillAppear(bool animated)
            {
                base.ViewWillAppear(animated);
    
                var vcs = ViewControllers;
    
                foreach (UIViewController vc in vcs)
                {
                    if (vc.TabBarItem.Image != null)
                    {
                        vc.TabBarItem.Image = vc.TabBarItem.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                    if (vc.TabBarItem.SelectedImage != null)
                    {
                        // Comment this if you don't want to change the selected image's color
                        vc.TabBarItem.SelectedImage = vc.TabBarItem.SelectedImage.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
                    }
                }            
            }
        }
    }
    
  • Unloki59Unloki59 Member ✭✭

    OK thanks, and the same solution for android ?

  • LandLuLandLu Member, Xamarin Team Xamurai

    Android displays multicolor without any extra settings:

  • Unloki59Unloki59 Member ✭✭

    Hi thanks for ur answer, the multicolor was display on Android but when i set the TabbedPage Bottom (android:TabbedPage.ToolbarPlacement="Bottom") the images are display with one color(like IOS)

Sign In or Register to comment.