0

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

Emulator View

WYSIWYG View

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>
Jeff Axelrod
  • 27,676
  • 31
  • 147
  • 246
ocross
  • 593
  • 1
  • 5
  • 24
  • post your layout please. – JoxTraex May 06 '11 at 00:20
  • @JoxTraex Sorry forgot to post that with the original post should have done it then. Just edited the post to include the layout. Thanks – ocross May 06 '11 at 22:19
  • You seem to use 'px' extensively, from what I've understood it might be better to go with ['dp' instead](http://stackoverflow.com/questions/2025282/difference-of-px-dp-dip-and-sp-in-android). – harism May 06 '11 at 22:26
  • Thanks @harism yeah i have heard this aswell. However i was using dp before and it seemed to change based on the dpi of the screen which is not what i want. I would like it to scale with the resolution. Really i just want to know why my graphical view is different than my emulator when they are set to be the same screen. – ocross May 07 '11 at 00:35

2 Answers2

0

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>
Chronos
  • 1,972
  • 17
  • 22
0

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.

JoxTraex
  • 13,423
  • 6
  • 32
  • 45
  • Thanks @JoxTraex I had tried using dp before, it does scale like you say but it seemed to scale not only on resolution but also on dpi (my High Density WVGA had differnt spacing than my Medium Density WVGA). I figured it was more for scaling things so that people with high dpi screens wont have too small of items on their screen, when i wanted everything just to fit properly. I will mess around with it a bit more to see if i can get what i wanted. although really what i wanted to know is why my graphical view is different than my emulator when they are set to be the same screen. – ocross May 07 '11 at 00:43