android : Need Same output in all the screen sizes

Question

I am defining a layout using relative layout using 320*480 size. I am using "dp" while defining the length and width of the elements. However when I try to check with a different size say 1024*600 or 480*800. I am getting a strange output.

I need to get the same output in all sizes as I get in the size 320*480.

Following is the layout I follow. Kindly help me..

Thanks in Advance.

Layout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:background="@drawable/background"
android:gravity="top" >

<RelativeLayout
    android:id="@+id/rl1"
    android:layout_alignParentLeft="true"
    android:layout_width="120dp"
    android:layout_height="wrap_content" 
    android:orientation="vertical" > 

    <RelativeLayout
        android:id="@+id/rl1A"
        android:layout_alignParentLeft="true"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >

    <ImageButton
        android:id="@+id/imOption1" 
        android:layout_centerHorizontal="true" 
        android:layout_centerVertical="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/> 

     </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl1B"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl1A"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption2"
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/>
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/rl1C"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl1B"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption3" 
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp"  
        android:background="@drawable/kite" />
    </RelativeLayout>

</RelativeLayout> 

<RelativeLayout
    android:id="@+id/rl2"
    android:layout_toRightOf="@+id/rl1"
    android:layout_width="120dp" 
    android:layout_height="wrap_content" 
    android:orientation="vertical" >     


    <RelativeLayout
        android:id="@+id/rl2A"
        android:layout_alignParentLeft="true"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >

    <ImageButton
        android:id="@+id/imOption4" 
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/> 
     </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl2B"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl2A"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption5"
        android:layout_below="@+id/imOption4"
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/>
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/rl2C"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl2B"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption6"
        android:layout_below="@+id/imOption5"
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp"  
        android:background="@drawable/kite" />
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl3"
    android:layout_toRightOf="@+id/rl2"
    android:layout_width="120dp"
    android:layout_height="wrap_content" 
    android:orientation="vertical" >    

    <RelativeLayout
        android:id="@+id/rl3A"
        android:layout_alignParentLeft="true"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption7" 
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/> 
    </RelativeLayout>


    <RelativeLayout
        android:id="@+id/rl3B"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl3A"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption8"
        android:layout_below="@+id/imOption7"
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp" 
        android:background="@drawable/kite"/>
    </RelativeLayout>



    <RelativeLayout
        android:id="@+id/rl3C"
        android:layout_alignParentLeft="true" 
        android:layout_below="@+id/rl3B"
        android:layout_width="120dp"
        android:layout_height="93dp"
        android:orientation="vertical" >
    <ImageButton
        android:id="@+id/imOption9"
        android:layout_below="@+id/imOption8"
        android:layout_centerHorizontal="true"
        android:layout_width="80dp"
        android:layout_height="80dp"  
        android:background="@drawable/kite" />
    </RelativeLayout>
</RelativeLayout> 

<RelativeLayout
    android:id="@+id/rl4"
    android:layout_toRightOf="@+id/rl3"
    android:layout_width="1dp"
    android:layout_height="fill_parent"
    android:background="#000000"   >     
</RelativeLayout>  

<RelativeLayout
    android:id="@+id/rl5"
    android:layout_width="240dp"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:layout_toRightOf="@+id/rl4" >

    <ImageView
        android:id="@+id/ivDisplayArea"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_width="90dp"
        android:layout_height="90dp"
        android:background="@drawable/kite"/>  

    <ImageButton
        android:id="@+id/bQuestion" 
        android:layout_marginTop="15dp"
        android:layout_marginLeft="10dp"
        android:layout_below="@+id/ivDisplayArea" 
        android:layout_alignParentLeft="true"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/question"  />

    <ImageButton
        android:id="@+id/bNext" 
        android:layout_marginTop="15dp"
        android:layout_marginLeft="30dp"
        android:layout_below="@+id/ivDisplayArea"
        android:layout_toRightOf="@+id/bQuestion"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:background="@drawable/next"/>

</RelativeLayout>


<RelativeLayout
    android:id="@+id/rl6"
    android:layout_width="360dp"
    android:layout_height="1dp"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/rl1"  
    android:background="#000000">
</RelativeLayout>

<RelativeLayout
    android:id="@+id/rl7"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentLeft="true"
    android:layout_below="@+id/rl6"
    android:layout_toLeftOf="@+id/rl4" >

     <TextView
         android:id="@+id/tvRewardAccount"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
         android:layout_alignParentLeft="true"
         android:gravity="center"
         android:text="Reward Account"
         android:textColor="#000000"
         android:textStyle="bold" />

             <ImageButton
                 android:id="@+id/bReward1"
                 android:layout_marginLeft="16dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp"
                 android:layout_below="@+id/tvRewardAccount"
                 android:background="@drawable/lollipop" /> 

             <ImageButton
                 android:id="@+id/bReward2"
                 android:layout_width="28dp"
                 android:layout_height="28dp"
                 android:layout_marginLeft="4dp"
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward1"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward3"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward2"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward4"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward3"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward5"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward4"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward6"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward5"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward7"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward6"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward8"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward7"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward9"
                 android:layout_marginLeft="4dp"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward8"
                 android:background="@drawable/lollipop" />

             <ImageButton
                 android:id="@+id/bReward10"
                 android:layout_width="28dp"
                 android:layout_height="28dp" 
                 android:layout_marginLeft="4dp"
                 android:layout_alignTop="@+id/bReward1"
                 android:layout_toRightOf="@+id/bReward9"
                 android:background="@drawable/lollipop" />


</RelativeLayout>

</RelativeLayout>

Answer 1

When you define sizes in density-independent pixels, this is intended to make the objects so defined more or less the same physical size on screens of varying densities. I suspect that the images you have posted are close-ups of your screens with smaller pixel dimensions, and more distant views of your screens with larger pixel dimensions; if you were to put both screens side by side on a table and photograph the physical devices, I suspect that your images would be approximately the same size. Your larger screen has not just more pixels, but more density-independent pixels, so an image of a specific size, expressed in dp, will take up a smaller percentage of that screen, although it will probably be about the same physical size (e.g., in inches).

You seem to be expecting that defining your images using dp units will cause them to occupy the same percentage of the physical screen, but that is not the purpose of those units. In fact, since different screens have different aspect ratios (ratio of width to height), such behavior would lead to distortions of your graphics.

Consider using fill_parent to scale your outermost layout to the size of the screen. You could make that outer layout a horizontally-configured LinearLayout for the left and right sides of the display, with the width of each defined as a percentage using layout_weight. You could then nest a vertically-configured LinearLayout as the first element of this horizontal one, with the top containing a GridView for the 3x3 images on the left, with each image scaled within its containing square in a way that preserves its aspect ratio, and so on.

Answer 2

Are your drawables big enough for the higher resolutions? Android won't upscale the images by default.

You can also use display size based dimensions - Android ressource managment is great for that. The following pages might help you.

http://android-er.blogspot.de/2010/04/how-to-define-dimension-in-android.html http://developer.android.com/guide/practices/screens_support.html

Answer 3

You musn't set layout static.You should get devices' screen size on code side and set layouts according to this dimensions. In that case you need multiple xml layouts and you should set it in code according to screen size.