28

I've done some research on building layouts that work for multiple screen sizes and I'm looking for some clarification.

Is it common practice to just make a separate layout file for each of the three screen sizes (small, medium, large) or can you accomplish this with an easier method?

I've been testing my projects on a large screen device, and even though I use DIPs (density independent pixels) for padding, margins, etc, it still scrunches stuff up when I view it on smaller screens. Should I be designing my projects for medium-sized screens and then just allow Android to scale it appropriately?

I'm not sure if this is a good question or not, but I am looking for what the common practice is for designing for multiple screen sizes. What do you do?

Edit: In addition to this, for example, let's say I have a button that is 40dip above the bottom of the screen, should I literally write 40dip, or should I be using some sort of pixel math like 40 * screenWidth / blahblah or something so that it scales depending on the screen size the user has? I have limited experience with UIs...

joepetrakovich
  • 1,344
  • 3
  • 24
  • 42

3 Answers3

14

There are two axes to consider when it comes to screen size: physical size and density. Density is handled by providing measurements in dips and scaled resources as appropriate. But density does not always imply size or vice versa. See http://developer.android.com/guide/practices/screens_support.html for some further info on the mechanics.

It is not common or recommended to have different layouts based on each screen resolution you support, but it is entirely reasonable to design different layouts for different size classes (small, medium, large). Different sized screens might benefit from adding, removing, or repositioning certain navigation elements depending on the app.

Within a certain size class you should make sure that your layouts tolerate variances in exact screen resolution. As Falmarri suggested, use relative layouts, weights, and the other tools available to let your layout stretch gracefully.

adamp
  • 28,862
  • 9
  • 81
  • 69
  • Okay so this is where I was confused. I noticed that when viewing my app on a normal-sized emulator instance that I was losing the bottom inch of the contents. Everything was scaling and positioning correctly. So then I should be using a separate layout for the different screen SIZES, not densities, correct? – joepetrakovich Dec 05 '10 at 23:31
  • That's one way to do it. But if you're losing the bottom inch of the contents of your layout I would guess that everything is not scaling and positioning correctly. ;) There are many different devices with different resolutions and densities that will all report screen size 'normal.' A single layout should be able to deal with this. – adamp Dec 05 '10 at 23:37
  • Should I be designing my app as a base size of normal and let it scale to large then? Since I have been doing the opposite. – joepetrakovich Dec 06 '10 at 15:09
  • That may be an easier way to get started. Don't be afraid to use some empty space in your designs. – adamp Dec 06 '10 at 16:29
  • I have different layouts for each, but still not working. http://stackoverflow.com/questions/34378238/landscape-mode-for-app – Ruchir Baronia Dec 20 '15 at 08:53
3

The general rule is to use Density Independent Pixels (dips) for size definitions in your layout xmls - I see you already do it. Doing so I just have the only layout for all range of devices. What needs to be splited is graphics. For that I use 3 different drawable directories - 'drawable-ldpi', 'drawable-mdpi' and 'drawable-hdpi'. This is done in order images to have the same size (let say, in millimeters) on various screen densities (assuming screen size is the same - Normal, for instance) they should be scaled as follows:

  • drawable-hdpi: 150%
  • drawable-mdpi: 100%
  • drawable-ldpi: 75%

Probably it is a bad advice. However, if you look at the Google chart of Screen Sizes and Densities you can decide to not invest your additional efforts to thorough testing for Large screens, since there are almost no such devices on the market.

Vit Khudenko
  • 28,288
  • 10
  • 63
  • 91
  • I also support Falmarri - use relative layouts. views should just fill parent or wrap content. probably use constants only for text size and paddings/margins. – Vit Khudenko Dec 05 '10 at 20:40
  • When you say 'scaled', do you mean something like: Open up photoshop, load the image, and go to file>scale image (or something like it) and reduce it by a certain percentage? – joepetrakovich Mar 19 '11 at 21:38
  • @PetrakovichJ: Yes I mean the images should be scaled in some image editor before putting them in those directories. – Vit Khudenko Mar 19 '11 at 22:12
  • Okay, one more thing, am I scaling the image SIZE or the image RESOLUTION? Am I letting Android scale their size? – joepetrakovich Mar 20 '11 at 00:51
  • 1
    @PetrakovichJ: OK :) Suppose you have your main/master image of a button, its dimention is 1000x1000px. In order to get that button in the same phisical size (e.g. in millimeters) for each screen density (AND assuming 100x100px on mdpi is OK for your app) you should scale down (or resize, change its SIZE) the master image in an image editor to: 100x100px for mdpi, 150x150px for hdpi, 75x75px for ldpi. I hope this usage case will help to get the idea. – Vit Khudenko Mar 20 '11 at 09:17
  • I have different layouts for each, but still not working. http://stackoverflow.com/questions/34378238/landscape-mode-for-app – Ruchir Baronia Dec 20 '15 at 09:02
1

No making separate layouts is not really common practice. Only when you have images that can't be stretched is that really the recommended way.

Stuff will always look a little stretched/compressed when viewing it on devices with smaller/larger screens. That's kind of the definition of a different size screen. You should just use relative layouts and let android control the specific pixel numbers.

Falmarri
  • 47,727
  • 41
  • 151
  • 191
  • I have different layouts for each, but still not working. http://stackoverflow.com/questions/34378238/landscape-mode-for-app – Ruchir Baronia Dec 20 '15 at 09:02
  • This question is 5 years old. Ask a new one. – Falmarri Dec 23 '15 at 03:16
  • Why? Just ask the new question. Why would you assume someone that answered a similar question 5 years ago would care about your new question? – Falmarri Dec 23 '15 at 21:17
  • You don't understand what I'm saying. I HAVE asked the new question. I have ALSO simply linked it to you. I expected someone with enough knowledge in the field to answer THIS question may ALSO be able to answer my question. I guess I was wrong. – Ruchir Baronia Dec 23 '15 at 23:52