CODEWITHSUNDEEP
c#xamarinxamarin.iosxamarin.forms
Botea Bogdan
Botea Bogdan

Reputation: 191

Xamarin Forms TabbedPage Tab Unselected Color

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

enter image description here

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!

Upvotes: 0

Views: 4854

Answers (3)

Mark Z.
Mark Z.

Reputation: 2447

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).

Upvotes: 1

Nick Kovalsky
Nick Kovalsky

Reputation: 6452

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

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

Upvotes: 3

Botea Bogdan
Botea Bogdan

Reputation: 191

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);
     }
}

Upvotes: 1

Related Questions