Design for Different Screen Sizes Android

Question

I am developing an android app but problem is, it's design doesn't remain consistent on different devices.

I studied about it on internet but finally I am stuck on the same problem.

I designed the app in Photoshop by taking the layout design of 720 X 1280 for hdpi and then also modifying it for ldpi, mdpi and hdpi.

I developed different layouts for different devices, different folders are:

layout
layout-small
layout-large
layout-xlarge

They look great on Eclipse but when i run it on real device, buttons are small [on Tablets], works fine on my phone 320 X 480, but I am not sure about other devices.

I actually mentioned the size of my buttons in dp in the layouts like:

layout:
android:layout_width="230dp"
android:layout_height="90dp"

layout-large 
android:layout_width="350dp"
android:layout_height="125dp"

as they looked good in eclipse.

Answer 1

For Android launcher icons you will need 6 sizes of PNG or JPG files. In pixels these are:

48×48, 72×72, 96×96, 144×144, 192×192 and 512×512

The first five are for the App and the last one for when the App is deployed to the Google Play store.

The number of dots (pixels) per inch that an Android device's screen holds determines how sharp the image on the screen looks. The more Dots Per Inch (DPI) the sharper the image. Android groups screen densities into several classes, medium, high, extra high, extra extra high and extra extra extra high! These are referred to as MDPI, HDPI, XHDPI, XXHDPI and XXXHDPI. There is also a low density class, LDPI, however not many new devices have a low density screen and thus LDPI is no longer important.

MDPI is around 160 DPI

HDPI around 240 DPI

XHDPI around 320 DPI

XXHDPI around 480 DPI

XXXHDPI around 640 DPI.

(LDPI is around 120 DPI).

It is the screen density that determines the Android icon size used.

Android Icon Size Table

Answer 2

Though people usually have panic on this subject, it's not as difficult as it seems. The main patterns to follow are:

• Try to hardcode the least sizes as you can. Try avoiding, for instance, 271dp -like codes.
• Don't use pixels, use density-independent units. That means: dp for layouts and sp for text sizes.
• As layout weights and widths, try using match_parent , wrap_content and if you need to do something proportionally, use layout_weight . This latter saves lifes.

Since you don't provide some specific code, it's hard to give a better advice, but as I see that you're using hardcoded sizes, a good beggining would be addapt it to those patterns.

I strongly recommend reading this reference as it explains exactly what you should do.

Answer 3

There is no need to create different layout for different screen resolutions.. Just put your images in folder named :

for resolution - 320*480
=========================================
Folder Name : drawable - mdpi

for resolution - 480*800
=========================================
Folder Name : drawable-hdpi

for resolution - 540*960
=========================================
Folder Name : drawable-sw360dp-hdpi

for resolution - 720*1280
=========================================
Folder Name : drawable-sw360dp-xhdpi

for resolution - 768*1280
=========================================
Folder Name : drawable-sw360dp-notlong-hdpi

Answer 4

When you create design in Photoshop please develop design for XHDPI. For make image resources you can use special plugins for create drawable resources in Adobe Photoshop as like http://www.cutandslice.me/ This plugin in automatic create assets for all resolution

Answer 5

if you use icon for background then generate icon from this link icon generator

or if you use simple xml design view then create shap file for all screens with different size of view