Issue in positioning titanium alloy widgets for different screen size

Question

Click here! to view the screen shot taken on nexus 5 and galaxy core... In galaxy core,everything appears good but in nexus 5 the widgets get shifted to the left due to different screen size... I have set

<property name="ti.ui.defaultunit" type="string">dp</property>

in my tiapp.xml

My xml file is as follows...

<Alloy>
<Window  id='PreferenceScreen' >
    <Button id='button_save' title="Save"/>
    <Label  id='label_my_project' >My project</Label>
    <Label  id='label_select_city' >
    </Label>
    <Label  id='label_select_locality' >
    </Label>
</Window>
</Alloy>

----my tss file----

'#label_my_project': {
top: '88',
left: '20',
width: '280',
backgroundColor: '#00aac1',
color: '#ffffff',
text: 'My Project',
textAlign: 'center',
font: {
    fontSize: '25sp'
}
},
'#label_select_city[platform=android]': {
hintText: 'Select City'
},
'#label_select_city': {
top: '143',
left: '40',
width: '240',
font: {
    fontSize: '20sp'
}
},
'#label_select_locality[platform=android]': {
hintText: 'Select Locality'
},
'#label_select_locality': {
top: '214',
left: '40',
width: '240',

font: {
    fontSize: '20dpsp'
}
},
'#button_save': {
top: '293',
left: '58',
width: '200',
borderWidth: 1,
borderRadius: 5,
borderColor: '#fff',
backgroundColor: '#00aac1',
backgroundSelectedColor: '#fff',
color: '#ffffff',
selectedColor: '#00aac1',
textAlign: 'center',
font: {
    fontSize: '20sp'
}
},
'#PreferenceScreen[platform=android]': {
fullscreen: false
},
'#PreferenceScreen': {
top: '0',
left: '0',
backgroundColor: '#00aac1',
navGroup: ''
},

I have also tried with % but same result

Please help as i have been stuck since past two days and still no solution...

Jeroen · Answer 1 · 2014-12-15T08:24:03.073

Do you want to center all elements ? Just use

width:'auto'

on all labels and make the PreferenceScreen

Ti.UI.FILL

Try this code:

VIEW:

<Alloy>
<Window  id='PreferenceScreen' >   
    <View id='container'>
        <Label  id='label_my_project' >My project</Label>
        <Label  id='label_select_city' >
        </Label>
        <Label  id='label_select_locality' >
        </Label>
         <Button id='button_save' title="Save"/>
     </View>
</Window>
</Alloy>

TSS:

'#label_my_project': {
    //top: '88',
    //left: '20',
    width: '280',
    backgroundColor: '#00aac1',
    color: '#ffffff',
    text: 'My Project',
    textAlign: 'center',
    font: {
        fontSize: '25sp'
    }
},
'#label_select_city[platform=android]': {
    hintText: 'Select City'
},
'#label_select_city': {
    top: '40dp',
    //left: '40',
    width: '240',
    backgroundColor:'white',
    font: {
        fontSize: '20sp'
    }
},
'#label_select_locality[platform=android]': {
    hintText: 'Select Locality'
},
'#label_select_locality': {
    top: '40dp',
    //left: '40',
    width: '240',
    backgroundColor:'white',
    font: {
            fontSize: '20dpsp'
    }
},
'#button_save': {
    //left: '58',
    top:'40dp',
    width: '200',
    borderWidth: 1,
    borderRadius: 5,
    borderColor: '#fff',
    backgroundColor: '#00aac1',
    backgroundSelectedColor: '#fff',
    color: '#ffffff',
    selectedColor: '#00aac1',
    textAlign: 'center',
    font: {
        fontSize: '20sp'
    }
},
'#PreferenceScreen[platform=android]': {
    fullscreen: false
},
'#PreferenceScreen': {
    top: '0',
    left: '0',
    width:Ti.UI.fill,   
    height:Ti.UI.FILL,
    backgroundColor: '#00aac1',
    navGroup: ''
},
"#container":{
    layout:'vertical',
    height:Ti.UI.SIZE,
}

placing the elements as the same position even though the screen size is different... — Hardik Amal, Dec 12 '14 at 08:22
What do you want to happen when the height of the screen is larger? Now they have a top position so nothing will happen... — Jeroen, Dec 12 '14 at 16:06
when i set top position..the position is ok with 4inch device but when i run it on 5 inch device the widget are placed according to 4inch device...which causes blank area at the bottom in 5 inch screen...i hope u get it...have a look at the screen shot in the link attached above...Thanks — Hardik Amal, Dec 13 '14 at 10:01
So you also want to center them vertically ? In your question you only mentioned the left position. Check out my updated answer to also center them vertically. — Jeroen, Dec 15 '14 at 08:22

Issue in positioning titanium alloy widgets for different screen size

1 Answers1