[TIMOB-14983] iOS7: barColor does not work properly

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2013-09-04T17:26:49.000+0000
Affected Version/s	n/a
Fix Version/s	2013 Sprint 18, 2013 Sprint 18 API, Release 3.1.3, Release 3.2.0
Components	iOS
Labels	ios7, module_navwindow, qe-testadded, triage
Reporter	Davide Cassenti
Assignee	Ingo Muschenetz
Created	2013-08-28T13:09:32.000+0000
Updated	2014-04-21T09:06:42.000+0000

Description

Problem description

The barColor property is not working properly on iOS7. Tested with different SDK versions results are different, but they never seem correct. Everything works fine on iOS 6.1.

Code to reproduce the issue

var first = Ti.UI.createWindow({
  backgroundColor:"white",
  barColor: "black",
  title:"My App"
});

var navGroup = Ti.UI.iPhone.createNavigationGroup({
  window: first
});

var main = Ti.UI.createWindow();

main.add(navGroup);
main.open();

Result

Expected: the bar should be black, text should be shown properly Actual result: see screenshots.

Attachments

File	Date	Size
iOS6.png	2013-09-02T17:49:29.000+0000	25301
iOS7.png	2013-09-02T17:49:29.000+0000	22632
iOS7-SDK3.1.3.v20130902103448-XCode5-DP6.png	2013-09-03T16:52:38.000+0000	20586
iOS Simulator Screen shot Sep 3, 2013 10.36.09 AM.png	2013-09-03T17:36:45.000+0000	16016

Comments

Ingo Muschenetz 2013-08-28

[~dcassenti] Is this not a duplicate of one of these issues? TIMOB-14287 or TIMOB-14945?

Vishal Duggal 2013-08-30

Try this to see behavior of navTintColor. To get solid black set translucent to false on window. (Default true on IOS7)

   var label = Ti.UI.createLabel({
       text:'My App2',
       color:'white'
   })
   
   var first = Ti.UI.createWindow({
     backgroundColor:"white",
     barColor: "black",
     navTintColor:'white',
     titleControl:label
   });
    
   var navGroup = Ti.UI.iPhone.createNavigationGroup({
     window: first
   });
    
   var main = Ti.UI.createWindow();
    
   main.add(navGroup);
   main.open();
   
   var btn = Ti.UI.createButton({
       title:'PUSH'
   })
   
   var second = Ti.UI.createWindow({
     backgroundColor:"white",
     barColor: "black",
     navTintColor:'white',
     title:"Second"
   });
   
   btn.addEventListener('click',function(){
       navGroup.push(second);
   })
   
   first.add(btn);

Ingo Muschenetz 2013-09-03

From my brief read of the Apple docs, it would seem that we would need to be altering the UIStatusBarStyle constant to specify whether the status bar content should be dark (UIStatusBarStyleDefault) or light (UIStatusBarStyleLightContent): * UIStatusBarStyleDefault displays dark content. Use when light content is behind the status bar. * UIStatusBarStyleLightContent displays light content. Use when dark content is behind the status bar.
Davide Cassenti 2013-09-03

Downloaded the latest SDK and XCode, same result as before. In particular: XCode 5 DP6 iOS 7 beta 6 SDK 3.1.3.v20130902103448 [~ingo] Is this the expected behavior? I don't see a good result on top (black text on dark gray background), and the navigation bar is dark gray.
Vishal Duggal 2013-09-03

ok, IOS7 has removed all gradient effect. Not us APPLE has done so. About the dark gray Vs Black, as said before, set translucent to false. Attaching screenshot with translucent false.
Ingo Muschenetz 2013-09-03

[~vduggal], agreed. But how about making the status bar text white?
Sid Ghosh 2013-09-04

Team, Any update on this issue ? Sid
Ingo Muschenetz 2013-09-04

TiUIPhoneStatusBar is the property you want to set to change the color.

Priya Agarwal 2013-09-09

Verified the fixed with: Appc Studio: 3.1.3.201309072408 Sdk:3.1.3.v20130908095038 CLI version : 3.1.2 Alloy : 1.2.2-beta MAC OSX: 10.8.4 XCode : 5beta6 Device: Iphone5(v7) code used to verify the fix was

   var label = Ti.UI.createLabel({
       text:'My App2',
       color:'white'
   });
    
   var first = Ti.UI.createWindow({
     backgroundColor:"white",
     barColor: "black",
     translucent:false,
     navTintColor:'white',
     titleControl:label
   });
     
   var navGroup = Ti.UI.iPhone.createNavigationGroup({
     window: first
   });
     
   var main = Ti.UI.createWindow();
     
   main.add(navGroup);
   main.open();
    
   var btn = Ti.UI.createButton({
       title:'PUSH'
   });
    
   var second = Ti.UI.createWindow({
     backgroundColor:"white",
     barColor: "black",
     navTintColor:'white',
     title:"Second"
   });
    
   btn.addEventListener('click',function(){
       navGroup.push(second);
   });
    
   first.add(btn);
   main.open();

JSON Source