Custom Icon and Text Color for a TabbedPage

Hey all,

I recently went through the super struggle of trying to build a custom TabBar for a TabbedPage. Our designs entail icons and text that are black regardless of whether the tab is selected or not. This not being something easily customizable through Xamarin.Forms, so I thought I would share with you my solution. I'm also not sure if this is very efficient, and it feels kind of hacky, but hey it works and hopefully UX can hop off me for a bit ;) Cheers!

  • Note: This is only for iOS. An Android Solution hasn't been found yet, but thats just because I haven't tried.

[assembly: ExportRenderer (typeof(TabbedNavigationPage), typeof(TabbedNavigationPageRenderer))]

namespace EXAMPLE.iOS
{
    public class TabbedNavigationPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged (VisualElementChangedEventArgs e)
        {
            base.OnElementChanged (e);

            TabBar.TintColor = UIColor.Black;
        }

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

            if (TabBar.Items != null) {
                var items = TabBar.Items;
                for (int i = 0; i < items.Length; i++) {
                    items [i].Image = items[i].Image.ImageWithRenderingMode (UIImageRenderingMode.AlwaysOriginal);
                    items [i].SetTitleTextAttributes (new UITextAttributes () { TextColor = UIColor.Black }, UIControlState.Normal);
                }
            }
        }
    }
}

and in my shared code

public class TabbedNavigationPage : TabbedPage
    {
        public TabbedNavigationPage ()
        {
            var activeBoxes = new NavigationPage(new ActiveBoxes ())
                {
                    Title = "Active Boxes",
                    Icon = "box"
            };
            var sbCustomers = new NavigationPage (new MyCustomersPage ())
                {
                    Title = "SB Customers",
                    Icon = "users"
            };
            var search = new NavigationPage (new SearchPage ()) {
                Title = "Search",
                Icon = "search"
            };

            Children.Add (activeBoxes);
            Children.Add (sbCustomers);
            Children.Add (search);
        }
    }

Posts

Sign In or Register to comment.