Xamarin Forms TabbedPage Tab Unselected Color

Question

I'm trying to change the colour of the unselected icons from the TabbedPage.

I have a custom TabbedRenderer :

public class CustomTabbedPage : TabbedRenderer
{
    public override void ViewWillAppear(bool animated)
    {
        if (TabBar == null) return;
        if (TabBar.Items == null) return;

        var tabs = Element as TabbedPage;
        if (tabs != null)
        {
            for (int i = 0; i < TabBar.Items.Length; i++)
            {
                UpdateItem(TabBar.Items[i], tabs.Children[i].Icon);
            }
        }

        base.ViewWillAppear(animated);
    }

    private void UpdateItem(UITabBarItem item, string icon)
    {
        if (item == null)
            return;
        try
        {
            icon = icon.Replace(".png", " Filled.png");
            if (item == null) return;
            if (item.SelectedImage == null) return;
            if (item.SelectedImage.AccessibilityIdentifier == icon) return;
            item.SelectedImage = UIImage.FromBundle(icon);
            item.SelectedImage.AccessibilityIdentifier = icon;
        }
        catch (Exception ex)
        {
            Console.WriteLine("Unable to set selected icon: " + ex);
        }
    }
}

I have managed to change the selected item text colour and the unselected items text colour, but not the icon colours.

Thank you!

http://stackoverflow.com/questions/24526851/how-to-change-tabbar-icon-color-in-ios — Yuri S, Nov 07 '16 at 16:31

score 3 · Answer 1 · answered May 30 '17 at 21:53

3

Unselected icon color: In the very beginning or your ViewWillAppear event put a line:

        TabBar.UnselectedItemTintColor = UIColor.Red; //red is for the yay effect :)

answered May 30 '17 at 21:53

Nick Kovalsky

5,378
2
23
50

This was added on the latest Xamarin.Forms package. I was running 2.3.3.193 when I post the question. Thanks! – Botea Bogdan Jun 01 '17 at 05:36

score 1 · Accepted Answer · answered Nov 07 '16 at 21:00

private void UpdateItem(UITabBarItem item, string icon)
{
    if (item == null)
         return;
    try
    {
         string newIcon = icon.Replace(".png", " Filled.png");
         if (item == null) return;
         if (item.SelectedImage == null) return;
         if (item.SelectedImage.AccessibilityIdentifier == icon) return;

         item.Image = UIImage.FromBundle(icon);
         item.Image = item.Image.ImageWithRenderingMode(UIKit.UIImageRenderingMode.AlwaysOriginal);

         item.SelectedImage = UIImage.FromBundle(newIcon);
         item.SelectedImage = item.SelectedImage.ImageWithRenderingMode(UIKit.UIImageRenderingMode.AlwaysOriginal);

         item.SelectedImage.AccessibilityIdentifier = icon;
     }
     catch (Exception ex)
     {
         Console.WriteLine("Unable to set selected icon: " + ex);
     }
}

score 1 · Answer 3 · answered Sep 27 '19 at 04:13

1

Xamarin Forms 4+ now has SelectedTabColor and UnselectedTabColor properties on the TabbedPage object to easily set directly from shared code, which affects both the text and the icons (but swapping out a different image upon selection would still of course require a custom renderer).

answered Sep 27 '19 at 04:13

Mark Z.

2,127
16
33

I can confirm this works. You'd expect the var names to start with Bar as all the other settings such as BarTextColor start with Bar. (Useful for intellisense sakes.) – Luke Alderton Oct 31 '19 at 12:40

Xamarin Forms TabbedPage Tab Unselected Color

3 Answers3

Linked