layout for different screen sizes

Question

\

I have read all the documents, I have read many stuff in stackoverflow as well as other places.

But still I cant get my foot out of this mud. I have made an app which up till now, I tested on my Nexus 5. Now as it is almost completed, I want to make it compatible with varous phones, and hence varous screen sizes.

When I tested my app on Nexus S (it is 4" / 400 x 800) everything appeared large and nothing fit in the screen as expected. So I created another layout named layout-small and adjusted the font sizes and all that. But again in Nexus S, the layout from default layout folder was used and not from the layout-small folder.

Can anyone please spend a couple of minutes to explain me this "Multiple screen sizes support" and what is the best approach to do so??

Thank you

Default layout folder :

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="25sp"
    android:background="#009688">

    <RelativeLayout
        android:layout_weight="0.5"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:id="@+id/linear">

        <TextView
            android:layout_marginTop="35sp"
            android:id="@+id/mission"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="MISSION"
            android:textColor="#ffffff"
            android:textSize="65sp"
            android:gravity="center_horizontal"/>

        <TextView
            android:layout_below="@+id/mission"
            android:id="@+id/notimpossible"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="NOT IMPOSSIBLE"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:textSize="35sp"
            android:gravity="center_horizontal"/>

    </RelativeLayout>

    <RelativeLayout
        android:padding="10sp"
        android:layout_weight="0.5"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_below="@+id/linear">

        <TextView
            android:id="@+id/random_main"
            android:textSize="20sp"
            android:textColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


    <TextView
        android:id="@+id/ahead"
        android:clickable="true"
        android:layout_marginBottom="35sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Go Ahead! "
        android:textSize="23sp"
        android:textColor="@drawable/text_focus_white"
        android:layout_marginRight="8sp"
        android:layout_gravity="right"/>
</LinearLayout>

layout-small folder (with smaller font sizes and paddings)

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10sp"
    android:background="#009688">

    <RelativeLayout
        android:layout_weight="0.5"
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:id="@+id/linear">

        <TextView
            android:layout_marginTop="20sp"
            android:id="@+id/mission"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="MISSION"
            android:textColor="#ffffff"
            android:textSize="50sp"
            android:gravity="center_horizontal"/>

        <TextView
            android:layout_below="@+id/mission"
            android:id="@+id/notimpossible"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="NOT IMPOSSIBLE"
            android:textColor="#ffffff"
            android:textStyle="bold"
            android:textSize="28sp"
            android:gravity="center_horizontal"/>

    </RelativeLayout>

    <RelativeLayout
        android:padding="8sp"
        android:layout_weight="0.5"
        android:layout_width="match_parent"
        android:layout_height="0sp"
        android:layout_below="@+id/linear">

        <TextView
            android:id="@+id/random_main"
            android:textSize="13sp"
            android:textColor="@color/white"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

    </RelativeLayout>


    <TextView
        android:id="@+id/ahead"
        android:clickable="true"
        android:layout_marginBottom="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="Go Ahead! "
        android:textSize="19sp"
        android:textColor="@drawable/text_focus_white"
        android:layout_marginRight="8sp"
        android:layout_gravity="right"/>
</LinearLayout>

Answer 1

if you have same layout, you don't need to create multiple layout xml. you can adjust text-size (or various dimension params) by dimens.xml

example

res/layout/your_activity.xml

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="@dimen/space_large"
    android:textSize="@dimen/text_small"/>

res/values/dimens.xml

<!-- this is common parameter -->
<dimen name="text_small">12sp</dimen>
<dimen name="space_large">8dp</dimen>

res/values-large/dimens.xml

<!-- for large-size display -->
<dimen name="text_small">14sp</dimen>
<dimen name="space_large">12dp</dimen>

this approach sometimes effective.

if your layout change significantly by display size, you should choose multiple layout-xml style, as @oguzhand says.

Answer 2

check this: http://developer.android.com/guide/practices/screens_support.html

create

layout-mdpi
layout-hdpi
layout-xhdpi
layout-xxhdpi
layout-xxxhdpi

folders for different dpi's. For different sizes, you can use

layout-small (for small size phones)
layout-normal (for normal size phones)
layout-large (for 7 inch tablets)
layout-xlarge (for 10 inch tablets)

and also use like

layout-large-hdpi
layout-large-mdpi
layout-xlarge-hdpi
layout-xlarge-mdpi

for nexus S you neet to use layout-normal or layout-hdpi