Bad xml or android compatibility issue?

Question

I'm developing my first app on android and I think my apply meets the requirements (using only dp or sp, etc...) needed to support multiple screens.

However, it seems I'm doing something wrong. Textviews gets overlapped at the bottom of the screen.

Now...did I wrote bad xml or do I need to add different layouts for each android version, to be sure to avoid this kind of problems?

First device spec (docomo ARROWS NX F-06E) 1080×1920 px, 16,777,216 colors First device screenshot:

Second device spec (LG L-07C Optimus) 480 x 800 px, 256K colors Second device screenshot:

Here is the xml code.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/myLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@color/dark_green"
android:orientation="vertical"
 >

<ImageView
 android:id="@+id/image"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentLeft="true"
 android:layout_marginTop="5dp"
 android:src="@drawable/sakai" />

<TextView
android:id="@+id/random_field"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="false"
android:layout_alignParentRight="false"
android:layout_alignTop="@id/image"
android:layout_toLeftOf="@+id/chronometer"
android:layout_toRightOf="@id/image"
android:background="@drawable/bubble_bl"
android:text="@string/index"
android:textSize="20.5sp" />

<Chronometer android:id="@+id/chronometer"
 android:format="@string/chronometer_initial_format"
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 android:layout_alignParentRight="true"
 android:layout_marginRight="0dip"
 android:layout_weight="0.5"
 android:paddingBottom="30dip"
 android:paddingTop="30dip"
 />
 <Button
 android:layout_below="@id/image"
 android:id="@+id/askquestion"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:text="@string/ask"
 style="@style/ButtonText" 
 android:background="@drawable/btn_blue_states" 
 />
 <Button
  android:layout_below="@id/askquestion"
  android:id="@+id/answer1"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/ask" 
  style="@style/ButtonText" 
  android:background="@drawable/btn_blue_states"/>
  <Button
  android:layout_below="@id/answer1"
  android:id="@+id/answer2"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/ask" 
  style="@style/ButtonText" 
  android:background="@drawable/btn_blue_states"/>
  <Button
  android:id="@+id/answer3"
  android:layout_below="@id/answer2"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/ask"
  style="@style/ButtonText" 
  android:background="@drawable/btn_blue_states" />
  <Button
  android:id="@+id/answer4"
  android:layout_below="@id/answer3"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:text="@string/ask" 
  style="@style/ButtonText" 
  android:background="@drawable/btn_blue_states"/>
  <TextView
  android:id="@+id/score_field"
  android:layout_below="@id/answer4"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_marginBottom="5dip"
  android:gravity="center"
  android:text="@string/score"
  android:textSize="24.5sp" 
  /> 
  <TextView
  android:id="@+id/performance_field"
  android:layout_below="@id/score_field"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:textSize="24.5sp" 
  />

  <LinearLayout android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical" android:layout_alignParentBottom="true"
  android:weightSum="4.0" >
<TextView
  android:id="@+id/difficult_textview"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:gravity="center"
  android:text="@string/difficulty"
  android:textSize="24.5sp" 
  />
  <LinearLayout android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:id="@+id/linearLayoutWithButtons"
  android:orientation="horizontal" 
  android:weightSum="4.0" >

  <Button
  android:id="@+id/diff1"
  style="@style/ButtonText"
  android:layout_weight="1.0"
  android:layout_height="wrap_content"
  android:background="@drawable/btn_blue_states"
  android:text="@string/one" />
      <Button
      android:id="@+id/diff2"
      style="@style/ButtonText"
      android:layout_weight="1.0"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="@drawable/btn_blue_states"
      android:text="@string/two" />
      <Button
      android:id="@+id/diff3"
      style="@style/ButtonText"
      android:layout_weight="1.0"
      android:layout_height="wrap_content"
      android:background="@drawable/btn_blue_states"
      android:text="@string/three" />
      <Button
      android:id="@+id/diff4"
      style="@style/ButtonText"
      android:layout_weight="1.0"
      android:layout_height="wrap_content"
      android:background="@drawable/btn_blue_states"
      android:text="@string/four" />

  </LinearLayout>

  </LinearLayout>

Answer 1

It's a simple matter of aspect ratios:

• 1080x1920 is 16:9
• 480x800 is 5:3

So the higher resolution screen is a longer (taller) rectangle. Your layout is designed well such that part of the layout will hang to the bottom and another part to the top, but you designed it with the taller screen in mind and so things are running together on the smaller screen. You have one of two options:

1. Redesign the layout to fit properly on the shorter screen, in which case on the taller screen it will just stretch to show more extra space between the top and bottom sections.
2. Use resource qualifiers to create two different layouts for screens based on their height. This level of effort only makes sense if you are trying to achieve a more pixel-perfect look regardless of the device's screen aspect.