Titanium Community Questions & Answer Archive

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

Mobile easy UI layout?

I'm having a very hard time trying to figure out how big each UI element should be and where should it go on the Mobile. Is there a easier way to do this? Trial & Error is taking a huge amount of my time just restarting the app.

Thank you,

— asked April 2nd 2010 by Adrian Kokobobo
  • android
  • iphone
  • laying
  • mobile
  • out
  • ui

6 Answers

  • Hi Adrian

    I always wireframe up the idea behind the display before trying to implement. The main reasons for this are that it really helps to formulate the idea behind the design you are coming up with and secondly, I have previously used the API function width= parseInt(Titanium.Platform.displayCaps.platformWidth,10) and likewise platformHeight to calculate the left and top position of each element. My apps are for Android and iPhone so the dimensions are different. I found this to be unrealiable with graphics being shifted to the right on the iPhone platform.

    The iPhone has a display width of 320 and height of 480 pixels. Apple documentation therefore recommends a ppi (pixels per inch) setting based upon the height and width of the display at 72dpi however all documentation should use a 163 dpi image to accurately reflect the size of the image on the display. They also recommend a graphic of 48x48px for buttons.

    Android based devices vary in screen dimension, however the Operating System will auto scale images to fit the available display size. Display dimensions for the top end Android have a width of 480 and a height of 854 pixels. Google recommends a 240 dpi resolution.

    Therefore you probably want two copies of any image and you would put them in the Resources/Android or Resources/iPhone directory of you project.

    There are a large number of wireframe graphics available: My favourite one is the Teehan+Lax photoshop PSD (http://www.teehanlax.com/blog/?p=447), though there is also a Fireworks PNG version and there is a graffletopia here : http://graffletopia.com/stencils/download/358.

    Google iPhone wireframe and Android wireframe and you should get plenty of hits.

    — answered April 2nd 2010 by Gregor Munro
  • Few things.

    1) Hopefully you're not restarting the emulator between each test. It's not required for Android.

    2) The upcoming 1.2.0 release has a deploy from sdcard mode that will speed up turn times considerably when not production.

    3) There will be other layout managers in the future. Just not in 1.2.0.

    — answered April 2nd 2010 by Don Thorp
  • I'm not restarting the Emulator itself, just hitting Launch button for every change.
    That kind of sucks that these are the only options available.

    — answered April 2nd 2010 by Adrian Kokobobo
  • > 2) The upcoming 1.2.0 release has a deploy from sdcard mode that will speed up turn times considerably when not production.

    Do you really mean version 1.2.0, Don? We are already on Ti 1.2.1.

    — answered June 19th 2010 by Paul Dowsett
    • Don's answer is 3 monthes old.

      — commented June 19th 2010 by Stephane Pelamourgues
    • Yes, and I haven't yet seen details of how to use this feature. Do you know where they are?

      — commented June 29th 2010 by Paul Dowsett
  • So where is the rumored "deploy from sdcard" mode? Am I not aware of it, or was it pushed out?

    — answered October 19th 2010 by Dan Trevino
  • Any progress on this? UI is becoming the main use of development time in any project, i.e. the savings in time made by Titanium are lost in the trial and error UI development.

    — answered August 15th 2011 by Jez Manser
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.