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)

  • alexander9727alexander9727 Member
    edited September 2019

    Thanks for this thread it really helped me with the iOS icons. I've done exactly what is mentioned and it works fine except that in the more tab the icons still remain coloured not like the others. After some research into it I tried to change it using the MoreNavigationController. This is the code I am using but I'm unable to get it to work.

    `var vcx = MoreNavigationController.ViewControllers[0];

            var tableView = (UITableView)vcx.View;
    
            tableView.TableFooterView = new UIView(CGRect.Empty);
    
            tableView.BackgroundColor = UIColor.FromPatternImage(UIImage.FromFile("bg_03.png"));
    
            foreach(var cell in tableView.VisibleCells)
            {
    
                cell.ImageView.Image = cell.ImageView.Image.ImageWithRenderingMode(UIImageRenderingMode.AlwaysOriginal);
    
            }`
    

    Any help appreciated. Thanks in advance

Sign In or Register to comment.