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.

Answer 2

you have to create three different layouts for your application .
1- layout folder ( basically its for small screens)
2- layout-large ( basically its for large screens such as 5.0)
3- layout-xlarge ( its used for Large screens "Tablets" )
in order for your application to fit in every screen perfectly you have to create these folders. below steps shows how to work with it
1- create new two foldesr in res folder layout-large and layout-xlarge.
2- copy your layout.xml from the layout folder and paste it on each folders u created now.
3- open them and you'll see how they look on bigger screens , then simply you'll have to change a bit on your layout.xml on each folder.

hope that what you seek for. its that simple . two extra folders