Background color of selected TabBarItem in Xamarin on iOS

Question

Using Xamarin.Forms, I have a custom TabbedPageRenderer in iOS. Now, I can change the text color on a selected TabBarItem, but I can't change the background color of the selected tab. Does anyone know how?

class CustomTabbedPageRenderer : TabbedRenderer
{
   public override UIViewController SelectedViewController
   {
       get
       {
           UITextAttributes attr = new UITextAttributes();
           attr.TextColor = UIColor.White;
           if (base.SelectedViewController != null)
           {
               base.SelectedViewController.TabBarItem.SetTitleTextAttributes(attr, UIControlState.Normal);                  
               // TODO: How to set background color for ONE item?
           }
           return base.SelectedViewController;
       }
       set
       {
           base.SelectedViewController = value;
       }
    }
}

score 6 · Accepted Answer · edited Jun 20 '20 at 09:12

The Best Solution:

Set Appearance in method ViewWillAppear in TabbedRenderer

Code:

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace TabbedPageWithNavigationPage.iOS
{
    class CustomTabbedPageRenderer : TabbedRenderer
    {
        public UIImage imageWithColor(CGSize size)
        {
            CGRect rect = new CGRect(0, 0, size.Width, size.Height);
            UIGraphics.BeginImageContext(size);

            using (CGContext context = UIGraphics.GetCurrentContext())
            {
                context.SetFillColor(UIColor.Red.CGColor);
                context.FillRect(rect);
            }

            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();

            return image;
        }

        public override void ViewWillAppear(bool animated)
        {
            base.ViewWillAppear(animated);

            CGSize size = new CGSize(TabBar.Frame.Width / TabBar.Items.Length, TabBar.Frame.Height);

            //Background Color
            UITabBar.Appearance.SelectionIndicatorImage = imageWithColor(size);
            //Normal title Color
            UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes { TextColor = UIColor.White }, UIControlState.Normal);
            //Selected title Color
            UITabBarItem.Appearance.SetTitleTextAttributes(new UITextAttributes { TextColor = UIColor.Black }, UIControlState.Selected);
        }
    }
}

Works like a charm! Will remove my buggy Subview answer and set this as accepted answer. — Mystogan, Nov 08 '17 at 08:03
Thanks. It looks nice until the iPhone X came in. Trying to figure it out. — anuith, Nov 14 '17 at 14:25

score 2 · Answer 2 · answered Nov 07 '17 at 09:39

2

You can use appearance API to change background color on tabbed page

OR

you can use custom render(as you tried here)

[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageCustom))]

namespace MobileCRM.iOS {     


public class TabbedPageCustom : TabbedRenderer  {    

public TabbedPageCustom ()   {      

   TabBar.TintColor = MonoTouch.UIKit.UIColor.Black;
   TabBar.BarTintColor = MonoTouch.UIKit.UIColor.Blue;  
   TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Green;         
}    

}

}

Hope you can continue from this...

answered Nov 07 '17 at 09:39

Shiwanka Chathuranga

871
10
21

Thank you for the answer, but I can't see anything about changing the background color for one item (not the whole row) - but will look deeper into the appearance API. – Mystogan Nov 07 '17 at 09:51
TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Green; – Shiwanka Chathuranga Nov 07 '17 at 09:51
That changes the whole TabBar? I only want the selected TabBarItem changed. – Mystogan Nov 07 '17 at 09:53

Background color of selected TabBarItem in Xamarin on iOS

2 Answers2

The Best Solution:

Code:

Linked