CODEWITHSUNDEEP
androidandroid-layout
capcom
capcom

Reputation: 3337

Android: Supporting multiple screen sizes within the same screen size type

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 320x480 screen qualifies for the normal size layout, but so does someone's 480x800. As you can imagine, the content of my app will not fill up the whole screen of a 480x800 device because there is more area. Here are examples of what it looks like:

On 320x480 (what I designed for):

enter image description here

On 480x800 (notice the extra space at the bottom):

enter image description here

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 480x800 screens (because they seem to be most common)? Thanks.

Upvotes: 1

Views: 984

Answers (3)

nistv4n
nistv4n

Reputation: 2535

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)

Upvotes: 1

Zsombor Erdődy-Nagy
Zsombor Erdődy-Nagy

Reputation: 16914

You need to design screens so that you always think about how the Views you define behave when the screen's size shrinks or grows. As you saw, screens may be varying greatly even in the same size-category.

In the case of the screen that you showed, you need to give the width of the EditText components by using weights, not exact dp amounts. You can find many articles on how you might do this, here's one for a start.

Upvotes: 1

Ridcully
Ridcully

Reputation: 23665

320 : 480 has a different ratio than 480 : 800. So the latter simply has more vertical space in relation to the horizontal space than the former. So there is nothing wrong with your layout.

Upvotes: 1

Related Questions