Titanium - Design Title bar with three controls in in a view

Question

I want to design app title bar with 3 controls.

1. Left Menu Button
2. Screen Title
3. Right Menu Button

I have tried to achieve this, here is my sample code.

var win = Ti.UI.createWindow({
    navBarHidden : true,
    orientationModes : [Ti.UI.PORTRAIT]
});

var bb1 = Ti.UI.createView({
    top : 0,
    height : 40,
    left : 0,
    width : Titanium.Platform.displayCaps.platformWidth,
    backgroundColor : '#35a63c'
});

var TopbarChieldContainer = Ti.UI.createView({
    layout : 'horizontal',
    width : Titanium.Platform.displayCaps.platformWidth,
});

var TopbarLeftView = Ti.UI.createView({
    width : "7%",
    left : 5,
});

var TopbarRightView = Ti.UI.createView({
    width : "7%",
    right : 5
});

var leftImage_topbar = Ti.UI.createImageView({
    image : "../../images/SideMenuIcon.png",
});
TopbarLeftView.add(leftImage_topbar);

var screenTitle_topbar = Titanium.UI.createLabel({
    text : ScreenTitle,
    font : {
        fontSize : 14,
    },
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
    color : '#FFF',
    width : "52%"
});

TopbarRightView.add(RightButton);

TopbarChieldContainer.add(TopbarLeftView);
TopbarChieldContainer.add(screenTitle_topbar);
TopbarChieldContainer.add(TopbarRightView);

bb1.add(TopbarChieldContainer);
win.add(bb1);
win.open();

The problem is in the code/logic is, the middle label is not liquid, I want it to be flexible according to the screen resolution. Three controls should be:

1. Left Aligned with some left margin
2. 80% width of label of the screen with middle text align
3. Right aligned menu button with some right margin.

Answer 1

Use relative positioning, and remove the layout: horizontal. Size the left and right buttons statically (40 pixels, ish?): left: 5, width: 40 and right: 5, width: 40. Then position the title label relative to them: left: 45, right: 45. Its width will, by default, take up the space between the left and right. So if the device is in landscape, it'll take up all that space, minus 90 pixels. And it'll resize when you reorient, automatically.

var win = Ti.UI.createWindow({
    navBarHidden : true,
    orientationModes : [Ti.UI.PORTRAIT]
});

var bb1 = Ti.UI.createView({
    top : 0,
    height : 40,
    left : 0,
    backgroundColor : '#35a63c'
});

var TopbarChieldContainer = Ti.UI.createView();

var TopbarLeftView = Ti.UI.createView({
    width : CHANGE_TO_WIDTH_OF_LEFT_IMAGE,
    left : 5,
});

var TopbarRightView = Ti.UI.createView({
    width : CHANGE_TO_WIDTH_OF_RIGHT_IMAGE,
    right : 5
});

var leftImage_topbar = Ti.UI.createImageView({
    image : "../../images/SideMenuIcon.png",
});
TopbarLeftView.add(leftImage_topbar);

var screenTitle_topbar = Titanium.UI.createLabel({
    text : ScreenTitle,
    font : {
        fontSize : 14,
    },
    textAlign : Ti.UI.TEXT_ALIGNMENT_CENTER,
    color : '#FFF',
    left: CHANGE_TO_WIDTH_OF_LEFT_IMAGE_PLUS_FIVE,
    right: CHANGE_TO_WIDTH_OF_RIGHT_IMAGE_PLUS_FIVE
});

TopbarRightView.add(RightButton);

TopbarChieldContainer.add(TopbarLeftView);
TopbarChieldContainer.add(screenTitle_topbar);
TopbarChieldContainer.add(TopbarRightView);

bb1.add(TopbarChieldContainer);
win.add(bb1);
win.open();