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.


Solution 1:

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)

Solution 2:

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

Solution 3:

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