How to make my layout fit in all screens

Question

I have gone through many relative answers on stockoverflow and link's such as Supporting Different Screens or Screen Compatibility Mode
I have created the following relative layout and I am trying to make it look alike in all android screens.

My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.
Does anyone have any suggestion how to improve that?
And preferably without increasing the size of my app.

Thanks in advance!

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:mm="http://millennialmedia.com/android/schema"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background"
    tools:context=".MainActivity" >

    <ImageButton
        android:id="@+id/Switch_off"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:onClick="someMethod"
        android:background="@drawable/switch_off"/>

    <ImageView
        android:id="@+id/warning_shot"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="@drawable/more"
        android:onClick="someMethod" />

    <ImageView
        android:id="@+id/imageViewBatteryState"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"        
        android:layout_below="@+id/Switch_off"

        />

   <ImageView
        android:id="@+id/sh"
        android:layout_width="147dp"
        android:layout_height="54dp"
        android:layout_below="@+id/Switch_off"
        android:layout_centerHorizontal="true"
        android:background="@drawable/me"/>

    <ImageView
        android:id="@+id/sit"
        android:layout_width="100dp"
        android:layout_height="50dp"
        android:layout_below="@+id/Switch_off"
        android:layout_centerHorizontal="true"
        />

    <TextView
        android:id="@+id/textViewBatteryInfo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#ffffff"
        android:textSize="12sp"
        android:textStyle="bold"
        android:typeface="monospace" 
        android:layout_alignBottom="@+id/sit"
        android:layout_centerHorizontal="true"/>

</RelativeLayout>

Answer 1

I will suggest you to use LinearLayout instead of Relativelayout specially for the issue :

My images fit perfect for 4.8 inch phones but when I try to use a 2.8 inch display or something like like that, some buttons go on top of others, and they do not shrink.

Because When you give orientation to Linearlayout then Its child will never get on top of each other for any resolution or screen size.

And If you give them Weight then Views will be in fix position for Each and Every device.

For example Put below Xml in your project and Check this out in Any resolution, It will give the same Result.

XML:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:mm="http://millennialmedia.com/android/schema"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/button1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 2" />

        <Button
            android:id="@+id/button3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button 3" />
    </LinearLayout>

</LinearLayout>