Android Layout Design for normal screen sizes

Question

I am a hobbiest app developer and I feel I have a good grasp on android basics but the main thing that I struggle at is app design. I understand how to develop for different screen sizes and densities. But the main thing I struggle at is each of the normal and other sizes cover such a range of sizes within their respective categories. I have been searching and searching and not been bale to find a solution.

The main issue I am having is when designing using eclipse, i make a design using nexus one at the design looks perfect for what I want when I swap to a smaller screen like 3.2 HVGA or even the nexus galaxy which are all normal sized images, the location of my images have moved. So what looked perfect for the nexus one looks awful on some other normal screen sizes.

What can be done to ensure if an image is directly next to another that it stays that way on a different screens. I will give an example of the current design I am working on and I hope somebody can explain what im doing wrong/how i can improve.

Nexus One Design:

3.2 HVGA:

  the xml generated:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:columnCount="4"
    android:orientation="vertical" >

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/i2" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/Button1"
        android:layout_alignTop="@+id/Button1"
        android:layout_marginLeft="106dp"
        android:layout_marginTop="160dp"
        android:background="@drawable/i3" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button2"
        android:layout_alignBottom="@+id/button2"
        android:layout_alignRight="@+id/Button1"
        android:layout_marginRight="112dp"
        android:background="@drawable/i4" />

    <Button
        android:id="@+id/button4"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button3"
        android:layout_alignLeft="@+id/button3"
        android:background="@drawable/i5" />

</RelativeLayout>

Answer 1

You need to create different images for each of the screen resolutions and put them into the respective drawable folder drawable--hdpi , drawable-mdpi , drawable-xhdpi , etc. Also be sure that you are using dp in your xml file, which it appears you are. Just be sure you always do so.

Designing for the different screens can be tricky because you have to essentially create the same image 4 or 5 times.

Also, make sure you are testing on actual handsets, because the emulator doesn't always give you an accurate layout.

Answer 2

Try adding another layout for side buttons to group them together, and then center that layout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:id="@+id/RelativeLayout1"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:columnCount="4"
                android:orientation="vertical"
                android:layout_alignParentTop="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true">

    <Button
        android:id="@+id/Button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:background="@drawable/i1"
        android:text="Button" />

    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:id="@+id/RelativeLayout2"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerInParent="true">

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="false"
            android:layout_alignParentTop="true"
            android:background="@drawable/i2"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i3"
            android:layout_below="@+id/button1"
            android:layout_alignParentLeft="true"/>

        <Button
            android:id="@+id/button3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i4"
            android:layout_below="@+id/button4"
            android:layout_toRightOf="@+id/button2"/>

        <Button
            android:id="@+id/button4"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/i5"
            android:layout_toRightOf="@+id/button2"
            android:layout_alignParentTop="true"/>
    </RelativeLayout>
</RelativeLayout>