Android screen not scaling correctly even though I used dp as units?

Question

I have done a lot of reading on SO and googling all over the place but still cannot get my answer...I have this code:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/welcomeRelativeLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@drawable/graph_paper" >

 <LinearLayout
    android:id="@+id/linearLayout2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/first"
        android:layout_width="40dp"
        android:layout_height="90dp"
        android:layout_marginTop="70dp"
        android:background="@color/Blue" />

    <TextView
        android:id="@+id/second"
        android:layout_width="40dp"
        android:layout_height="90dp"
        android:layout_marginTop="70dp"
        android:background="@color/Cyan" />

    <TextView
        android:id="@+id/third"
        android:layout_width="40dp"
        android:layout_height="90dp"
        android:layout_marginTop="70dp"
        android:background="@color/Brown" />
</LinearLayout>

<LinearLayout
    android:layout_width="100dp"
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true"
    android:layout_centerHorizontal="true"
    android:layout_marginTop="203dp"
    android:background="@color/Black"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/Yellow" >

        <ImageView
            android:id="@+id/welcomeWImageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginBottom="16dp"
            android:src="@drawable/w" />

        <ImageView
            android:id="@+id/WelcomeOImageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/o" />

        <ImageView
            android:id="@+id/welcomeRImageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/r" />

        <ImageView
            android:id="@+id/welcomeDImageView"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/d" />
    </LinearLayout>

    <TextView
        android:id="@+id/welcomeTextView"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/lime" />

    <LinearLayout
        android:id="@+id/LinearLayout01"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/Pink" >

        <ImageView
            android:id="@+id/ImageView03"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginBottom="16dp"
            android:src="@drawable/w" />

        <ImageView
            android:id="@+id/ImageView04"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/o" />

        <ImageView
            android:id="@+id/ImageView01"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/r" />

        <ImageView
            android:id="@+id/ImageView02"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:src="@drawable/d" />
    </LinearLayout>
</LinearLayout>

</RelativeLayout>

As stated in the answers from different threads I have used dp as a scaling unit but I still get these images as a result when moving from different screen size and resolution.

here are the different images I get on different screen sizes and resolutions:

why arent the textboxes growing proportionally to the screen size and resolution? As they are textviews without graphics and dp is used for the unit.

Thank you guys ahead of time.

Answer 1

I cant really tell you the exact xml code to fix this, but as an idea, you need to make use of following properties to equally distribute the screen area among your views:

android:weightSum       //for your LinearLayout
android:layout_weight   //for your child views

and depending on the orientation of your LinearLayout, you need to set either of the following to your child views.

android:layout_height="0dp"
android:layout_width="0dp"

For examples, read this and this.