Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-2906] Android: Modal window is hidden behind status bar

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2011-11-05T13:39:46.000+0000
Affected Version/sRelease 1.6.2
Fix Version/sSprint 2011-24, Release 1.7.2, Release 1.8.0
ComponentsAndroid
Labelsn/a
ReporterRick Blalock
AssigneeBill Dawson
Created2011-04-15T03:32:34.000+0000
Updated2011-11-05T13:39:46.000+0000

Description

Problem

Modal window's "top" is positioned under the Android status bar.

Sample Code

See Dawson's comments.

Note from Customer

From a customer (sums it up perfectly): "Hello, when opening a modal window for droid, it appears that the 'top' coordinate for the new window is inconsistent when compared to iphone. In the kitchen sink example (Windows Standalone -> Traditional Modal) you can see that the vibrate button is position with the top coordinate of 0 being the very top of the screen. This means that if you set top to 0 the button will be partially covered by the status bar. So you need to account for the status bar width when positioning elements. This is not the case for iphone as the top '0' coordinate actually references the starting point directly below the navigation bar. Obviously the work around is simple enough but I think this should probably be considered a bug or feature request? Here's a simple example:"

Tested On

BROKEN on Titanium SDK version: 1.7.0 (05/26/11 19:05 70a26b8...)

Associated Helpdesk Ticket

http://appc.me/c/65951

Comments

  1. Dawson Toth 2011-05-09

    I have duplicated this issue with the following code: 
       var win = Ti.UI.createWindow({ backgroundColor: '#f00'});
   var label = Ti.UI.createLabel({
       text: 'Hello, world! I am behind the status bar! :(',
       top: 0, height: 'auto', color: '#fff', fontSize: '18dp'
   });
   win.add(label);
   win.open({ modal: true });
    Note that if you move the "modal: true" out of the win.open call, and place it directly in the window properties, this bug will NOT be present. It is only when you have modal: true as an argument to win.open that this shows up.
  2. Dawson Toth 2011-05-31

    Another Reproduction

       Ti.UI.setBackgroundColor('#fff');
   var winTest = Ti.UI.createWindow({ title: 'Test Window', url: "test.js", modal: true });
   winTest.open();
   
       var win = Ti.UI.currentWindow;
   
   var label = Ti.UI.createLabel({ top: 0, width: 200, text: "label #1"});
   win.add(label);
    
   var label2 = Ti.UI.createLabel({ top: 30, width: 200, text: "label #2"});
   win.add(label2);
    
   var label3= Ti.UI.createLabel({ top: 60, width: 200, text: "label #3"});
   win.add(label3);
  3. Bill Dawson 2011-06-16

    See Diane Hackborn's comment in: http://groups.google.com/group/android-developers/browse_thread/thread/ef45de483407d5cd ... re fullscreen (no status bar) not working with translucency (our modal activity is translucent)
  4. Bill Dawson 2011-06-16

    Pull request ready: https://github.com/appcelerator/titanium_mobile/pull/126 Problem was we were using a fullscreen translucent theme for the modal activity. Two problems with this: * Parity problem: our iOS implementation is not using a fullscreen window by default for modals - -not sure why we were. * The combo of fullscreen (no status bar) + translucency does not work in Android (see link in previous comment). Switched to Theme.Translucent (instead of Theme.Translucent.NoTitleBar.Fullscreen) and now respect the navBarHidden and fullscreen flags as well when used with modal flag.
  5. Don Thorp 2011-06-17

    if modal is present we always use the modal theme even when modal is false. *app.js* 
           Ti.UI.setBackgroundColor('#fff');
       var winTest = Ti.UI.createWindow({ title: 'Test Window', url: "test.js",      navBarHidden: false, fullscreen: false, modal: false });
       winTest.open();
    *test.js* 
           var win = Ti.UI.currentWindow;
   
       var winTest2 = Ti.UI.createWindow({ title: 'Test Window 2', url: "test2.js", navBarHidden: true, fullscreen: true, modal: true });
       winTest2.open();
    *test2.js* 
           var win = Ti.UI.currentWindow;
   
       var label = Ti.UI.createLabel({ top: 0, width: 200, text: "label #1"});
       win.add(label);
    
       var label2 = Ti.UI.createLabel({ top: 30, width: 200, text: "label #2"});
       win.add(label2);
    
       var label3= Ti.UI.createLabel({ top: 60, width: 200, text: "label #3"});
       win.add(label3);
  6. Opie Cyrus 2011-06-17

    tested fix on 2.2 device and behavior looks good. approve of accepting associated pull request
  7. Don Thorp 2011-06-20

    Merged to master.
  8. Natalie Huynh 2011-07-06

    Tested with Nexus S 2.3.4 and Nexus One 2.2.2 with 1.7.2.v20110630161836
  9. Don Thorp 2011-11-05

    Fixing labels.

JSON Source