Handling multiple device densities - Iphone / Android - Best Practice

Can someone explain what is considered o be the best approach in handling multiple screen sizes/densities in both iPhone and android.

I have read a lot yet there appears to be no general, accepted way.

I am aware you can size using dp units, but you can't position consistently.I am aware of the various image folders for android, and to name iPhone images using @2x.

Is the only sensible approach to create a separate jss file for each platform.. thats fine for platforms, but what about low, medium, high and xhigh android screens?

4 Answers

  • The main reference is http://tinja.ws/KWTlxQ.

    Ti will only include the appropriate (platform specific) resources.

    As for Android, you will need to include all the images for that various platform DPIs you wish to support. That is a "limitation" of Android. However, the android platform will automatically use the images that are appropriate for the DPI of the device it is running on.

    As for JSS, don't. It's a dead "technology". Appcelerator is deprecating it.

  • Ah, wasn't aware jss was dead. Thanks…

    With regards to screen sizes, I want to target smartphone handsets, not tablets, am i right in saying i control which devices can install my app from tiapp.xml (android manifest)?
    Which screen sizes are smartphone only? I am trying to work out from this guide but its starting to get a bit confusing : http://developer.android.com/guide/practices/screens_support.html

    — answered 3 years ago by Billy Khan
    • I'm not familiar enough with the specifics of Titanium to know if Ti already has support for <supports-screens> that would go into the ApplicationManifest.xml, but you can always manually modify that file after Ti Studio builds. Modify it and manually compile.

      But, in general terms. Always supply default images that will be handled automatically by the platform, and then add custom images for those specific resolution types you want to directly support.

      Having said that, having an automated build process that takes some default images and build the appropriate images for various densities is helpful. Then you only need "proof" those images and touch up the ones you don't approve of, and make those manually.

      Automation is your friend.

      — commented 3 years ago by Chaim Krause
    • So i should create a general images directory and have all images (both iPhone and android) stored there, then if any are platform/density specific i should place them within their respective image folder.

      What approach for positioning, e.g. i have an image that is 100dp from the top, and 20dp from the left, having tested this, there appears to be no consistency across platforms and densities. What approach for consistent, cross platform positioning?

      — commented 3 years ago by Billy Khan
    • My personal practice is to have a directory in the project directory where I put all the graphics at their highest quality. I then have scripts to take those images and manipulate them to the appropriate sizes, etc. and copy then to the appropriate project directories. I only have to run that script when I add or change one of the highest quality images.

      As for positioning, all I can say is don't position stuff at specific places if you can avoid it. Use the layouts to position stuff for you. If you must use specifics, create helper functions that calculate things based on the current screen size, images size, etc.

      — commented 3 years ago by Chaim Krause
    • The scripts that you use, are they available to all or something you created for yourself?

      Thanks for the positioning advice…

      — commented 3 years ago by Billy Khan
    • FYI: If you are developing on a Mac, I suggest ShipIt!. You can add custom sizes to take care of the Android stuff. That is mainly what I use.

      — commented 3 years ago by Chaim Krause
    • Actually, what do you mean by using layouts to position for me?

      — commented 3 years ago by Billy Khan
    • First of all I would be remiss if if I didn't point you to the appropriate Ti documentation.

      I am busy now, but I will try to clean up the scripts and post them on bitbucket or github.

      As for using layout for positioning, see:

      — commented 3 years ago by Chaim Krause
    • Many thanks for the help!!, its cleared a few things up for me…

      — commented 3 years ago by Billy Khan
  • Actually, sorry… one more question… when using shipit, is there a scale which you work to when reducing image size? so going from xhigh to high, then medium then low for a 200px by 200px image, what do you reduce it by?

    — answered 3 years ago by Billy Khan
    1 Comment
    • Start with the splash screens first and it will become obvious. Take a look at the specs, particularly the DPIs. You can see how high is twice low, etc.

      — commented 3 years ago by Chaim Krause
  • Here are my ratios:

    • xhigh: 200%
    • high: 150%
    • med: 100%
    • low: 75%

    iphone is roughly equivalent to android "med", and iphones with retina display are roughly equivalent to "xhigh".