Android- The background is longer in hdpi screen

Question

I have a trouble issue with the attribute background in android. I want to design a layout which runs find on mdpi and hdpi screen density. I have 2 background image as below:

• the background for mdpi at 800x480 resolution:
• The background for hdpi at 800x480 resolution:

I use draw9patch to define the content padding as below:

 ![enter image description here][3]

When I set these images at background of my layout, they worked find on mdpi screen but didn't on hdpi. The background on hdpi longer than what it was designed. Here are the screenshots:

• It's fine on mdpi screen:

  

• It's longer (stretch) on hdpi screen:

  

Here are my code:

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ui_win_background"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/activity_win_textview_congratulationText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/activity_horizontal_marginXExtraWide"
            android:gravity="center"
            android:text="CONGRATULATION!\nYOU WON!!!"
            android:textColor="#FFF"
            android:textSize="@dimen/textSize_XLarge" />

        <TextView
            android:id="@+id/activity_win_textview_percent"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/activity_horizontal_marginExtraWide"
            android:gravity="center"
            android:text="50%"
            android:textColor="#BD1142"
            android:textSize="72sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/activity_win_textview_prizeName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:gravity="center"
            android:text="Combo Starbucks"
            android:textColor="@color/black"
            android:textSize="@dimen/textSize_XLarge"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/activity_win_textview_prizeCode"
            android:layout_width="fill_parent"
            android:layout_height="50dp"
            android:layout_margin="@dimen/activity_vertical_margin"
            android:background="@drawable/statelist_textview_white_roundborder"
            android:gravity="center"
            android:paddingLeft="@dimen/activity_horizontal_margin"
            android:paddingRight="@dimen/activity_horizontal_margin"
            android:scrollHorizontally="true"
            android:singleLine="true"
            android:text="#fsdjflsejp34230sfmwr3"
            android:textSize="@dimen/textSize_large"
            android:textStyle="italic" />

        <TextView
            android:id="@+id/activity_win_textview_prizeName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/activity_vertical_marginWide"
            android:gravity="center"
            android:text="This screen closes in"
            android:textColor="@color/black"
            android:textSize="@dimen/textSize_large" />

        <TextView
            android:id="@+id/activity_win_textview_countDown"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/activity_horizontal_margin"
            android:gravity="center"
            android:text="00:20:40"
            android:textColor="#BD1142"
            android:textSize="@dimen/textSize_large"
            android:textStyle="bold" />
    </LinearLayout>

</LinearLayout>

Please take a look and help me to resolve this issue.

Thanks.

Answer 1

Don't use backgrounds. Use ImageView (with RelativeLayout) and set the ScaleType property of the image view as you like. You can set a scale type that will keep the aspect ratio of your image. Also, please note, in cases where you don't want the image to scale, 9patch is useless. The all purpose of 9patch is to let you control how the system scales your image (mostly used for buttons and backgrounds of ui controls).

Your layout (removed some of the elements):

    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <RelativeLayout
         android:layout_width="wrap_content"
         android:layout_height="wrap_content">
       <ImageView
          android:layout_width="fill_parent"
          android:layout_height="fill_parent"
          android:scale_type="centerInside" //Do whatever scale type you like
          android:src="background image goes here"
          />
       <LinearLayout
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"               
           android:orientation="vertical" >

           <TextView
               android:id="@+id/activity_win_textview_congratulationText"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_gravity="center_horizontal"
               android:layout_marginTop="@dimen/activity_horizontal_marginXExtraWide"
               android:gravity="center"
               android:text="CONGRATULATION!\nYOU WON!!!"
               android:textColor="#FFF"
               android:textSize="@dimen/textSize_XLarge" />

       </LinearLayout>
     </RelativeLayout>
</LinearLayout>