Same layout looks different on a Samsung Galaxy Tab

Question

I'm developing an Android 2.2.2 application which will support multiple screens sizes and all screens will be portrait. I won't support landscape.

I have test the following layout on an HTC Desire and on a Samsung Galaxy Tab 7.7.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/no_conectado"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/labelSelGateName"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:layout_marginTop="80dp" />

    <TextView
        android:id="@+id/labelSelOpened"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />

    <ProgressBar
        android:id="@+id/indicatorActivityView"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_marginTop="22dp"
        android:layout_gravity="center_horizontal" />

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="110dp"
        android:layout_marginTop="60dp"
        android:orientation="horizontal" >

        <ImageButton
            android:id="@+id/btnMyGates"
            android:layout_width="50dp"
            android:layout_height="110dp"
            android:layout_marginLeft="20dp"
            android:layout_weight=".33"
            android:background="@null"
            android:contentDescription="@string/layout_empty"
            android:onClick="onGateClick" />

        <LinearLayout
            android:layout_width="90dp"
            android:layout_height="110dp"
            android:layout_weight=".33"
            android:orientation="vertical" >

            <ImageButton
                android:id="@+id/btnOpen"
                android:layout_width="90dp"
                android:layout_height="55dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="@null"
                android:contentDescription="@string/layout_empty"
                android:onClick="onOpenDoorClick" />

            <ImageButton
                android:id="@+id/btnClose"
                android:layout_width="90dp"
                android:layout_height="50dp"
                android:layout_gravity="center_horizontal"
                android:layout_marginTop="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:background="@null"
                android:contentDescription="@string/layout_empty"
                android:onClick="onCloseDoorClick" />

        </LinearLayout>

        <ImageButton
            android:id="@+id/btnOptions"
            android:layout_width="50dp"
            android:layout_height="110dp"
            android:layout_marginRight="20dp"
            android:layout_weight=".33"
            android:background="@null"
            android:contentDescription="@string/layout_empty"
            android:onClick="onOptionClick" />

    </LinearLayout>

    <ImageButton
        android:id="@+id/btnFaqs"
        android:layout_width="110dp"
        android:layout_height="60dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="10dp"
        android:background="@null"
        android:contentDescription="@string/layout_empty"
        android:onClick="onFAQClick" />

    <ImageButton
        android:id="@+id/btnInfo"
        android:layout_width="110dp"
        android:layout_height="60dp"
        android:layout_gravity="right"
        android:layout_marginTop="20dp"
        android:background="@null"
        android:contentDescription="@string/layout_empty"
        android:onClick="onInfoClick" />

</LinearLayout>

I have images for ldpi, mdpi, hdpi and x-hdpi.

Background image looks great, but all widgets (TextView, ProgressBar, ImageButton, etc) aren't in the right position when I test it on Samsung Galaxy Tab.

I have designed this layout on Eclipse using 'Nexus One` as a model.

Here people are recommend me that use only one layout for every screen size and densitiy, but it doesn't work. I'm using dp units and fill_parent, etc. but it is different on Galaxy Tab.

Do I need a layout for x-large screen sizes?

Answer 1

Indeed, the advice you received was good: it's possible to have only one layout file, but as it was already suggested in comments, it's not good to hardcode dimensions, even if you use dp or dip, specially when you are targeting all the screen sizes and densities available.

Instead, you should replace those values with links to dimensions values.

For example, instead of android:layout_marginLeft="10dp", you'll have something like

android:layout_marginLeft="@dimen/textview_margin_left"

where textview_margin_left is defined in the dimens.xml, having different values in different folders;
probably in folder values: <dimen name="textview_margin_left">10dp</dimen>,
in folder values-large: <dimen name="textview_margin_left">20dp</dimen>,
while in values-xlarge: <dimen name="textview_margin_left">30dp</dimen>

But this is just an example, you have to test on all dimensions and resolutions and find the best values for your layout. In Eclipse, in Graphical Layout mode, you can easily get an idea about how your layout looks on various devices, just by clicking on Nexus One, and choosing another model from the list, and the layout will automatically update.

Also, you can move in dimens.xml all the text sizes, and that will be very useful for x-large devices.

Using only one RelativeLayout instead many imbricated LinearLayouts might also be a good idea, and using relative positioning for your objects, instead some of the hardcoded values.

Answer 2

The Problem is following you use in your layout, static values (100dp, 60dp). Now the problem is on a higher resolution this dp isn't the same.

That means you should create a layout for x-large screens. Also I wouldn't use those static values. Than your application will behave good on many diffrent screensizes!

Have a great Day

safari