My layout on large screen devices doesn't match large screen preview

Question

I have been testing the majority of my layouts on a Galaxy 5 Media Player, and the layouts all have been looking how I design them in the regular layout folder. I am using SDK 10, so I do not use the layout-sw600dp type folders, instead I use /layout, /layout-large, etc.

Although my layouts look fine on the Galaxy 5 player, when I tried them on the other device that will be used, Lenovo Ideapad A1, the view wasn't right. I created a new xml file in /layout-large for the 7" tablet, but now what is on the preview does not match what is on my device.

I am using a RelativeLayout with nothing in it but 8 buttons. The first button declared is aligned with the bottom, then each following button is placed above the one below it, with a marginBottom parameter set.

This is the xml file for the original view:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/v2"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <Button
        android:id="@+id/exitButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="36dp"
        android:layout_alignParentBottom="true"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_exit" />

    <Button
        android:id="@+id/findDeviceButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/exitButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_find_device" />

    <Button
        android:id="@+id/cebusButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/findDeviceButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_cebus" />

    <Button
        android:id="@+id/operationsButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/cebusButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_operations" />

    <Button
        android:id="@+id/monitorButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/operationsButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_monitor" />

    <Button
        android:id="@+id/wavesButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/monitorButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_waves" />

    <Button
        android:id="@+id/statusButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/wavesButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_status" />

    <Button
        android:id="@+id/more_parametersButton"
        android:layout_width="350dp"
        android:layout_height="60dp"
        android:layout_marginBottom="18dp"
        android:layout_above="@id/statusButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_parameters" />

</RelativeLayout>

When I run this on my 7" device, the buttons are HUGE and go past the top of the screen. However in the preview of it in Eclipse the buttons all nicely fit onto the screen. Why is it that the preview shows me a different view than what I expect?

EDIT:

I have adjusted the XML file to make it work on my tablet. Although now the preview looks even worse, the following XML file produces the results that I want on my device.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/v2"
    android:gravity="center_horizontal"
    android:orientation="vertical" >

    <Button
        android:id="@+id/exitButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="30dp"
        android:layout_alignParentBottom="true"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_exit" />

    <Button
        android:id="@+id/findDeviceButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/exitButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_find_device" />

    <Button
        android:id="@+id/cebusButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/findDeviceButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_cebus" />

    <Button
        android:id="@+id/operationsButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/cebusButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_operations" />

    <Button
        android:id="@+id/monitorButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/operationsButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_monitor" />

    <Button
        android:id="@+id/wavesButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/monitorButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_waves" />

    <Button
        android:id="@+id/statusButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/wavesButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_status" />

    <Button
        android:id="@+id/more_parametersButton"
        android:layout_width="300dp"
        android:layout_height="50dp"
        android:layout_marginBottom="15dp"
        android:layout_above="@id/statusButton"
        android:textColor="@android:color/white"
        android:background="@drawable/sel_button_round"
        android:text="@string/main_parameters" />

</RelativeLayout>

Answer 1

I think its not your Layout issue check screen compatibility

If your application is compatible with only small and normal screens, regardless of screen density, then you must specify eight different elements, because each screen size has four different density configurations

 <compatible-screens>
<screen android:screenSize=["small" | "normal" | "large" | "xlarge"]
        android:screenDensity=["ldpi" | "mdpi" | "hdpi" | "xhdpi"] />
...

For more information check this LINK

Here is a quick checklist about how you can ensure that your application displays properly on different screens:

Use wrap_content, fill_parent, or dp units when specifying dimensions in an XML layout file

1. Do not use hard coded pixel values in your application code

2. Do not use AbsoluteLayout (it's deprecated)

3. Supply alternative bitmap drawables for different screen densities

The Android system helps your application achieve density independence in two ways:

1. The system scales dp units as appropriate for the current screen density

2. The system scales drawable resources to the appropriate size, based on the current screen density, if necessary

For more information check this LINK