Which Android Screen Resolutions to Support?

[andyh1234]

Im just about to finish my first Android app (at last!)

Im just wondering however which resolutions its best to support first as there seem to be quite a few. Im using MobGUI so I can set each card for each resolution and layout everything as I would want it, but it does mean I have to design for each individual size, if the size does not have data then the user will see the smallest window (240x320!)

At the moment ive done..

240x320
240x400
240x432
480x800
480x854

and im working on...

320x480

That pretty much covers every default option in the simulator.

Does anyone have a device that uses a different resolution so I can make sure Im covering as many bases for common devices as possible.

Thanks

Andy

[mwieder]

I take it you're only working with phones, not tablets, right?

My Acer Iconia A500 has a 1280x800 screen resolution on a 10" screen.

[andyh1234]

Yes, im just working on phones at the moment as I dont have a tablet yet so im not sure how they work.

My iPad app has a completely different layout to the iPhone one to make the best use of the extra space, so I figured I would probably do the same for Android tablets and phones.

So, I guess I have two questions in the end, the first is any other phone resolutions I should really support, and the second is what resolutions do the tablets use so I can knock out something for them as well!

Thanks

Andy

[mwieder]

I don't have an Android phone, so I'll let someone else comment on the phone resolution. I've seen lower-resolution tablets (depends on size and resistive/capacitive touchscreen capabilities, but you may want to look at the bewildering assortment of resolutions here
http://en.wikipedia.org/wiki/Comparison ... id_devices

You may also find these useful:
http://stackoverflow.com/questions/5633 ... esolutions

[Dixie]

Andy...

Have a look at the lesson :- http://lessons.runrev.com/s/lessons/m/4 ... esolutions

hope it helps

Dixie

[andyh1234]

Thanks Dixie,

I do that, or something close for the iPhone apps, but for the Android version Im using the MobGUI controls as it has a scroller which works on Android.

With Mobgui however, you can set specific resolutions and layout the screen and it takes care of everything when the cards load. The downside to this is if you want to be more dynamic it tends to put everything back where you left them when designing! I can code a button move, then watch it pop back to its original place!

I figure there are about 12 permutations so far for all phone screens, so it actually only takes about 20 minutes to rejig everything for each screen size, and this way I get the 'perfect' layout for each, so its not a bad way to do it.

Ive added some code that checks the screen resolution on startup and if its not one ive specifically coded for tells the user its not one thats is specifically supported and gives them the chance to email the details of their device so I can add it, but im hoping to get as many as possible working at the start!

Andy

[BarrySumpter]

WOW.
Thats excellent support.

The LiveCode Summer Academy had a very nice working samples for resizing etc.
i.e. never having to worry about what Android device was an absolute boon at the time.
It was in the TickedOff Academy project.

I think at one time the Academy was restricted.
But I'm pretty sure RR have now posted the Academy docos and TickedOff Acadamy project for all to see somewhere here.

hth

[SteveHanlan]

Here's a method I am using/developing for resizing

In the preOpenStack I determine the scale from design to actual by calling setScaling

Code: Select all

global scaleh,scalew,tOrient
on setScaling
   local statsize,mainrect
   if the environment is mobile and scalew=0 then
      if char 1 of the machine="i" then put 20 into statsize else put 40 into statsize       -- allow for status bar differences
      put the screenrect into mainrect
      put item 3 of mainrect/item 3 of designrect into scalew
      put (item 4 of mainrect-statsize)/item 4 of designrect into scaleh
      set the rect of this stack to mainrect
      if item 3 of mainrect>item 4 of mainrect then put "L" into tOrient else put "P" into tOrient    -- save orientation for future dev.
   end if
end setScaling

I add an invisible text field to each card called "Template" and in the preOpenCard, if the field "Template" is empty then I fill it with rectangle and font data for each control. This only creates the data once per card.

I then fire the resize method.

Code: Select all

on preOpenCard
  if the environment is mobile then
      if field "Template" is empty then
         setSizes
      end if
      send resize to me in 0 millisec
   end if
end preOpenCard

The rest of the code is in the Stack Script.

Code: Select all

on setSizes
   local temp,tControls,tMac
   put "" into temp
   put the number of controls into tControls
   repeat with y = 1 to tControls
      put the long name of control y  into tTempName
      put the rect of tTempName into tMac
      if word 1 of tTempName is not "graphic" then
         put tMac&comma&the effective textSize of tTempName into tMac
      end if
      put temp & tMac&return into temp
   end repeat
   put temp into field "Template"
end setSizes

on resize
   local tTempName,tControls,y,tMac
   lock screen
   put the number of controls into tControls
   repeat with y = 1 to tControls
      put the long name of control y  into tTempName
      put word 2 of tTempName into tMac
      put line y of field "Template" into tRect
      if the number of items of tRect=5 then
         put item 5 of tRect into tFont
         put item 1 of tRect&comma&item 2 of tRect&comma&item 3 of tRect&comma&item 4 of tRect into tRect
      end if
      switch
         case word 1 of tTempName="button"
            resizeButton tTempName,tRect,tFont
            break
         case word 1 of tTempName="field"
            resizeField tTempName,tRect,tFont
            break
         case word 1 of tTempName="graphic"
            resizeRect tTempName,tRect
            break
         case word 1 of tTempName="group"
            resizeRect tTempName,tRect
            break
      end switch
   end repeat 
   unlock screen
end resize

on resizeButton tButt, temp,tfSize
   put item 1 of temp*scalew into item 1 of temp
   put item 2 of temp*scaleh into item 2 of temp
   put item 3 of temp*scalew into item 3 of temp
   put item 4 of temp*scaleh into item 4 of temp
   set the rect of tButt to temp
   set the textSize of tButt to round(tfsize*scalew)
end resizeButton

on resizeField tButt ,temp,tfSize
   put item 1 of temp*scalew into item 1 of temp
   put item 2 of temp*scaleh into item 2 of temp
   put item 3 of temp*scalew into item 3 of temp
   put item 4 of temp*scaleh into item 4 of temp
   set the rect of tButt to temp
   set the textSize of tButt to round(tfsize*scalew)
end resizeField

on resizeRect tButt, temp
   put item 1 of temp*scalew into item 1 of temp
   put item 2 of temp*scaleh into item 2 of temp
   put item 3 of temp*scalew into item 3 of temp
   put item 4 of temp*scaleh into item 4 of temp
   set the rect of tButt to temp
end resizeRect

This works for deployment to various android and iphone/iPad.

What it doesn't do is handle rotation (via resizeStack) or the group of fields in a dataGrid.

If I come up with anything else, i'll post it. Fell free to play with the idea and let me know if you see any improvements.

Cheers

Steve

[Nick Johnson]

You covered almost all the resolution types which comes normally in a phone.
If you wish, you can go for 1024*786......