Understanding Android screen resolution & density

Question

I have been developing an app on an eeepad 10" tablet. It reports a screen size of 1280x752 and a mdpi density.

The image currently looks like this

I recently bought a Nexus 4 (screen size 1184 x 768 , density xhdpi ). I assumed that if I ran the app on the phone it would look the same, only smaller.

What I actually got was this :

Not what I exepected.

The layout view for the left hand side list view looks like this -

        <?xml version="1.0" encoding="utf-8"?>
        <RelativeLayout  xmlns:tools="http://schemas.android.com/tools" android:orientation="horizontal"
            android:layout_width="match_parent" 
            android:layout_height="match_parent" 
            android:layout_marginRight="5dp"
            xmlns:android="http://schemas.android.com/apk/res/android">


                    <TextView android:id="@+id/tvName" 
                        android:gravity="center"
                        android:layout_width="80dp" 
                        android:layout_height="40dp" 
                        android:layout_marginLeft="10dp"
                        android:layout_marginRight="20dp"
                        android:layout_marginTop="5dp" 
                        android:text="XXX"
                        android:textSize="30sp"  
                        android:background="@drawable/rectanglesegment" 
                        android:textAppearance="?android:attr/textAppearanceMedium" />

                    <TextView android:id="@+id/tvLongName"
                        android:layout_toRightOf="@+id/tvName"
                        android:layout_width="wrap_content" 
                        android:layout_height="wrap_content" 
                        android:text="dfdfdsfdfdfdsfdsf" 
                        android:textAppearance="?android:attr/textAppearanceMedium" />

                    <TextView android:id="@+id/tvUsage" 
                        android:layout_below="@+id/tvLongName"
                        android:layout_toRightOf="@+id/tvName"
                        android:layout_height="wrap_content" 
                        android:layout_width="wrap_content"
                        android:layout_marginRight="5dp"
                        android:textColor="#ff0000"
                        android:gravity="right"
                        android:text="Required" 
                        android:textAppearance="?android:attr/textAppearanceMedium" />  

                    <TextView android:id="@+id/tvCardinality" 
                        android:layout_below="@+id/tvLongName"
                        android:layout_toRightOf="@+id/tvUsage"
                        android:layout_height="wrap_content" 
                        android:layout_width="wrap_content"
                        android:layout_alignParentRight="true" 
                        android:layout_marginRight="5dp"
                        android:layout_marginLeft="5dp"
                        android:text="(0..1)" 
                        android:textAppearance="?android:attr/textAppearanceMedium" />

        </RelativeLayout>

What can I do to get the layout to on the phone to look more like the tablet ?

Answer 1

This explains it best from the android developers guide on multiscreens. Specifically using size qualifiers for your xml. If you use large, 7 inch tablets are included.