Layout in android and iOS

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

Hi,

I have developed an application for iOS. I have set the top and left manually. Because of this, my app contents are not properly aligned in android. Is it possible to use the screen width and align the contents relative to the screen size, so that the same app could be run on all devices irrespective of the screen size or OS? Can anyone pls help me do it? How to place a label or table view or other components with respect to the screen start and end?

Any help is appreciated.. Thanks in advance..

— asked 1 year ago by Preetha S
0 Comments

2 Answers

Accepted Answer

Hi Preetha,

Try this for android layout. 

var screenWidth =  Ti.Platform.displayCaps.platformWidth;
var screenHeight = Ti.Platform.displayCaps.platformHeight;
 
function GetHeight(value) {
    var temp = (value * 100) / 480;
    return parseInt((screenHeight * temp) / 100);
}
 
function GetWidth(value) {
    var temp = (value * 100) / 320;
    return parseInt((screenWidth * temp) / 100);
}
 
// how to use this function for your objects
 
// height : GetHeight(100), 
// width : GetWidth(100),

Hi Nitin, Can pls help me out with the following code ? 

var win = Ti.UI.createWindow({
    backgroundColor: 'white',
    tabBarHidden:true
    });
win.orientationModes = [Ti.UI.PORTRAIT];
 
var screenWidth =  Ti.Platform.displayCaps.platformWidth;
var screenHeight = Ti.Platform.displayCaps.platformHeight;
 
function GetHeight(value) {
    var temp = (value * 100) / 480;
    return parseInt((screenHeight * temp) / 100);
}
 
function GetWidth(value) {
    var temp = (value * 100) / 320;
    return parseInt((screenWidth * temp) / 100);
}
 
// how to use this function for your objects
 
// height : GetHeight(100), 
// width : GetWidth(100),
 
var image = Ti.UI.createImageView({
    image:'images/ATX.png',
    top:20,
    left:50,
});
win.add(image);
 
var image1 = Ti.UI.createImageView({
    image:'images/ATX_NewsButton_90x90.png',
    top:120,
    left:30
});
win.add(image1);
 
var label1 = Ti.UI.createLabel({
    text:'Industry News',
    color:'#0768A9',
    width:'auto',
    height:'auto',
    font:{fontSize:16,fontFamily:'Trebuchet MS',fontWeight:'bold'},
    top:220,
    left:22
});
win.add(label1);
 
var image2 = Ti.UI.createImageView({
    image:'images/ATX_BlogButton_90x90.png',
    top:120,
    right:30
});
win.add(image2);
 
var label2 = Ti.UI.createLabel({
    text:'Blog',
    color:'#0768A9',
    width:'auto',
    height:'auto',
    font:{fontSize:16,fontFamily:'Trebuchet MS',fontWeight:'bold'},
    top:220,
    right:57
});
win.add(label2);
 
var image3 = Ti.UI.createImageView({
    image:'images/ATX_TVButton_90x90.png',
    top:270,
    left:30
});
win.add(image3);
 
var label3 = Ti.UI.createLabel({
    text:'ATX TV',
    color:'#0768A9',
    width:'auto',
    height:'auto',
    font:{fontSize:16,fontFamily:'Trebuchet MS',fontWeight:'bold'},
    top:370,
    left:48
});
win.add(label3);
 
var image4 = Ti.UI.createImageView({
    image:'images/ATX_LibraryButton_90x90.png',
    top:270,
    right:30
});
win.add(image4);
 
var label4 = Ti.UI.createLabel({
    text:'Knowledge Library',
    color:'#0768A9',
    width:'auto',
    height:'auto',
    font:{fontSize:16,fontFamily:'Trebuchet MS',fontWeight:'bold'},
    top:370,
    right:7
});
win.add(label4);
 
var tg = Ti.UI.createTabGroup({});
var tab = Ti.UI.createTab({window:win});
tg.addTab(tab);
tg.open();
 
// check for network
if(Titanium.Network.networkType == Titanium.Network.NETWORK_NONE){
     var alertDialog = Titanium.UI.createAlertDialog({
              title: 'WARNING!',
              message: 'Check your network connection and try again.',
              buttonNames: ['OK']
            });
            alertDialog.show();
}
I want to fit the 4 image icons for all the android devices. Pls help me out

Your Answer

Think you can help? Login to answer this question!