How to change the views for different screen resolution??

[arindam.hit]

Hi,

I am developing one application using sencha touch 2. In the app, i am using some images as button and some default buttons also. Even some other components are also there. The problem is, when i am testing it for different android devices, the UI is not coming properly. Suppose when i am testing for Samsung S2, it is fitting in the screen. But while testing for 480 * 360 screens, it is going out of the screens. How can i handle the different screen sizes for android?? Is there any sample code??

Please help..

[mitchellsimoens]

You shouldn't use fixed heights but use flex heights and layouts. If you have padding : 10px try with padding : 5em; or whatever works, em is a flex height depending on line-height and resolution, it's not fixed like px. You can also use percents. Also hbox/vbox layouts, card, fit all will work without fixed heights.

[fairport]

Using numeric spinner field to allow users to choose their own resolution
I gave them a range of 100% - 280% (needed 280% for new Sony hi-res screeens)

This is Sencha Touch 1.1.1 code but it should give you the idea

minValue: 100,
maxValue: 280,
incrementValue: 5,
listeners: { 
   spin: function(obj, value) {
      var res = String(value)+'%';
      Ext.getBody().dom.style.fontSize = res;
      ... save value to local storage ...
   },
   change: function(obj, value) {
     var res = String(value)+'%';
     Ext.getBody().dom.style.fontSize = res;
     ... save value to local storage ...
  }
}

etc.

You will see the screen resolution change dynamically

then

Using local storage to save the resolution.
On app start up, grab the value (e.g. resValue) from localStorage and set screen resolution like this

Ext.getBody().dom.style.fontSize = String(resValue)+'%';

(you need to have various default values initially so the screens look reasonable)
like Ext.is.iOS && Ext.is.Phone resValue = 114
Ext.isAndroid resValue = 180

[Gizmo_x]

Take a look here: http://docs.sencha.com/touch/2.2.0/#!/video/layouts