How To Dock A Footer Menu To Bottom In Appcelerator Titanium?

How do I dock a footer menu to the bottom of the screen on Android and iPhone in Appcelerator Titanium? I want to display 3 icons on the bottom of the screen.

Solution 1:

I used Titanium.UI.View and set bottom: 0 to get it to dock to the bottom.

Solution 2:

Yes, we use Ti.UI.Toolbar for this. Let see this example code:

var space = Titanium.UI.createButton({
    systemButton: Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
});

var buttonNextEnd = Titanium.UI.createButton({
    title: '>>'
});
var buttonNext1Page = Titanium.UI.createButton({
    title: '>'
});
var buttonPrevEnd = Titanium.UI.createButton({
    title: '<<'
});
var buttonPrev1Page = Titanium.UI.createButton({
    title: '<'
});

var toolbarNav = Titanium.UI.createToolbar({
    left : 0,
    bottom: 0,
    height : 40,
    width : 320,
    items: [buttonPrevEnd,space, buttonPrev1Page,space, buttonNext1Page, space,buttonNextEnd]
});

win.add(toolbarNav);

Solution 3:

Use Titanium.UI.ToolBar for that.

Solution 4:

If you are using Appcelerator Alloy Framework

The code in the XML view

<Alloy><Windowtitle="My Nice Title">
        ...   ...   ...
        ...   ...   ...
        <Viewclass="footer-menu"></View></Window></Alloy>

The code in TSS

".footer-menu": {
    backgroundColor: 'red',
    width: '100%',
    height: 40,
    bottom: 0
}

This will push the view to bottom. Here is a screenshot.

Not using Alloy? It is similar in JS too.

// create window     var win = Ti.UI.createWindow({
    // if anything
});
// create viewvar footer_menu = Ti.UI.createView({
    backgroundColor: 'red',
    width: '100%',
    height: 40,
    bottom: 0
});
// add view to window
win.add(footer_menu);

Hope this is helpful. Thanks!

Solution 5:

var footer = Ti.UI.createView({

    height:25
});

var footerButton = Ti.UI.createLabel({

    title:'Add Row',
    color:'#191',
    left:125,
    width:'auto',
    height:'auto'
});

footer.add(footerButton);

it works on android, but i still dont know why the button cant appear on iphone