Android, concerning the User Interface design

Question

the more I read the Supporting Multiple Screens guide, the more I get confused. if the layout folder's qualifier is based on size (small, normal, large and xlarge) and the drawable folder's qualifier is based on density (ldpi, mdpi,hdpi and xhdpi), then how can I specify the size of the drawables/images?? should all the images inside the drawable folders have the same size (based on the normal screen size) but different densities (i.e. pic.png inside drawable.ldpi has the same width and height of pic.png inside drawable.mdpi but has different density)?? the problem is that each screen size may include the three densities (i.e. a large screen may be ldpi,mdpi or hdpi). .how can I be designing the images on size basis and on density basis on the same time?? thank you.

Answer 1

In general you'll want the smallest pictures in ldpi, middle ones in mdpi, and larger in hdpi etc...

Even though it is technically possible for a device to have a "large" screen and an "ldpi" density manufactures have tended to stick to making devices with big screens be higher density as well.

EDIT:

The images only need to be designed with density in mind. Because if you take the same 100x100 pixel image and show it at 3 different densities it will appear largest (to human eyes) on the smallest density. So to account for that you make 3 images, lets say one 80x80, one 100x100, and one 120x120. Now if you show those 3 images across 3 densities the size that object appears to be to your eyes will be much closer than before.

the large, medium, small etc... qualifiers that you can add to the layout folders are not so much about any image resources themselves, but rather structuring the View components on the given page so as to make best use of the space available.

For instance, if your application has a list of items to choose from in it. On a tablet (large or xlarge) screen it may look nicer and be more effecient to have two or more columns of items displayed in your list on the screen. Whereas on a handset there may not be enough width (in portrait mode) to fit more than 1 column in. So to handle this situation you'd put a layout xml file inside the layout-normal folder that has a single column ListView. Then put another layout xml file in the layout-large folder that uses a GridView so that it can have an additional column

This image will show you roughly which folder the system will pull your images and/ or layout xml files from given the screen size and density.:

All of your image resources go in the drawable folders which are qualified with the densities. (ldpi, mdpi, hdpi etc)

The layout folders are what get qualified with the screen size (small, normal, large etc) The layout folders will contain xml layout files only, no images.