Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-15077] iOS7: Support new UIStatusBarStyleLightContent style

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-09-10T22:05:29.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 19, 2013 Sprint 19 API, Release 3.1.3, Release 3.2.0
ComponentsiOS
Labelsios7, qe-closed-3.1.3, statusbar
ReporterFokke Zandbergen
AssigneeVishal Duggal
Created2013-09-07T14:54:37.000+0000
Updated2013-09-13T23:36:12.000+0000

Description

If you don't want your (lightweight) view to be positioned under the status bar, you can set top to 20. This will cause the main view's background color (set via Ti.UI.backgroundColor or image to be visible under the status bar. This works fine as long as the background color/image is light, because the status bar text is always black. On a dark (black) background, the only thing you will see is the green battery icon. To fix this, all we need is the new UIStatusBarStyleLightContent style to be exposed as an option for Ti.UI.iPhone.statusBarStyle. For example as Ti.UI.iPhone.StatusBar.LIGHT_CONTENT. Information can be found at: https://developer.apple.com/library/prerelease/ios/documentation/UserExperience/Conceptual/TransitionGuide/Bars.html#//apple_ref/doc/uid/TP40013174-CH8-SW2

To reproduce/test

Create app: titanium create -p ios --id test.statusbar -n TestStatusBar

Use as app.js:

    Ti.UI.backgroundColor = '#000';
    Ti.UI.createWindow({backgroundColor:'white', top: 20}).open();

Run the app to see you can only see the green battery icon (as attached).

Change the first line to:

    Ti.UI.backgroundColor = '#ddd';

Run the app to see the text was actually there but not visible black on black.

Attachments

FileDateSize
fixed.png2013-09-13T23:33:53.000+000033566
foto.PNG2013-09-07T15:08:46.000+000010022

Comments

  1. Fokke Zandbergen 2013-09-07

    I saw UIStatusBarStyleLightContent was mentioned in the resolved TIMOB-14983, but it's not fixed in the nightly build.
  2. Marcus Olovsson 2013-09-08

    I'd love if this could be fixed before 3.1.3 is officially released! I have a few apps with graphics that cover the entire screen, and white text would look so much better than black.
  3. Ingo Muschenetz 2013-09-08

    [~arood] Would you mind attaching a screenshot of your app?
  4. Marcus Olovsson 2013-09-08

    Ingo Muschenetz: Here's an example: http://mrcs.se/RGUy (content is blurred because I don't know if I'm allowed to show the app yet, as it isn't released yet). As you can see the app itself is using white text so naturally it would look nice with white text in the statusbar.
  5. Sabil Rahim 2013-09-08

    UIStatusBarStyleLightContent - This property is already exposed through [Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK](http://docs.appcelerator.com/titanium/latest/#!/api/Titanium.UI.iPhone.StatusBar-property-TRANSLUCENT_BLACK). On iOS 6 this would be transparent black style and on iOS 7 this would be a light status bar, intended for use on dark backgrounds. This value can be set on a per window basis by using the statusBarStyle property of the window. 
       Ti.UI.createWindow({backgroundColor:'black', statusBarStyle: Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK}).open();
  6. Yamill Vallecillo 2013-09-09

    Sabil, that does not work.
  7. Fokke Zandbergen 2013-09-09

    OK, got it working by setting it through the window. Maybe it's a good idea to document the difference between setting:

    <ti:app><ios><plist><dict><key>UIStatusBarStyle</key><string>UIStatusBarStyleBlackTranslucent</string></dict></plist></ios></ti:app>

    Ti.UI.iPhone.setStatsuBarStyle(Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK);

    Ti.UI.createWindow({statusBarStyle: Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK});

    As far as I know understand and have tested in 3.1.3 for iOS7, only the third works. The docs should be very clear about number one and two being dropped. And maybe it's a good idea to update the default app tiapp.xml as well, since it still includes the deprecated <statusbar-style> element.
  8. Marcus Olovsson 2013-09-09

    I can also confirm that it works on window creation, I was previously using in tiapp.xml.
  9. Fokke Zandbergen 2013-09-09

    I still think though that Ti.UI.iPhone.StatusBar.LIGHT_CONTENT should be made available, since the others except Ti.UI.iPhone.StatusBar.DEFAULT are deprecated in iOS7. I don't know what happens when an app is compiled again iOS6 with LIGHT_CONTENT set though?
  10. Yamill Vallecillo 2013-09-09

    We should be able to update the UI Status Bar light style through the tiapp.xml. It's overkill to set it to every window creation. Or, be able to set it globally with Ti.UI.iPhone.setStatusBarStyle(Titanium.UI.iPhone.StatusBar.TRANSLUCENT_BLACK) in alloy.js
  11. Vishal Duggal 2013-09-10

    https://github.com/appcelerator/titanium_mobile/pull/4666
  12. Vishal Duggal 2013-09-10

    backport to 3_1_X https://github.com/appcelerator/titanium_mobile/pull/4669
  13. kosso 2013-09-12

    So what are the definitive steps to getting the light text in the status bar? I can't seem to get it to work on the latest continuous build. I think many people will get stuck on this. Maybe someone needs to update the migration guide? http://docs.appcelerator.com/titanium/latest/#!/guide/iOS_7_Migration_Guide
  14. Sabil Rahim 2013-09-12

    [~kosso] add the following to your tiapp.xml if you want you entire app to have a light content style. 
        <ios>
          <plist>
        	      <dict>
        		      <key>UIStatusBarStyle</key>  
                               <string>UIStatusBarStyleLightContent</string>
        	      </dict>
          </plist>
    </ios>
    Or if you want to control this property in a per window basis set the window property to statusBarStyle to Titanium.UI.iPhone.StatusBar.LIGHT_CONTENT (on iOS 7)
  15. kosso 2013-09-12

    Thanks Sabil. After much testing and re-building of various configurations, that's the way I just got it to work before seeing this ;)
  16. Olga Romero 2013-09-13

    Tested and verified the fix, updating tiapp.xml in a default classic project. Appcelerator Studio, build: 3.1.3.201309132456 Titanium SDK, build:3.1.3.v20130913121549 Mac OS 10.8.4 Xcode 5 CLI: 3.1.2 Alloy: 1.2.2-cr Devces: iPhone5 iOS7 GM seed iPad3 iOS7 GM seed Attached a screenshot fixed.png

JSON Source