Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Application fitting to the resolution

Hello,

I don't find the way to fit my applications to the screen resolution.

There isn't percentages to the width and height properties, neither to the positioning properties(top, left, right…). In the Kitchen Sink, the screen resolution is not handle too.

It's not very beautiful when an application created for the 480x320 resolution take 50% of the screen with a resolution of 854x480 or when we change the mobile orientation.

However, the majority of applications in the android market or in the apple store are fitted to the resolution.

Is it impossible with Titanium ? Or how can I do that ?

Regards,

— asked July 28th 2010 by Remi Delcourt
  • mobile
0 Comments

4 Answers

  • Hi !

    Seeing your name, I think you're french but for everybody I will not speak french (mais vive la baguette, le saucisson et le bon pinard quand même ^^).

    I try to make an application fit to the screen too. For the iPhone, you can use percentages, for example :

        var text = Titanium.UI.createTextField
        ({
            value:'Hello',
            top:'10%,
            left:'10%',
            width:'80%',
            height:'auto'
        });
    

    This runs very good but on Android, your percentages goes to interpret like pixels size, so it's "hard-coded".

    The only solution that I found is to create a function which calcul a size or a position by takking care of the resolution because you can get the resolution. For the moment I didn't develop this one but I'm working on it. See DisplayCaps !
    I post my function when she runs ;)

    Regards !

    — answered August 4th 2010 by Antoine Vigneau
    permalink
    0 Comments
  • Bonjour

    You can do this by either using a conditional statement to an absolute position based upon the platform:

    var isAndroid = Titanium.Platform.name == 'android';
    var sampleText = Titanium.UI.createLabel({
        text:    'Some sample text',
        height:    'auto',
        width:    (isAndroid ? 100: 200),
        top:    100,
        left:    10,
        color:    '#000',
        font:{    fontSize:    12,
            fontFamily:    'sans-serif'},
        textAlign:    'left'
        });
    

    or you can use the Titanium.Platform.displayCaps to set a relative position:

    var sampleText = Titanium.UI.createLabel({
        text:    'Some sample text',
        height:    'auto',
        width:    parseInt(Titanium.Platform.displayCaps.platformWidth,10)-40,
        top:    100,
        left:    10,
        color:    '#000',
        font:{    fontSize:    12,
            fontFamily:    'sans-serif'},
        textAlign:'left'
        });
    

    Hope this helps

    — answered August 4th 2010 by Gregor Munro
    permalink
    0 Comments
  • Just curious, do you guys use a single code base for both Android and Iphone?

    Do you do these selection during runtime?

    1. What size of image to use?
    2. Using windows/views animations?
    3. etc, etc.
    — answered August 5th 2010 by Peter Lum
    permalink
    0 Comments
  • Hello,

    Thanks for yours answers !

    @Antoine Vigneau : I didn't now that percentages works with Iphone, it can be a good news. I go to test that. (Et oui je suis français et j'aime la baguette et le saucisson :D)

    @Gregor Munro : Thanks for your help, it's a good idea to test depending the resolution plateform.

    @Peter Lum : Yes I try to have the same code for iphone and android but if it's impossible I change depending the plateform.
    I use absolute size for image and I don't use animatiaon for view and window

    — answered August 9th 2010 by Remi Delcourt
    permalink
    0 Comments
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.