Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

NavigationGroup equivalent on Android?

My UI is principally a series of table views, with a NavigationGroup at the top that lets me go back.

In Android it seems the NavigationGroup component does not exist. I have seen in Kitchen sink that I can open the next successive window with a tab component in a similiar way that the NavigationGroup works using the open() method, but I don't really want to lose the real estate at the top to tabs.

Suggestions?

— asked June 14th 2010 by Andrew Blair
  • android
  • navigationgroup
1 Comment
  • have you figured this out?

    — commented April 26th 2011 by travis k

2 Answers

  • I wrote a wrapper which implements some kind of navigation group for non-iPhone devices. Maybe useful for you:

    var ui = {};
    
    ui.createNavigatorGroup = function() {
    
        var me = {};
    
        if ( Ti.Platform.osname === 'iphone' || Ti.Platform.osname === 'ipad' ) {    
    
            // Create the navigator, create a window for the navigator,
            // and add the navigator to the window.
             var navGroup = Titanium.UI.iPhone.createNavigationGroup();    
            var winNav = Titanium.UI.createWindow();
            winNav.add(navGroup);
    
            me.open = function(win) {
                if ( ! navGroup.window ) {
                    // First time call, add the window to the navigator and open the navigator window
                    navGroup.window = win;            
                    winNav.open();
                }
                else {
                    // All other calls, open the window through the navigator
                    navGroup.open(win);            
                }
            };
    
            me.setRightButton = function(win, button) {
                win.setRightNavButton(button);
            };
    
            me.setLeftButton = function(win, button) {
                win.setLeftNavButton(button);
            };
        }
        else {
    
            var navViews = []; // A stack of navigation bars
            var navView;
    
            function pushNavBar() {
                navView = Ti.UI.createView({
                    top: 0,
                    height: 60,
                    backgroundColor: '#ccc'
                });                                    
                navViews.push(navView);            
            }
            function popNavBar() {
                navViews.pop();
                navView = navViews[navViews.length - 1];
            }
    
            // Make sure we always have a navView available to prepare            
            pushNavBar();
    
            me.open = function(win) {
                navView.add(Ti.UI.createLabel({
                    text: win.title,
                    color: '#333'            
                }));
    
                if ( navViews.length >= 2 ) {
                    var button = Ti.UI.createButton({
                        title: navViews[navViews.length - 2].win.title || '<-'
                    });
                    me.addLeftButton(win, button);
                    button.addEventListener('click', function() {
                        popNavBar();
                        win.close();
                    });
                }
    
                navView.win = win;
                win.add(navView);
    
                win.navBarHidden = true;
                win.open();
    
                pushNavBar(); // Prepare for the next window
            };
    
            me.addLeftButton = function(win, button) {
                button.top = 8;
                button.left = 5;
                button.width = 100;
                navView.add(button);
            };
    
            me.setRightButton = function(win, button) {
                button.top = 8;
                button.right = 5;
                button.width = 100;
                navView.add(button);
            };
        }
    
        return me;
    }
    

    Use it like this:

    function createWindowGreen(nav) {
        var win = Titanium.UI.createWindow({
            backgroundColor: "green",
            title: "Green"
        });
        win.add(Ti.UI.createLabel({
            text: "I'm GREEN",
            textAlign: 'center'
        }));
    
        return win;    
    }
    
    function createWindowBlue(nav) {
        var win = Titanium.UI.createWindow({
            backgroundColor: "blue",
            title: "Blue"
        });
        win.add(Ti.UI.createLabel({
            text: "I'm BLUE",
            textAlign: 'center'
        }));        
        var btn = Ti.UI.createButton({
            title: "Green"
        })
        nav.setRightButton(win, btn);
    
        btn.addEventListener('click', function(){
            nav.open(createWindowGreen(nav));    
        });
    
        return win;
    }
    
    function createWindowRed(nav) {
        var win = Titanium.UI.createWindow({
            backgroundColor: "red",
            title: "Red",
            exitOnClose: true
        });
        win.add(Ti.UI.createLabel({
            text: "I'm RED",
            textAlign: 'center'
        }));        
        var btn = Ti.UI.createButton({
            title: "Blue"
        })
        nav.setRightButton(win, btn);
    
        btn.addEventListener('click', function(){
            nav.open(createWindowBlue(nav));    
        });
    
        return win;
    }
    
    nav = ui.createNavigatorGroup();
    
    nav.open(createWindowRed(nav));
    
    — answered August 23rd 2011 by Mark Ruys
    permalink
    1 Comment
    • Very good solution. I was looking for some like this, and your solution is the best I found, including automatically a back button on new windows for Android.

      — commented August 22nd 2013 by Manuel Conde Vendrell
  • one thing I did was create a tabGroup as in the examples with a single tab, but set the tabGroup to not be visible. Add a listener to the open event of the tabGroup and then call tab.open(newWin). once this new window is open on the stack you can set the tabGroup back to visible.

    the user will not see the tabs and will not know that they are technically one window into the stack already. so basically at this point you can use that tab as your NavigationGroup.

    it seems kind hacky, but it works. You get the iPhone navigation button in the titleBar, and on android you get the correctly functionality of the back button.

    one thing to note - when you open new windows, you call open on the tab (not the tabGroup).

    — answered April 27th 2011 by Jake Jake
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.