How to set color to icons in the tabbedPage in ios?

Thank you in advance,
shreyanka

Answers

  • @Sme i have two icons in my tabbed page if suppose OnClick of first icon i want different color and OnClick of second icon different

  • SmeSme USMember ✭✭✭
    edited July 2017

    @shreyankaBakkannavar said:
    @Sme i have two icons in my tabbed page if suppose OnClick of first icon i want different color and OnClick of second icon different

    Hmm, I don't think iOS offers a way to specifically set a single tab icon's color. However, I suppose what you could do is listen to the Tabbed Page's CurrentPageChanged event, and depending on what page was selected, you can use a dependency service to call the code:

    public void ChangeSelectedTabColor(int r, int g, int b)
    {
        UITabBarItem.Appearance.SetTitleTextAttributes(
            new UITextAttributes()
            {
                TextColor = UIColor.FromRGB(r, g, b)
            }, 
            UIControlState.Selected);
    }
    

    Which will 'update' the selected tab icon color each time you tap a page.

  • VenkataSwamyVenkataSwamy INMember ✭✭✭
    edited July 2017

    Try this

       [assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]
       namespace Kern.Client.iOS.Renderers
        {
           public class TabbedPageRenderer : TabbedRenderer
            {
              protected override void OnElementChanged(VisualElementChangedEventArgs e)
                {
                  base.OnElementChanged(e);
                 TabBar.TintColor = MonoTouch.UIKit.UIColor.Black;
                 TabBar.BarTintColor = MonoTouch.UIKit.UIColor.FromRGB(255, 128, 0);
                 TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Gray;
               }
           }
      }
    

    http://motzcod.es/post/157544468267/xamarin-forms-android-selected-and-unselected-tab-colors

  • JFMGJFMG DEMember ✭✭
    edited November 2018

    In addition to VenkataSwamy's answer:

    If you want to set the color for unselected tab bar items on iOS, you can add:

    TabBar.UnselectedItemTintColor = UIColor.Black;
    

    to your custom renderer.

    This will change the color of all unselected icons and its text

  • grilosapegrilosape Member
    edited June 8

    I have tried to set the forms 4.0 tabbedpage icons colors using the follow example, but it is not working. Any ideas?

    assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]

    namespace Kern.Client.iOS.Renderers
    {
    public class TabbedPageRenderer : TabbedRenderer
    {
    protected override void OnElementChanged(VisualElementChangedEventArgs e)
    {
    base.OnElementChanged(e);
    TabBar.TintColor = MonoTouch.UIKit.UIColor.Black;
    TabBar.BarTintColor = MonoTouch.UIKit.UIColor.FromRGB(255, 128, 0);
    TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Gray;
    }
    }
    }

  • grilosapegrilosape Member
    edited June 8

    Hey Guys, I am new with Xamarin and I have tried to use the follow code to change TabbedPage icon colors on forms 4.0, but It is not working. Have you had any issues?

    Thanks!

    [assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]
       namespace Kern.Client.iOS.Renderers
        {
           public class TabbedPageRenderer : TabbedRenderer
            {
              protected override void OnElementChanged(VisualElementChangedEventArgs e)
                {
                  base.OnElementChanged(e);
                 TabBar.TintColor = MonoTouch.UIKit.UIColor.Black;
                 TabBar.BarTintColor = MonoTouch.UIKit.UIColor.FromRGB(255, 128, 0);
                 TabBar.BackgroundColor = MonoTouch.UIKit.UIColor.Gray;
               }
           }
      }
    
  • sfuschettosfuschetto Member ✭✭

    Hi there!
    After upgraded to Xamarin.Forms 4.0 I'm not able to change Tab Bar Icon Color (only on iOS).
    I followed instructions of James Montemagno but still not working.
    Furthermore, just create a new project from scratch using Visual Studio Wizard and also in this case icon still blue.
    @grilosape It seems you are suffering the same issue, did you solved?

    Tnx!

  • diogocsantosdiogocsantos Member ✭✭
    edited July 10

    @sfuschetto @grilosape Just set SelectedTabColor property to your color like below:

    <TabbedPage
        android:TabbedPage.IsSwipePagingEnabled="False"
        android:TabbedPage.ToolbarPlacement="Bottom"
        SelectedTabColor="Your color"
        UnselectedTabColor="Your color">
    

    In Xamarin 4.0 they added TabbedPage.UnselectedTabColorProperty and TabbedPage.SelectedTabColorProperty

  • sfuschettosfuschetto Member ✭✭
    @diogocsantos Thanks for your answer. Unfortunately, my issue happens on iOS. However, I appreciate your kindness.

    Sam
  • diogocsantosdiogocsantos Member ✭✭

    @sfuschetto It should work for both platforms

  • sfuschettosfuschetto Member ✭✭
    @diogocsantos Really? I’ll do a test asap, but not before next Monday. Thanks!
  • diogocsantosdiogocsantos Member ✭✭

    @sfuschetto Yes! Had a problem after upgrading as well, and only in iOS. All working after setting those property's, no custom render needed.

  • sfuschettosfuschetto Member ✭✭
    @diogocsantos You make me happy! Tnx!
  • ashraftmashraftm USMember ✭✭

    @diogocsantos Yes this works, no custom rendering needed, thanks . This also works with FontImageSource

  • sfuschettosfuschetto Member ✭✭

    Confirm! It works!

Sign In or Register to comment.