4

I am working on an application that will run on multiple devices. I have three devices for testing.

HTC Desire S -- 480 x 800 pixels, 3.7 inches (~252 ppi pixel density)

Samsung P6200 Galaxy Tab 7.0 Plus -- 600 x 1024 pixels, 7.0 inches (~170 ppi pixel density)

Samsung Galaxy Tab 2 10.1 P5100 -- 800 x 1280 pixels, 10.1 inches (~149 ppi pixel density)

As per my understanding if i correctly develop my application for above three, most of the other devices will be handled. may be?

My question is from where should i start designing my images? As the both tablets are of mdpi density but different screen sizes, i designed the images for TAB2 and placed the images in drawable-mdpi directory, those images were shown perfectly on TAB2 but on TAB7, things are messed up, images are overlapping on each other.

So, both the tablets are mdpi and for mdpi, images should be placed in drawable-mdpi but for which tablet size should i design images?

Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
MA1
  • 2,767
  • 5
  • 35
  • 51

2 Answers2

3

Application UI usually is not fully bitmapped. You got some elements like icons which are fixed size, but from other hand your buttons should scale without problems. So assuming you want to target all devices, you should design your UI the way it fit on smallest supported screen (in this case 600 x 1024 pixels is your max) - this means that if you preview on said screen all UI elements are fully fit on screen. On higher screens you UI have to scale, but this usually do not need any special approach (unless you work on bitmapped game for example) as elements like lists, buttons, layouts will stretch automatically. And if your design assume any bitmaps involved in said scalable elements, use 9-patch PNG files to make it scale correctly.

For more on that subject, please read "Supporting Multiple Screens".

Marcin Orlowski
  • 72,056
  • 11
  • 123
  • 141
1

I recommend you designing for xhdpi, you can allways resize for lower dpis.

Take into account dpi is not related to screen size, on the other side, larger screen tablets have lower dpi than most "modern" phones.

Make the layout for target screen sizes, i.e. 10" and 7" tablets, the system will take the best bitmap for your device dpis (or restcale the nearest one!).

With the latest (beta) Android SDK and Eclipse plugin you'll take a better view of the differents devices screens: dpi + pixel resolutions + screen size., they now show, for exaple, like

7" WSXVG (Tablet) (1024x600: mdpi)

in the layout editor.

rgrocha
  • 1,461
  • 10
  • 19
  • The problem is not the Layouts. The problem is if there are multiple devices with same density but with different screen sizes, then for which screen size should i create images? – MA1 Oct 21 '12 at 21:47
  • You usually dont want to scale everything to fill the whole layout. You make a base design for a screen size (lets say 7") and define the areas (Views) you want to scale to fill the rest of the layout, like ListViews, TextViews, etc. – rgrocha Oct 23 '12 at 10:21
  • If you want to fill everything with images just design them to the dpis of your device and put layout_width and layout_height of your ImageView to match_parent. – rgrocha Oct 23 '12 at 10:29
  • Larger devices do not have more pixels on screen, in fact a Galaxy S3 has almost the same pixels count as a 10" tablet. The "DPI" units reflects the physical appearance of the pixels so all devices will have the buttons and images of the same size if they use the same layout definition and a fixed size width and height in dpis (or match_content). – rgrocha Oct 23 '12 at 10:29