Android xml layout for all screen size

Question

I want to create an xml file for all layout which keeps same ratio and position in the device.

Here, is my layout design, that I want to create:

Here is my layout xml file: When I use this xml, in some screen the round button not same size as my upper image, and the Text view(0.0km) middle of the "image" view and "round button" is not in the middle position:

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

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

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_marginTop="50dp"
        android:layout_alignParentTop="true"

        android:src="@drawable/firstscreenimage" />

</RelativeLayout>

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/button1"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="92dp"
    android:gravity="right"
    android:text="0.0km"
    android:textSize="130dp" />

<Button
    android:id="@+id/button1"
    android:layout_width="400dp"
    android:layout_height="400dp"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="150dp"
    android:background="@drawable/animation0" />


 <TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignBaseline="@+id/button1"
    android:textSize="35dp"
    android:layout_alignBottom="@+id/button1"
    android:layout_centerHorizontal="true"
    android:text="Start" />

 <EditText
     android:id="@+id/campa"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_centerHorizontal="true"
     android:layout_marginBottom="23dp"
     android:ems="10" >

     <requestFocus />
 </EditText>

</RelativeLayout>

Here is the wrong layout:

Please help me, sorry for my poor english. Thank you....

Answer 1

Try this

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

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

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentLeft="true"
                android:layout_marginTop="50dp"
                android:layout_alignParentTop="true"

                android:src="@drawable/firstscreenimage" />

        </RelativeLayout>

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/button1"
            android:layout_alignParentRight="true"
            android:layout_marginRight="10dp"
            android:gravity="right"
            android:text="0.0km"
            android:textSize="130dp" />

        <Button
            android:id="@+id/button1"
            android:layout_width="400dp"
            android:layout_height="400dp"
            android:layout_centerInParent="true"
            android:background="@drawable/animation0" />




<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBaseline="@+id/button1"
android:textSize="35dp"
android:layout_alignBottom="@+id/button1"
android:layout_centerHorizontal="true"
android:text="Start" />

 <EditText
     android:id="@+id/campa"
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:layout_alignParentBottom="true"
     android:layout_centerHorizontal="true"
     android:layout_marginBottom="23dp"
     android:ems="10" >

     <requestFocus />
 </EditText>

</RelativeLayout>

Answer 2

You need use a different image size and different layouts.

http://developer.android.com/design/style/iconography.html

http://developer.android.com/guide/practices/screens_support.html