Question

The problem I am running into related to supporting multiple screen sizes – a fairly common one I believe. I have searched a lot, but have not found something helpful.

I have my project laid out traditionally, with folders to support the various sizes called layout, layout-small, layout-large, layout-xlarge.

So as I have found out, even within each of these size regimes, there screens are not all the same size. For example, my 320×480 screen qualifies for the normal size layout, but so does someone’s 480×800. As you can imagine, the content of my app will not fill up the whole screen of a 480×800 device because there is more area. Here are examples of what it looks like:

On 320×480 (what I designed for):

On 480×800 (notice the extra space at the bottom):

Now, I have done a lot of research and applied lots of techniques in an effort to make my app look nice on all screen, but I feel like I am missing something fundamental. I have taken all the basic steps to use dp instead of px, use RelativeLayout everywhere, stuff like that. But I need some way for my app to re-size itself to better fit the larger screens. For example, the margins between the various components could increase a little to occupy more of the empty vertical space.

Any advice, or help? In the worst case, is there a way to design a layout which would fire up specifically for 480×800 screens (because they seem to be most common)? Thanks.

Answer 1

If I were you I’d use a layout like this:

<LinearLayout android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
        <!-- Your first form line -->
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
        <!-- Your second form line -->
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="fill_parent"
        android:layout_weight="1">
        <!-- Your third form line -->
    </LinearLayout>
        <!-- .... -->

</LinearLayout>

This layout will produce this (without colors, of course 🙂 ). The ratio of the lines (colored boxes) is fix, but it’s size is dinamically fit to the screen height. The fill_parent and layout_weight do the trick.

If you want to use RelativeLayout, you have to set the whitespaces and heights programatically from JAVA (some explanation here)