Can't support multiple screen resolution

Question

I'm struggling to finish my Android app, but I'm having some problems with the UI. My problem is very basic, I've developed the UI using the default AVD when using AVD manager in Eclipse (HVGA, with a density of 160 dpi), and when I execute the app I see it as I designed, but if I change the target device (i.e. WVGA or QVGA) all the components in the layout are in a different position than the original. As far as I saw in the recommendations for support multiple screens, I should not use AbsoluteLayouts, in fact I'm using RelativeLayouts, I'm not using "px" for the dimensions (or positions), just "wrap_content" or "fill_parent", and in case I need an specific position I'm using "dp" (tested too with "sp"), also I've scaled the images for ldpi (0.75x), and still have the issue (not a particular screen, the hole app) ...so, my question is, is there any other UI tip that I'm missing?.
I'm putting a sample code and the results that I observe when testing it with a HVGA AVD (bigger image) and with a QVGA AVD. As you can see, the position of the yellow/green squares is different, as well as the size of the last row of images.
PS: I'm using a TabLayout also, so the background is loaded through code (tabHost.setBackgroundDrawable(getResources().getDrawable(R.drawable.background1)))
Any help will be appreciated.

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:id="@+id/row1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="140dp"
    >
    <ImageView
        android:id="@+id/btn1"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:clickable="true"
        android:onClick="method1"
        android:src="@drawable/button1"
    />
    <ImageView
        android:id="@+id/btn2"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:clickable="true"
        android:onClick="method1"
        android:src="@drawable/button2"
    />
    </LinearLayout>
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/row1"
        android:layout_centerHorizontal="true"
    >
    <ImageView
        android:id="@+id/btn3"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:clickable="true"
        android:onClick="method1"
        android:src="@drawable/button3"
    />
    <ImageView
        android:id="@+id/btn4"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:clickable="true"
        android:onClick="method1"
        android:src="@drawable/button4"
    />
    </LinearLayout>
</RelativeLayout>

screen at 240x320 screen at 320x480

Add your drawables, because I do not understand the changing sizing of the bottom boxes. Also, that white box is not in your example layout. — Kaediil, Dec 08 '11 at 02:41
Hi @Kaediil, thanks for your quick response, the white box is part of the background, sorry not to mention that before. Regarding the drawables, I'll add them soon, for now I don't know if it helps, but the size of the green/yellow boxes are 50x50 in case of mdpi and 38x38 in case of ldpi, and for the background the size is 240x360 (ldpi) and 320x480(mdpi). The attached images are just a cut of the screen. — maxivis, Dec 08 '11 at 03:50

momo · Answer 1 · 2011-12-08T06:35:59.573

1

Your layout looks fine to me, except for having that white box title on the background as it will make more difficult to put things in their position. Also, RelativeLayout does not have orientation but that is ignored.

In the bigger screenshot it looks like there is more space between the white box and the top of the screen. What it does not make sense to me is the different size in the second row. Are you 100% sure you are loading the correct images in the smaller screenshot?

edited Dec 08 '11 at 06:35

answered Dec 08 '11 at 04:27

momo

3,404
6
37
66

Hi @momo, thanks for your answer, I had to resize the images, now are fitting ok, and also the layout definition was wrong: I wrote a different layout for small screen devices and got it working, in the images that you see the layout is the same for both screens. – maxivis Dec 08 '11 at 23:06

score 0 · Answer 2 · answered Dec 08 '11 at 04:36

0

Did you follow the steps given on the developer site to make ur app to support multiple screens?

answered Dec 08 '11 at 04:36

himanshu

1,990
3
18
36

Hi @himanshu, thanks for your response, I missed the section in which explains the different layout directories, but now is working fine. – maxivis Dec 08 '11 at 23:10

score 0 · Accepted Answer · edited May 23 '17 at 12:07

0

You need to create different layout for diff. resolution i.e for large screen use layout-large folder.. I hope this link help to you.

edited May 23 '17 at 12:07

Community

1
1

answered Dec 08 '11 at 06:23

Dhaval Khant

2,467
2
16
24

1

Hi @Dhaval Khant, thanks a lot for your response, you were right, I had to write separate layouts for small and normal screen, and also I've scaled the png images. After some research I found that "Classic bitmaps — PNG, JPG, GIF — are not intrinsically scalable. If you are not running in "compatibility mode", Android will not even try to scale them for you based on screen resolution and size". – maxivis Dec 08 '11 at 23:07

Can't support multiple screen resolution

3 Answers3