CODEWITHSUNDEEP
androidandroid-layout
JibW
JibW

Reputation: 4562

Android UI Design: Supporting Multiple Screens

I have read this tutorial SUPPORTING MULTIPLE SCREENS several times and many stackoverflow questions regarding Design Android UIs to fit well with all android screen sizes.

But still struggling with providing the best and the same user experience for all screen sizes equally.

When I am designing the Interfaces always keeping the following diagram in mind.enter image description here

For the moment in my app it uses following folder structure under the res folder.

enter image description here

Also I have used dp and sp units in the xml layout files when defining the sizes.

Small screen sizes

When it comes to small screen sizes it perfectly refer to the UIs defined under layout-small and display without any issue.

Normal screen sizes

When I design layouts for normal screen sizes(layout folder), I used 3.5 inches android device and 3.7 inches emulator to test how UI looks like in normal screen size.

So my layouts look excellent in this size but Samsung Gallaxy S3 (4.8 inches) and S4 (5.0 inches) having slightly bigger screens and they still refer to the normal screen sized layouts. Therefore in Those bigger screens have a considerable space left from the bottom not using and UI doesn't look nice.

Also In the manifest file, I have defined the following,

<uses-sdk
    android:minSdkVersion="4"
    android:targetSdkVersion="17" />

<supports-screens 
    android:largeScreens="true" 
    android:normalScreens="true" 
    android:smallScreens="true" 
    android:anyDensity="true" />

I have no issue with the image density(drawable-hdpi/drawable-xhdpi/drawable-mdpi/drawable-ldpi)

(1). Wonder what I am missing or doing wrong to result like this specially in Bigger screens (4.8 inches) to refer normal layouts.

(2). Also If someone can explain best practices and the standard way of defining folder structure under the Res folder to fit well with all the screen sizes in android, would be grateful as this is so confusing. Thanks.

Upvotes: 20

Views: 29430

Answers (6)

Elhanan Mishraky
Elhanan Mishraky

Reputation: 2816

Instead of using the dp size unit you can use the sdp size unit that is relative to the screen size.

Using the sdp size unit you will have the same user experience on all screen sizes with only one layout xml.

Use it carefully! for example, in most cases you still need to design a different layout for tablets.

For text view sizes please refer to the ssp size unit (based on the sp size unit)

Upvotes: 18

Bhaval Patel
Bhaval Patel

Reputation: 409

Generalized densities.

A set of six generalized densities:
ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi

Just Define folder for different image like:

drawable-large-xhdpi: copy (drawable-xxhdpi images)
drawable-xlarge-xhdpi: copy (drawable-xxxhdpi images)
drawable-xxhdpi: 1080x1920 slicing
drawable-xxxhdpi : 1440x25601 slicing

Add support multiple screen size support in manifest.

 <supports-screens
        android:anyDensity="true"
        android:largeScreens="true"
        android:normalScreens="true"
        android:resizeable="true"
        android:smallScreens="true"
        android:xlargeScreens="true" />

This works for me to support all tablets including Nexus 9,10, and all devices with different resolution and dencity

Upvotes: 0

Sajan Rana
Sajan Rana

Reputation: 803

Create different layouts for different screen.

res/layout-large/

res/layout-sw600dp/

ldpi (low) ~120dpi
mdpi (medium) ~160dpi
hdpi (high) ~240dpi
xhdpi (extra-high) ~320dpi
xxhdpi (extra-extra-high) ~480dpi
xxxhdpi (extra-extra-extra-high) ~640dpi

Find android UI design examples and tutorials: http://www.viralandroid.com/2015/11/android-user-interface-ui-design-tutorial.html

Upvotes: 0

arpit
arpit

Reputation: 1462

For Multiple screen support:

  1. Mobile : Create different values folder which is mention below:

values                     (For mdpi devices)
values-hdpi                (For hdpi devices)
values-xhdpi               (For xhdpi devices)
values-xxhdpi              (For xxhdpi devices)

  1. Tablets: Create different layout folder which is mention below:

layout-sw600dp             (For 7″ to 9″ Screen)
layout-sw720dp             (For 10″ to above screen)

For image resources: Create 4 drawable folders: 

drawable-mdpi
drawable-hdpi
drawable-xhdpi
drawable-xxhdpi

Upvotes: 1

LuckyMe
LuckyMe

Reputation: 3910

If it is very important to specify to that extreme, there is a handy tool for folder naming, and that is chaining. Ex. layout-w480dp-normal and that would be screen sizes at least 480dp in width, and fall under the normal category. Note: I didn't get the need to develop for such detailed requirements, but according to the linked source, it should work just fine.

Source

Make sure to follow these rules

Upvotes: 1

Plato
Plato

Reputation: 2348

You can use the following resource folders to create layouts for devices with larger screens :

7 inch tablets
res\layout-sw600dp

10 inch tablets
res\layout-sw720dp

Upvotes: 3

Related Questions