Understanding Android Multiple Device Layouts

Question

Ok, I have read all of the other posts regarding multiple device layouts and the android docs, yet I still managed to stuff it up!

I made the mistake of testing this application using my HTC Sensation HD. So when I decided to emulate it on the HTC Desire (medium screen res) imagine my shock that it wasn't even close to fitting.

I used DIP for EVERYTHING. So why on earth does half the screen fall off when using the emulator in the Desire medium resolution. I thought it would just scale down. if not, what am I supposed to do?

I have attached a Picture of the result. A dropbox download of a Working project (a dumbed down version) and the xml attached here. As you see, four controls have dropped off the page.

I need this App to work on large, medium and Small devices. (Sensation HD, Desire, Cha Cha). Any advise would be awesome.

PROJECT LINK

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:paddingLeft="20dip"
android:paddingRight="20dip" >

<ImageView
    android:id="@+id/clientLogo_TextView"
    android:layout_width="wrap_content"
    android:layout_height="120dip"
    android:layout_centerInParent="true"
    android:layout_gravity="center_horizontal|center_vertical"
    android:layout_marginBottom="15dip"
    android:layout_marginTop="15dip"
    android:src="@drawable/logotop" 
    android:adjustViewBounds="true"/>

<Button
    android:id="@+id/buttonOne_Button"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="5dip"
    android:text="Button One" >
</Button>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/customshape"
    android:orientation="vertical"
    android:padding="7dip" >

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

        <TextView
            android:id="@+id/labelOne_TextView"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:text="Label One"
            android:textStyle="bold" >
        </TextView>

        <TextView
            android:id="@+id/labelTwo_TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Label Two"
            android:textSize="13dip" >
        </TextView>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal" >

        <Button
            android:id="@+id/buttonTwo_Button"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:singleLine="true"
            android:text="Button Two"
            android:textSize="16dip" >
        </Button>
    </LinearLayout>

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

        <TextView
            android:id="@+id/sliderLabel_TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="5dip"
            android:text="Slider"
            android:textStyle="bold" >
        </TextView>

        <TextView
            android:id="@+id/sliderStatus_TextView"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text=" - Status"
            android:textSize="13dip" >
        </TextView>
    </LinearLayout>

    <SeekBar
        android:id="@+id/sliderOne_SeekView"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:max="10" >
    </SeekBar>

    <TextView
        android:id="@+id/labelThree_TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Label Three"
        android:textStyle="bold" >
    </TextView>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal" >

        <Spinner
            android:id="@+id/spinnerOne_Spinner"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1" >
        </Spinner>

        <Spinner
            android:id="@+id/spinnerTwo_Spinner"
            android:layout_width="wrap_content"
            android:layout_height="45dip"
            android:layout_weight="1" >
        </Spinner>
    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical|center_horizontal"
        android:orientation="horizontal"
        android:weightSum="1.0" >

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="0.5"
            android:orientation="vertical"
            android:weightSum="1.0" >

            <TextView
                android:id="@+id/labelFour_TextView"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight=".2"
                android:gravity="center_vertical|center_horizontal"
                android:text="Label Four"
                android:textStyle="bold" >
            </TextView>

            <Spinner
                android:id="@+id/spinnerThree_Spinner"
                android:layout_width="fill_parent"
                android:layout_height="45dip"
                android:layout_weight=".4" >
            </Spinner>
        </LinearLayout>

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|center_horizontal"
            android:layout_weight="0.5"
            android:orientation="vertical"
            android:weightSum="1.0" >

            <TextView
                android:id="@+id/labelFire_TextView"
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight=".2"
                android:gravity="center_vertical|center_horizontal"
                android:text="Label Five"
                android:textStyle="bold" >
            </TextView>

            <Spinner
                android:id="@+id/spinnerFour_Spinner"
                android:layout_width="fill_parent"
                android:layout_height="45dip"
                android:layout_weight=".4" >
            </Spinner>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/ButtonsLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dip" >

    <Button
        android:id="@+id/buttonThree_Button"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_margin="0dip"
        android:layout_weight="1"
        android:text="Button Three" >
    </Button>

    <Button
        android:id="@+id/buttonFour_Button"
        android:layout_width="fill_parent"
        android:layout_height="45dip"
        android:layout_weight="1"
        android:text="Button Four" >
    </Button>
</LinearLayout>

Answer 1

Device-independent pixels (dip) are intended to make your pixel measurements uniform across different screen densities. Screen size and density are two different things. You still need to code your layouts to span physical screen sizes.

For example, nearly all 10-inch tablets right now have a medium-density screen, despite the fact they have an "extra-large" screen size. That's because even though the screen is physically large, it doesn't pack in the pixels as densely as on some high-end phones, such as the Galaxy Nexus.

In order for your layouts to adapt to different screen sizes, you need to account for this in the structure of your layout. This means several things:

• Avoid hard-coded dimensions whenever possible. If you can, use match_parent to allow a UI widget to encompass available space.
• Try not to stack so many controls so they go off the screen of the smallest device you'll be using, or put the controls into a ScrollView.
• Center controls in available screen space. You can group a set of controls with a layout container such as LinearLayout, then center that within another layout manager with android:layout_gravity. You can also use android:gravity on some widgets (notably TextView and ImageView) to center their content within the bounds of the view itself.
• Android will allow you to create custom layouts for each combination of screen size and density, if you need to custom-tailor a layout for a particular class of device, such as a 7-inch tablet or a 3-inch phone. See the Android SDK docs.
• To span a very wide range of screens, you can take advantage of the Fragments API to stack related layouts on a tablet-sized screen, but show them individually on a phone screen.

There's other techniques, but the key thing to note is that using dip doesn't automatically scale your layout to encompass all screen sizes. You have to address the matrix of screen size and density.