How can I get my layout to look the same across multiple screen sizes and densities?

Question

This is my code:

<TextView
    android:id="@+id/timer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_marginTop="50dp"
    android:textColor="#873670" />

<TextView
    android:id="@+id/questionList"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginTop="20dp"
    android:textAppearance="?android:attr/textAppearanceLarge"
    android:textColor="#110987" />

    <RadioGroup
        android:id="@+id/rgAns"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <RadioButton
            android:id="@+id/rbOpt1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:onClick="usrAnsrChoice" />

        <RadioButton
            android:id="@+id/rbOpt2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:onClick="usrAnsrChoice" />

        <RadioButton
            android:id="@+id/rbOpt3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:clickable="true"
            android:onClick="usrAnsrChoice" />
    </RadioGroup>

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginRight="40dp"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/prevQstn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/quizPrvBtnLbl" />

    <Button
        android:id="@+id/endTest"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/quizEndTstBtnLbl" />

    <Button
        android:id="@+id/nextQstn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/quizNxtBtnLbl" />

    <TextView
        android:id="@+id/inc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:layout_marginTop="100dp"
        android:textColor="#ffffff" />

</LinearLayout>

I want this screen to be adjusted automatically for 4", 5", and 2" screens. I also want to fully support mdpi and ldpi screens and have everything look the same on a 7" screen as it would on a 4" screen. What changes must I make to my XML to support these screen sizes and densities?

Right now my layout looks fine on small screens but not so much on larger screens. Also, I don't want my images to be stretched or my text to be misaligned.

Answer 1

To design a layout that works well on several different types of screens you should create layout files for each screen size. The old way of doing this is similar to what Danny outlined in his answer, but not quite accurate. The old way of supporting multiple screen sizes is as follows:

layout-xlarge: xlarge screens are at least 960dp x 720dp
layout-large: large screens are at least 640dp x 480dp
layout-normal: normal screens are at least 470dp x 320dp
layout-small: small screens are at least 426dp x 320dp

This way of defining layouts for different screen sizes is still supported but it is now suggested that this method be replaced by targeting minimum screen widths. The reason for targeting screen widths instead of generic size "buckets" is that it was sort of ambiguous when determining which bucket a screen actually fit into and there were some devices that were reporting the wrong bucket. By targeting screen widths, the device can no longer incorrectly report its size.

Screen width folders would be setup like this:

layout-sw320dp: 320dp -> a typical phone screen (240x320 ldpi, 320x480 mdpi, 480x800 hdpi, etc).
layout-sw480dp: 480dp -> a tweener tablet like the Dell Streak (480x800 mdpi).
layout-sw600dp: 600dp -> a 7" tablet (600x1024 mdpi).
layout-sw720dp: 720dp -> a 10" tablet (720x1280 mdpi, 800x1280 mdpi, etc).

For your drawable resources, instead of targeting the screen size, you would want to target the screen density. The basic idea with this is that you create all your resources targeting the mdpi density bucket and scale your drawables for different densities. So in this case you'd have the following drawable folders for your image resources:

drawable-ldpi: Low density screens
drawable-mdpi: Normal or medium density screens
drawable-hdpi: High density screens
drawable-xhdpi: Very high density screens

A better explanation can be found on the Android Developer Reference and is excerpted here (density bucket names added by me):

Alternative drawables

Almost every application should have alternative drawable resources for different screen densities, because almost every application has a launcher icon and that icon should look good on all screen densities. Likewise, if you include other bitmap drawables in your application (such as for menu icons or other graphics in your application), you should provide alternative versions or each one, for different densities.

Note: You only need to provide density-specific drawables for bitmap files (.png, .jpg, or .gif) and Nine-Path files (.9.png). If you use XML files to define shapes, colors, or other drawable resources, you should put one copy in the default drawable directory (drawable/).

To create alternative bitmap drawables for different densities, you should follow the 3:4:6:8 scaling ratio between the four generalized densities. For example, if you have a bitmap drawable that's 48x48 pixels for medium-density screen (the size for a launcher icon), all the different sizes should be:

• 36x36 for low-density (ldpi)
• 48x48 for medium-density (mdpi)
• 72x72 for high-density (hdpi)
• 96x96 for extra high-density (xhdpi)

For more information about designing icons, see the Icon Design Guidelines, which includes size information for various bitmap drawables, such as launcher icons, menu icons, status bar icons, tab icons, and more.

A complete reference on supporting multiple screen sizes effectively can be found on the Android Developer Site.

Answer 2

To design the layout neatly with good UI. you create the folders in drawable

1. layout-large for the hdpi devices like google nexus
2. layout-xlarge for the xhdpi devices like touchpads
3. layout-small for the small devices less than medium devices

And align them the fields and elements where you want set the font size based on the layouts. To appear good UI.

Answer 3

You should use RelativeLayout as the root view. Then you can specify relations between UI elements as above, below etc. It is much easier to design for multiple displays using RelativeLayout