Develop Reference

Android- The background is longer in hdpi screen

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.

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>

Different color names with same color values in some devices

I have complaint from my user:
"When input text in MultiAutoCompleteTextView control -> color of text and background are same and I cannot read text!"
Actually I'm using colors provided from device.
Here is my xml:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#android:drawable/title_bar"
android:id="#+id/title_layout" android:padding="5dp">
<TextView
android:id="#+id/tv_label"
android:layout_width="match_parent" android:layout_height="wrap_content"
android:paddingLeft="5dp" android:layout_toLeftOf="#+id/btn_send"
android:textColor="#android:color/primary_text_light" android:textStyle="bold"
android:text="#string/_Find" android:layout_alignBaseline="#+id/btn_send" />
<Button
android:id="#+id/btn_send" android:text="#string/Search"
android:layout_height="wrap_content" android:layout_width="wrap_content"
android:layout_alignParentRight="true"/>
</RelativeLayout>
<MultiAutoCompleteTextView
android:id="#+id/search_city"
android:layout_width="fill_parent" android:layout_height="wrap_content"
android:layout_marginTop="3dp" android:layout_below="#+id/title_layout"
android:completionThreshold="1"
android:hint="#string/CityResort"
android:imeOptions="actionNext"
android:nextFocusRight="#+id/search_address"
android:drawableRight="#android:drawable/ic_input_delete"
android:singleLine="true"
android:text=""
>
<requestFocus />
</MultiAutoCompleteTextView>
<MultiAutoCompleteTextView
android:id="#+id/search_address"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/search_city"
android:layout_alignParentLeft="true"
android:completionThreshold="1"
android:hint="#string/adres_or_poi_name"
android:imeOptions="actionDone"
android:paddingTop="10dp"
android:drawableRight="#android:drawable/ic_input_delete"
android:singleLine="true"
android:text=""
/>
<FrameLayout
android:layout_width="fill_parent" android:layout_height="fill_parent"
android:layout_alignParentBottom="true" />

The problem could be because of the different theme colors.
For eg. my motorola defy has the black theme therefore if you set white or black text on different native widgets, the background could be an unexpected one(like black and you set the text color to black) and the text can't be readable..
Try to set the theme of your application and maybe this will fix your problem.

how to accomplish this layout in android

In my android app I have a login screen. A graphic designer has given me this template
The closest I was able to get was this
I used a 9.png (temporarily the same as i use for my buttons)
Any ideas how to pull this off with a combinations of layouts and 9.png files ? I don't want to use a static background image because we want to support all screen sizes...
EDIT : I ended up using two different nine-patch files as the login part also needed to be extendable (the string in the button can vary in length according to phone locale). To put them together i used a relativelayout. I am pretty close to what I wanted to do :
for those interested, here the layout i used (i think i could be simplified) :
<?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:paddingLeft="15dp" android:paddingRight="15dp"
android:background="#ffffffff" android:gravity="center"
android:orientation="vertical">
<LinearLayout android:id="#+id/login_field_container_top"
android:orientation="vertical" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:padding="5dp"
android:layout_centerInParent="true" android:layout_marginTop="0dp"
android:layout_marginBottom="-5dp" android:background="#drawable/login_field_container_top">
<TextView android:layout_height="wrap_content"
android:layout_width="fill_parent" android:text="#string/email" />
<EditText android:id="#+id/email" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:scrollbars="none"
android:inputType="textEmailAddress" android:singleLine="true"
android:maxLength="255" />
<TextView android:layout_height="wrap_content"
android:layout_width="fill_parent" android:text="#string/password"
android:layout_margin="5dp" />
<EditText android:id="#+id/password" android:layout_width="fill_parent"
android:layout_height="wrap_content" android:scrollbars="none"
android:password="true" android:singleLine="true" />
</LinearLayout>
<RelativeLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="right">
<LinearLayout android:id="#+id/login_field_container_bottom"
android:layout_alignParentRight="true" android:orientation="vertical"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:gravity="center" android:background="#drawable/login_field_container_bottom">
<LinearLayout android:layout_width="wrap_content"
android:layout_height="wrap_content" android:padding="1dp"
android:layout_margin="1dp" android:layout_gravity="center"
android:gravity="center" android:background="#drawable/small_button_holder">
<Button android:id="#+id/login_button" android:text="#string/login"
android:layout_margin="0dp" android:layout_width="wrap_content"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
<LinearLayout android:orientation="horizontal"
android:layout_width="wrap_content" android:layout_height="wrap_content"
android:paddingBottom="10dp" android:layout_toLeftOf="#id/login_field_container_bottom"
android:layout_alignBottom="#id/login_field_container_bottom">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="#string/notamember"
style="#style/Subtitle" />
<Button android:id="#+id/register" android:text="#string/register"
android:layout_width="wrap_content" android:layout_height="wrap_content" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
The only part I am not happy about is I had to add padding to align the left and right button

Have your designer cut you a nine-patch with the login tab as part of the non stretched area, but still part of the content area. Stretch that across the whole screen, and then just position the buttons relative to the parent.
9-patch
*********************
_____________________
/ \
* | | X
* | | X
* \_______________ |
* | |
* |_____|
XXXXXXXXXXXX
* = content area
X = stretchable area

I would Like to make this screen resolution good for all size of screen what i should change

I have few screen i my app and i try to make them good for all size of screen but no successful so i attach the screen and hope for help.
what i would like to get in this screen is:
1.the widget43 to be on top of the screen
2.the widget49 in the middle of the screen
3.the widget47 the problem one in the bottom of the screen even if the widget49 don't take all the space.
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:id="#+id/widget42"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
>
<RelativeLayout
android:id="#+id/widget43"
android:layout_width="fill_parent"
android:layout_height="34px"
android:background="#color/blue"
>
<TextView
android:id="#+id/convertedTitleTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="TextView"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true"
>
</TextView>
<Button
android:id="#+id/convertedBackButton"
android:layout_width="wrap_content"
android:layout_height="32px"
android:layout_alignParentBottom="true"
android:layout_alignParentLeft="true"
android:onClick="backButtonOnClick"
android:text="Back" android:typeface="monospace" android:textColor="#color/white" android:textColorHint="#color/blue" android:background="#color/blue">
</Button>
<Button
android:id="#+id/convertedCancelButton"
android:layout_width="wrap_content"
android:layout_height="32px"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:onClick="cancelButtonOnClick"
android:text="Cancel" android:background="#color/blue" android:textColor="#color/white">
</Button>
</RelativeLayout>
<RelativeLayout
android:id="#+id/widget49"
android:layout_width="fill_parent" android:layout_gravity="bottom" android:layout_height="310dip">
<ListView
android:layout_width="fill_parent"
android:layout_alignParentTop="true"
android:id="#+id/convertedListView" android:hapticFeedbackEnabled="true"
android:layout_below="#+id/widget47" android:layout_above="#+id/widget49" android:layout_alignBottom="#+id/widget43" android:layout_height="match_parent">
</ListView>
</RelativeLayout>
<RelativeLayout android:id="#+id/widget47" android:background="#color/blue" android:layout_width="match_parent" android:layout_height="wrap_content">
<TextView android:layout_centerVertical="true" android:layout_height="wrap_content" android:layout_width="wrap_content" android:layout_centerHorizontal="true" android:id="#+id/countConvertedTextView" android:text="TextView"></TextView>
</RelativeLayout>
</LinearLayout>
thanks for helping!!!

what bad is going on with different screen size? better to put different size images in different drawable folders as i mentioned below.
drawable
drawable-hdpi
drawable-ldpi
drawable-mdpi

Do one thing...add this property in the relative layout which has id of widget47
android:layout_below="#+id/widget49"
So your relative layout will look like
<RelativeLayout android:id="#+id/widget47"
android:layout_below="#+id/widget49" android:background="#color/blue"
android:layout_width="fill_parent" android:layout_height="wrap_content">

Android relative layout placement problems

I have been having problems creating a relative layout in XML for a list item to be used for a series of items in a ListView. I have tried for hours and am tearing my hair out trying to get it to look how I want but cannot get everything to appear in the correct spot and not overlap or mis-align. I can get the first image and next two textviews in place but cannot get the last textview and imageview.
I have attached a wireframe style image of how I am trying for it to look and was wondering if someone could help me out?
The ImageView on the right is a set icon of the full height of the row with padding around it?
The two TextViews take up the majority of the width. The Address textview has the possibility of the text being long so it may need to get truncated if it runs out of space, or ideally have the font size shrink?
The next TextView will just hold a small string of max 5 characters.
The last ImageView is a small arrow to imply that this list item is clickable for more infomation. It needs to be centred like shown.
I would like if the icon, last textview, and last image always be in the same place/alignment down the list.
If someone could offer some assistance on this I would be so grateful.
Cheers guys

For anyone interested I managed to get this working. I know how much of a pain it is to go searching for an answer to a problem and it was never completely resolved.
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/RelativeLayout"
android:layout_width="fill_parent"
android:layout_height="?android:attr/listPreferredItemHeight"
android:padding="6dip">
<ImageView
android:id="#+id/Icon"
android:layout_margin="5dip"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerVertical="true" />
<TextView
android:id="#+id/topLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="20dip"
android:text="Name" />
<TextView
android:id="#+id/bottomLine"
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:lines="1"
android:layout_toRightOf="#+id/Icon"
android:layout_below="#+id/topLine"
android:layout_toLeftOf="#+id/distance"
android:textColor="#color/blacktext"
android:textSize="15dip"
android:text="Address" />
<TextView
android:id="#+id/distance"
android:layout_height="wrap_content"
android:layout_toLeftOf="#+id/arrow"
android:layout_centerVertical="true"
android:layout_width="wrap_content"
android:lines="1"
android:textColor="#color/blacktext"
android:textSize="12dip"
android:text="100m" />
<ImageView
android:id="#+id/arrow"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
android:layout_margin="5dip"
android:layout_alignParentRight="true"
android:layout_centerVertical="true"
android:src="#drawable/redarrow"/>
</RelativeLayout>

I've done something similar (except the image on left)
It might help you:
<?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:gravity="center_vertical"
android:minHeight="?android:attr/listPreferredItemHeight"
android:orientation="vertical">
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/TextView01"
android:id="#+id/LinearLayout01"
android:gravity="center_vertical"
android:orientation="horizontal">
<LinearLayout
android:layout_width="0dip"
android:layout_weight="1"
android:paddingRight="8dip"
android:layout_height="wrap_content"
android:id="#+id/LinearLayout01"
android:orientation="vertical">
<TextView
android:text="#string/Birthday"
android:id="#+id/txtTitlevalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="1"
android:textAppearance="?android:attr/textAppearanceLarge"></TextView>
<TextView
android:text="1960-01-01"
android:id="#+id/txtSubvalue"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="-4dip"
android:singleLine="true"
android:ellipsize="end"
android:layout_weight="10"
android:textAppearance="?android:attr/textAppearanceSmall"></TextView>
</LinearLayout>
<TextView
android:text="2"
android:id="#+id/txtNumber"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:textStyle="bold"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
<TextView
android:text="weeks"
android:id="#+id/txtUnit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="10dip"
android:layout_gravity="center_vertical|right"></TextView>
</LinearLayout>
<!-- <View
android:background="#drawable/black_white_gradient"
android:layout_width="fill_parent"
android:layout_height="1dp"
android:layout_marginTop="2dip"
android:layout_marginBottom="2dip"
android:clickable="true"
android:focusable="true"
android:layout_below="#+id/LinearLayout01" /> -->
</LinearLayout>