Android Eclipse Graphical Layout

Question

I have been messing around with androids UI in eclipse and have been having trouble figuring out why my graphical layout does not reflect my actual program when launched to the device.The actual program seems to have a much larger scale.

My target device is WVGA (800x480) with a 240dpi screen(eg. most new high end smartphones). I have tried editing my Graphical Layouts view by changing the screen to be the 3.7 WVGA (Nexus One) which matches the display specs of my target device. I have also tried creating a custom screen configuration still with no luck. Heres 2 screen shots of it

Here's my layout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:scaleType="fitCenter"
        android:src="@drawable/androidcomp360" >
    </ImageView>

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0px"
        android:layout_marginTop="10px" >

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/textView1"
            android:layout_below="@+id/textView1"
            android:paddingLeft="20px"
            android:text="Offset : " >
        </TextView>

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView4"
            android:layout_alignTop="@+id/textView4"
            android:layout_toRightOf="@+id/textView4"
            android:paddingLeft="10px"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/TextView03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView02"
            android:layout_alignTop="@+id/TextView02"
            android:layout_toRightOf="@+id/TextView02"
            android:paddingLeft="20px"
            android:text="Offset Min :  " >
        </TextView>

        <TextView
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView03"
            android:layout_alignTop="@+id/TextView03"
            android:layout_toRightOf="@+id/TextView03"
            android:paddingLeft="10px"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView1"
            android:layout_alignTop="@+id/textView1"
            android:layout_toRightOf="@+id/textView1"
            android:paddingLeft="10px"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView2"
            android:layout_alignTop="@+id/textView2"
            android:layout_toRightOf="@+id/textView2"
            android:paddingLeft="20px"
            android:text="GPS Heading : " >
        </TextView>

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView3"
            android:layout_alignTop="@+id/textView3"
            android:layout_toRightOf="@+id/textView3"
            android:paddingLeft="10px"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/TextView06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView04"
            android:layout_alignTop="@+id/TextView04"
            android:layout_toRightOf="@+id/TextView04"
            android:paddingLeft="20px"
            android:text="Offset Max : " >
        </TextView>

        <TextView
            android:id="@+id/TextView05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView06"
            android:layout_alignTop="@+id/TextView06"
            android:layout_toRightOf="@+id/TextView06"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:paddingBottom="10px"
            android:paddingLeft="20px"
            android:text="Compass Heading : " >
        </TextView>
    </RelativeLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:maxHeight="50px"
        android:minHeight="30px"
        android:text="Log Data"
        android:typeface="normal"
        android:visibility="visible" >
    </Button>

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="match_parent"
        android:layout_height="200px"
        android:scaleType="fitCenter"
        android:src="@drawable/androidcomp360" >
    </ImageView>

</LinearLayout>

Answer 1

Try this layout, and don't use px, use dp instead, and place your images at drawable-hdpi:

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:src="@drawable/androidcomp360" >
    </ImageView>

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp" >

        <TextView
            android:id="@+id/textView4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@+id/textView1"
            android:layout_below="@+id/textView1"
            android:paddingLeft="20dp"
            android:text="Offset : " >
        </TextView>

        <TextView
            android:id="@+id/TextView02"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView4"
            android:layout_alignTop="@+id/textView4"
            android:layout_toRightOf="@+id/textView4"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/TextView03"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView02"
            android:layout_alignTop="@+id/TextView02"
            android:layout_toRightOf="@+id/TextView02"
            android:paddingLeft="20dp"
            android:text="Offset Min :  " >
        </TextView>

        <TextView
            android:id="@+id/TextView04"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView03"
            android:layout_alignTop="@+id/TextView03"
            android:layout_toRightOf="@+id/TextView03"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView1"
            android:layout_alignTop="@+id/textView1"
            android:layout_toRightOf="@+id/textView1"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView2"
            android:layout_alignTop="@+id/textView2"
            android:layout_toRightOf="@+id/textView2"
            android:paddingLeft="20dp"
            android:text="GPS Heading : " >
        </TextView>

        <TextView
            android:id="@+id/TextView01"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/textView3"
            android:layout_alignTop="@+id/textView3"
            android:layout_toRightOf="@+id/textView3"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/TextView06"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView04"
            android:layout_alignTop="@+id/TextView04"
            android:layout_toRightOf="@+id/TextView04"
            android:paddingLeft="20dp"
            android:text="Offset Max : " >
        </TextView>

        <TextView
            android:id="@+id/TextView05"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/TextView06"
            android:layout_alignTop="@+id/TextView06"
            android:layout_toRightOf="@+id/TextView06"
            android:paddingLeft="10dp"
            android:text="0" >
        </TextView>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:paddingBottom="10dp"
            android:paddingLeft="20dp"
            android:text="Compass Heading : " >
        </TextView>
    </RelativeLayout>

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:maxHeight="50dp"
        android:minHeight="30dp"
        android:text="Log Data"
        android:typeface="normal"
        android:visibility="visible" >
    </Button>

    <ImageView
        android:id="@+id/ImageView01"
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:scaleType="fitCenter"
        android:src="@drawable/androidcomp360" >
    </ImageView>

</LinearLayout>

Answer 2

Change the scale of everything to 'dp' as this makes it scale based on the screen resolution. 'px' is an absolute pixel dimension, which won't scale.