Modal Window in Android

You must Login before you can answer or comment on any questions.

I trying to create a modal window that when opens will cover approx 80% of the previous window. The screen that I'm getting is fullscreen, completely covering the prior screen and displays the nav bar even though I have set navBar set to false.

Here is the code.

imageInfo.addEventListener('click',function(e) {
        var PreQualInfoWindow = require('ui/common/PreQualInfoWindow');
    new PreQualInfoWindow().open();         
});
PreQualInfoWindow 
function PreQualInfoWindow() {
 
    var win = Ti.UI.createWindow({
            modal: true,
            navbarHidden: true,
            height: '600dp', width: '600dp',
            backgroundColor: 'white',                                              
    });
    return win;
};
 
module.exports = PreQualInfoWindow;
Any help would be greatly appreciated.

Build 2.1.1.201207271312

1 Answer

Accepted Answer

Mind your humps:

navBarHidden: true

— answered 8 months ago by Stephen Feather
answer permalink
4 Comments

  • To fake a partial window, I tend to make it 100%, make it opacity: 2 or so, then add a view to the center containing the information I want. You can then skin the view to look like a popover, or whatever feel you are going for. 

    var self = Ti.UI.createWindow({
    title: 'PreQual', 
    navBarHidden: true, 
    backgroundColor: '#262626', 
    opacity: .2});
 
var popover = Ti.UI.createView({
    backgroundColor: '#222222', 
    borderRadius: 15,
    width: 280, 
    height: 340});
 
self.add(popover);
    Then populate popover with the other views/objects you need.

    You can also emulate the iPad popover feel by allow the user to click on anything other than the popoverview to close the window: 

    self.addEventListener('singletap',function(e){
    Ti.API.info(e.source.title);
    if(e.source.title === 'PreQual'){
        self.close();
    }
});
    Even though we aren't displaying the title, we trigger the closing of the window if our event source isn't the other elements.

    If you want to mix and match this with an iPad popover, add these: 

    self.show = function(args){
    self.open();
};
 
self.hide = function(args){
    self.close();
};
    Now you don't have to have a bunch of conditionals lying around to show/hide on iPad and open/close on Android.

    — commented 8 months ago by Stephen Feather

  • Nice technique, Stephen!

    — commented 8 months ago by Jason Priebe

  • Thank you, Jason. The concept of thinking differently I owe to a day with Vince Baskerville (@whoisvince) who taught me how to see UX a bit differently.

    That being said, I hacked up your android button bar library a bit as well. Will post something beginning of next week.

    — commented 8 months ago by Stephen Feather

  • Show 1 more comment

Your Answer

Think you can help? Login to answer this question!