[TIMOB-17842] iOS: tabsTintColor is not being honored

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2015-05-06T23:47:52.000+0000
Affected Version/s	Release 3.4.0
Fix Version/s	Release 4.1.0
Components	iOS
Labels	TCSupportTriage, tabgroup, tabsTintColor
Reporter	Joseph Sachs
Assignee	Chee Kiat Ng
Created	2014-07-30T01:40:13.000+0000
Updated	2015-06-19T23:23:56.000+0000

Description

Problem Description

tabsTintColor is not being honored

Test Code

var tabGroup = Ti.UI.createTabGroup( { 
       activeTabIconTint:'#FFFFFF',
       tabsTintColor:'#6c8d90',
       tabsBackgroundColor: '#000000',
       //tabsBackgroundImage:'/images/tabBar@2x.png',
       //translucent: true,
});

var tabMatches = Ti.UI.createTab({
	icon: '/images/tabBuddies@2x.png',
	activeIcon: '/images/tabBuddies@2x.png',
	title: 'BUDDIES', activeIconIsMask:false, iconIsmask:false,
	window: matchesWin
});
matchesWin.containingTab = tabMatches;

Test Result

tabsTintColor is not being honored, it is always set to #929292

Attachments

File	Date	Size
iOS Simulator Screen Shot 4 May 2015 3.56.52 pm.png	2015-05-04T08:17:59.000+0000	31102
KS_nav_ui_blue.png	2015-05-04T08:19:05.000+0000	2497
KS_nav_views_blue.png	2015-05-04T08:19:06.000+0000	2427
Screen Shot 2014-07-29 at 9.39.39 PM.png	2014-07-30T01:40:13.000+0000	11496

Comments

Joseph Sachs 2014-08-09

The issue has been raised by several Q&As found here: - http://developer.appcelerator.com/question/158266/tabgroup-inactive-tabcolor - http://developer.appcelerator.com/question/160613/how-can-i-change-the-default-tintcolor-of-inactive-tabs-icons-in-a-tabgroup
Mark Duncan 2014-08-22

Can confirm. I've spent most of the day trying to figure out how to work around this with no success. I can generate icons of the color I want to use and set the iconIsMask property to false (the documentation has a typo and refers to this property as iconIsmask which won't work), but the text remains gray no matter what tint settings are applied.
Rene Pot 2014-10-13

Also confirm. Color does not change for inactive tabs

Rene Pot 2014-10-13

This StackOverflow ticket seems to describe how to implement it in iOS: http://stackoverflow.com/questions/22767098/how-to-change-inactive-icon-text-color-on-tab-bar Also, the updateMoreBar function is where the functionality probably should go. Code below goes into that function, it'll make inactive text red. If that helps anything at all for implementation.

      NSDictionary *theAttr = @{UITextAttributeTextColor: [UIColor redColor],
                         UITextAttributeTextShadowColor: [UIColor whiteColor],
                         UITextAttributeTextShadowOffset: [NSValue valueWithUIOffset:UIOffsetMake(0.0, 1.0)],
                         UITextAttributeFont:[UIFont systemFontOfSize:12] };
       [navBar setTitleTextAttributes:theAttr];
       [[UITabBarItem appearance] setTitleTextAttributes:theAttr forState:UIControlStateNormal];
   //    [[UITabBarItem appearance] setTitleTextAttributes:theAttr forState:UIControlStateSelected];

Cyprian Kowalczyk 2015-01-21

Any update?

Chee Kiat Ng 2015-05-04

Unfortunately, after some investigation, the native behavior in iOS makes it not possible to preset a tint color for inactive tabs. However, there are work-arounds found online, and titanium is able to use that work around as well. Basically, you have to preset all your icons to the color you want for inactive icons. After which, you configure it such that for the selected tab (active tab), the icon will become a mask to allow the desired highlight color to show. See below sample code:

   Titanium.UI.setBackgroundColor('#000');
    
   var tabGroup = Titanium.UI.createTabGroup({
   	tabsTintColor: 'red'
   });
    
   var win1 = Titanium.UI.createWindow({
       title:'Tab 1',
       backgroundColor:'#fff'
   });
   var tab1 = Titanium.UI.createTab({
       icon:'images/tabs/KS_nav_views_blue.png',
       activeIcon: 'images/tabs/KS_nav_views_blue.png',
       title:'Tab 1',
       window:win1,
       activeIconIsMask:true, 
       iconIsMask:false,
   //    titleColor: '#6a63d7',
    //   activeTitleColor: 'red'
   });
    
   var win2 = Titanium.UI.createWindow({
       title:'Tab 2',
       backgroundColor:'#fff'
   });
   var tab2 = Titanium.UI.createTab({
       icon:'images/tabs/KS_nav_ui_blue.png',
       activeIcon: 'images/tabs/KS_nav_ui_blue.png',
       title:'Tab 2',
       window:win2,
       activeIconIsMask:true, 
       iconIsMask:false,
   //    titleColor: '#6a63d7',
     //  activeTitleColor: 'red'
   });
   
   var win3 = Titanium.UI.createWindow({
       title:'Tab 3',
       backgroundColor:'#fff'
   });
   var tab3 = Titanium.UI.createTab({
       icon:'images/tabs/KS_nav_ui_blue.png',
       activeIcon: 'images/tabs/KS_nav_ui_blue.png',
       title:'Tab 3',
       window:win3,
       activeIconIsMask:true, 
       iconIsMask:false,
    //   titleColor: '#6a63d7',
    //   activeTitleColor: 'red'
   });
   
   tabGroup.addTab(tab1);
   tabGroup.addTab(tab2);
   tabGroup.addTab(tab3);
   
    
   tabGroup.open();

Attached screenshot, and 'blue' png icons. Will be submitting a PR shortly to include the setting of colors for the tab titles (active and inactive), as well as document updates.

Chee Kiat Ng 2015-05-05

PR Here: https://github.com/appcelerator/titanium_mobile/pull/6820 uncomment titleColor and activeTitleColor in above sample code to see it in action.
Lokesh Choudhary 2015-06-19

Verified the fix by running the code above. The tab changes its color to the "activeTitlecolor" set in the code. Closing. Environment: Appc Studio : 4.1.0.201506151224 Ti SDK : 4.1.0.v20150619100430 Ti CLI : 4.0.1 Alloy : 1.6.2 MAC Yosemite : 10.10.3 Appc NPM : 4.1.0-1 Appc CLI : 4.1.0-1 Node: v0.10.37 Iphone 6 : IOS 8.2

JSON Source