How to create screen size independent UI in Titanium alloy

Question

Created layout after setting the height and width of child elements based on current device screen width and height,as you can see the code snippet which calculates the width and height based on screen size for each child element. How to do the same or similar settings using Xml mark up to create view in alloy project if not using '%',or 'dp'

function Cal_width(size) {

    var width;
    try {

        width = size * Titanium.Platform.displayCaps.platformWidth / 100;
    } catch(e) {
        warn("Error accessing display caps for screen density calculation: " + e);
    }

    return width;
}

function Cal_height(size) {

    var height;
    try {

        height = size * Titanium.Platform.displayCaps.platformHeight / 100;
    } catch(e) {
        warn("Error accessing display caps for screen density calculation: " + e);
    }

    return height;
}

const topOffset = Cal_height(1);

const topOffset_label = Cal_height(5);
//const leftOffsetLabel = Cal_width(30);
const leftOffset = Cal_width(5);
const rightOffset = Cal_width(5);
const textFieldHeight = Cal_height(8);

const textFieldWidth = Cal_width(90);
const txtFieldEmailTopOffset = Cal_height(5);
const btnLogin_width = Cal_width(90);
const btnHeight = Cal_height(10);
const topOffsetCreateBtn = Cal_height(6);

const btnCreate_Width = Cal_width(100);
const font_Size = Cal_height(3);
const logo_height = Cal_height(10);
const logo_width = Cal_width(80);
const logoTopOffSet = Cal_height(5);

const leftForgotPswd = Cal_width(40);
// specify visual assets' heights



var win = Titanium.UI.createView({
    layout : 'vertical'
});


var applogo = Titanium.UI.createLabel({
    width : logo_width,
    top : logoTopOffSet,
    height : logo_height,
    backgroundImage : 'android/_logo.png'
});
win.add(applogo);
 //create label to show error in email textfield
var lbemail_error = Titanium.UI.createLabel({

    top : topOffset_label,
    color : 'red',
     textAlign:'center',
    font : {
        fontFamily : 'Arial',
        fontSize : Cal_height(3)
    }
});
win.add(lbemail_error);
//create textfield for email input and set its position with respect the screen
var tfemailInput = Titanium.UI.createTextField({

    top : Cal_height(5),
    left : leftOffset,
    right : rightOffset,
    width : textFieldWidth,
    height : textFieldHeight,
    hintText : 'Email',
    keyboardType : Titanium.UI.KEYBOARD_EMAIL,
    returnKeyType : Titanium.UI.RETURNKEY_NEXT,
    borderStyle : Titanium.UI.INPUT_BORDERSTYLE_ROUNDED,
    font : {
        fontFamily : 'Arial',
        fontSize : font_Size
    }

});
win.add(tfemailInput);

PP_vinnieg PP_vinnieg · Accepted Answer · 2014-01-23T18:19:39

In alloy you'd ideally use tss files for styling instead of throwing everything into XML attributes. Alloy's tss files can access variables in Alloy.CFG, which you can define. So you can do something like this:

alloy.js

Alloy.CFG.Cal_width = function (size) { /* your code here*/ };
Alloy.CFG.Cal_height = function (size) { /* your code here*/ };
Alloy.CFG.topOffset_label = Alloy.CFG.Cal_height(5)

screen.xml

<Label id="lbemail_error"></Label>

screen.tss

"#lbemail_error": {
    top : Alloy.CFG.topOffset_label,
    color : 'red',
    textAlign:'center',
    font : {
        fontFamily : 'Arial',
        fontSize : Alloy.CFG.Cal_height(3)
    }
}

How to create screen size independent UI in Titanium alloy

1 Answers