Android XML Layout for all Devices (Small/Normal/Large/XLarge, etc)

Question

I want to create a XML Layout that will support all the Screen sizes. In the XML, first element is ImageView, second one is TextView and third one is Button with an Image. So the TextView should be the exact position in all the devices (small, medium, large, xLarge, etc).

How can I do this?

Here is the XML output should be look like:

Here is the XML file that i created for the Normal/Medium Layout:

<?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" >

<ImageView
    android:id="@+id/imageView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true"
    android:src="@drawable/firstscreenimage" />

<RelativeLayout
    android:id="@+id/relativeLayout2"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true" >

    <EditText
        android:id="@+id/campa"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/textView3"
        android:ems="10" >

        <requestFocus />
    </EditText>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:gravity="center"
        android:text="My Current\n Campaign" />
</RelativeLayout>

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

    <Button
        android:id="@+id/button1"
        android:layout_width="210dp"
        android:layout_height="210dp"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="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:layout_alignBottom="@+id/button1"
        android:layout_centerHorizontal="true"
        android:gravity="center"
        android:text="Start" />
</RelativeLayout>

<TextView
    android:id="@+id/textView1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_above="@+id/relativeLayout1"
    android:layout_alignParentLeft="true"
    android:layout_marginBottom="42dp"
    android:gravity="right"
    android:paddingRight="25dp"
    android:text="0.0km"
    android:textSize="30dp" />

</RelativeLayout>

Answer 1

You need to put all the Widths, Heights, Paddings, Margins , etc in the /res/values/dimens.xml file like this:

dimens.xml :

<!-- Small Dimensions = "Medium Dimensions * 0.75" For Example: 210*.75 = 157.5-->
<dimen name = "button1_width_small">157.5dip</dimen>

<!-- Medium Dimensions -->
<dimen name = "button1_width_medium">210dip</dimen>

<!-- Large Dimensions = "Medium Dimensions * 1.5" For Example: 210*1.5 = 315 -->
<dimen name = "button1_width_large">315dip</dimen>

<!-- XLarge Dimensions = "Medium Dimensions * 2" For Example: 210*1.5 = 420 -->
<dimen name = "button1_width_xLarge">420dip</dimen>

And use them in your Layouts (Normal/Medium) like this:

<Button
    android:id="@+id/button1"
    android:layout_width="@dimen/button1_width_medium"
    android:layout_height="210dp"
    android:layout_centerHorizontal="true"
    android:layout_centerVertical="true"
    android:background="@drawable/animation0" />

For converting the dimensions use the following Values:

0.75 - ldpi  (small)   //mdpi dimens *0.75
1.0  - mdpi  (normal)  //First create these dimensions
1.5  - hdpi  (large)   //mdpi dimens *1.5
2.0  - xhdpi (xLarge)  //mdpi dimens *2.0

You also need to create different Layouts Folders in your res folder for all devices and use the dimensions accordingly.

Generic Layout Folders (Android Dev Guide) :

res/layout-small
res/layout-normal
res/layout-large
res/layout-xlarge

After you are done with making your Normal/Medium Layouts follow these steps:

1. Convert the Normal Dimensions for other Screen Sizes.
   
2. Copy your Normal Layout xml files in to other Folders.
   
3. Change the suffix of the dimensions used according to the folder that you are in.
   
4. Resize the Image Resources in your drawable folder (Width and Height - Same technique as we used for converting the dimens) and put them in their respective drawable folder (drawable-ldpi, drawable-mdpi, drawable-hdpi, drawable-xdpi and so on).

Then your Layouts should work on every device with correct positioning.
I hope this helps.

Answer 2

So you need to create different folders and maintain all xml in those folders.

The following is a list of resource directories in an application that provides different layout designs for different screen sizes and different bitmap drawables for medium, high, and extra high density screens.

res/layout/my_layout.xml             // layout for normal screen size ("default")
res/layout-small/my_layout.xml       // layout for small screen size
res/layout-large/my_layout.xml       // layout for large screen size
res/layout-xlarge/my_layout.xml      // layout for extra large screen size
res/layout-xlarge-land/my_layout.xml // layout for extra large in landscape orientation

For more info refer this link