Develop Reference

9Patch content area error

It seems my content area doesn't match what the 9patch file says it should be
Heres my 9patch file.
and here is an image of how it looks with an item in it, but the text is getting cut off prematurely, it should be "Varenr." I don't understand why there is such a big white space instead of text ??
and here is the xml layout of the spinner:
<Spinner
android:id="#+id/sortSpinner"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="35dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/spinner_background"
android:drawSelectorOnTop="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:prompt="#string/sort" />
And of the spinner item
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#android:id/text1"
style="?android:attr/spinnerItemStyle"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:ellipsize="none"
android:gravity="center"
android:singleLine="true" />
Thanks in advance for help.
And for closure, the 9patch in question:
Edit:
The whole line where the spinner is located:
<LinearLayout
android:id="#+id/headerLabel"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:background="#color/transparent"
android:orientation="horizontal"
android:weightSum="11">
<LinearLayout
android:layout_width="0dp"
android:layout_weight="3"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#+id/sortAmountLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="10dip"
android:singleLine="false"
android:textColor="#color/solid_red"
android:textSize="15dp" />
<TextView
android:id="#+id/sortLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="5dip"
android:text="Produkter"
android:singleLine="true"
android:textColor="#color/solid_red"
android:textSize="15dp" />
</LinearLayout>
<Button
android:id="#+id/filterBtn"
android:layout_width="0dp"
android:layout_height="35dp"
android:layout_marginBottom="10dp"
android:layout_marginLeft="5dp"
android:layout_marginRight="15dp"
android:layout_marginTop="10dp"
android:layout_weight="4"
android:background="#drawable/button_background_red"
android:clickable="true"
android:singleLine="true"
android:onClick="setFilterList"
android:text="Filtrér"
android:textColor="#color/solid_white"
android:textSize="15dp"
android:textStyle="bold" />
<Spinner
android:id="#+id/sortSpinner"
android:layout_width="0dp"
android:layout_weight="4"
android:layout_height="35dp"
android:paddingRight="30dp"
android:layout_marginBottom="10dp"
android:layout_marginTop="10dp"
android:background="#drawable/spinner_background"
android:drawSelectorOnTop="true"
android:focusable="false"
android:focusableInTouchMode="false"
android:prompt="#string/sort" />
</LinearLayout>

Now, this is how I remade it:
Which gives this result:
Make sure the extension is .9.png
[EDIT]
This is the result when applied to a TextView:
The screen is an old ldpi device (240x320 #120 dpi)
This is how I applied it:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/stripes_vert_4"
>
<!-- ... -->
<TextView
android:id="#+id/txtTitle3"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:layout_alignParentBottom="true"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
android:text="Lorem ipsum dolor sit amet"
android:background="#drawable/spinner_drawable"
/>
</RelativeLayout>
[EDIT 2]
As per the OP requirement, I switched the TextView to a Spinner:
Result:
By using this code:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#drawable/stripes_vert_4"
>
<!-- ... -->
<Spinner
android:id="#+id/spnElements"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:entries="#array/prefs_search_modes"
android:layout_alignParentBottom="true"
android:textColor="#android:color/black"
android:textSize="16sp"
android:textStyle="bold"
android:background="#drawable/spinner_drawable"
/>
</RelativeLayout>
Which implies you have an arrays.xml file in your value folder.
Mine is:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Settings -->
<!-- Word search mode -->
<string-array name="prefs_search_modes">
<item>*b* (Contains "b")</item>
<item>Ab* (Starts with "Ab")</item>
<item>*bc (Ends in "bc")</item>
<item>Abc (Exact match)</item>
</string-array>
</resources>
[EDIT3]
In the last comments the OP is asking for (75% white space + the rest of the width left for the spinner) something like this:
ARE YOU SURE?
The running screen is low res (ldpi).
But next to it, in the graphical editor you can see another device (HTC Desire Bravo) screen which is hdpi.
And it shows the same "issue": 1/4 screen width.
So, the stretchable part of the 9 png background (which contains the text) is squeezed away and only the unsqueezable part (the arrow) stays.
[EDIT4]
After playing with the 9 patch size, I could make part of the text become visible:
So, it seems you have to experiment with smaller sizes until you get an acceptable result.
[EDIT5]
I forgot to add the new spinner 9 patch (resized).
Here it is:
When rescaling, mind the outer border: it has to be completely transparent and the markers must be full black.

UI looks different on Samsung device

I have an issue where UI of android application looks different on my Samsung Galaxy S5 comparing to other devices such as Nexus5 or Sony Xperia or others..
I have TextViews which arranged inside a TableLayout.
Each TextView has rectangle with little stroke drawable background which is defined in separate xml.
The problem is that you can see the stroke of the left side of the rectangle but the right side seems to be hidden like it wider than the screen.
I tried to load a picture but I don't have enough reputation for this.
As I said, it only happens in my Samsung device while on other devices it looks just fine.
Please refer to the layout xml and to the background drawable xml.
Can anyone explain why this and maybe can advise for a solutions?
Here is layout xml's:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:context=".GpsRecMain"
android:background="#color/LightGrey">
<TableLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:stretchColumns="*.*" >
<TableRow
android:id="#+id/tableRow1"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvTimer"
android:layout_width="fill_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="00:00"
android:textColor="#color/YellowGreen"
android:textSize="35sp"
android:textStyle="bold" />
</TableRow>
<TableRow
android:id="#+id/tableRow2"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<TextView
android:id="#+id/tvSpeed"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="#string/NUMERIC_ZERO"
android:textColor="#color/YellowGreen"
android:textSize="40sp"
android:textStyle="bold|italic" />
<TextView
android:id="#+id/tvDistance"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="#drawable/black_text_box"
android:gravity="center"
android:text="#string/NUMERIC_ZERO"
android:textColor="#color/YellowGreen"
android:textSize="40sp"
android:textStyle="bold|italic" />
</TableRow>
</TableLayout>
background xml:
<?xml version="1.0" encoding="utf-8"?>
<corners android:radius="0dp" />
<solid android:color="#color/Black"/>
<stroke android:width="3px"
android:color="#color/YellowGreen"/>
<padding android:top="5dp"
android:bottom="5dp"/>
Thanks in advance!
Moti.

I have found the problem!!
Well, actually it's not a solution.. but the problem gone when I change the text style form italic to regular!
I still can't understand why in italic it looks different so I changed the text to normal style.

text sizes different Android phones

Since I have a Nexus 5, I'm seeing strange stuff regarding text sizes.
An example: I am creating listview items. I put a bigger text at 22sp, a smaller one at 17sp.
On my HTC One X it looks like this:
So I think "ok, that's nice!"
Then I run it on my Nexus 5:
I do not understand why this is happening? Shouldn't the 'sp' part make sure it will look ok
with the default values? I am not talking about the user increasing the font sizes in the settings, I've left everything to defaults.
Eventhough, if I would (don't hit me) use DP here to disable the font size changes for text, it will give the same result (not tested, but I am fairly certain this is the case from other tests).
What is the problem here? Is it the newer Android version, or is it the 1080p screen vs the 720p ?
Should I use different values for different DP using 'values' folder?
here is de layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp"
android:orientation="horizontal">
<LinearLayout
android:id="#+id/background"
android:layout_marginTop="10dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/image"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_margin="5dp"
android:layout_weight="2">
<ImageView
android:id="#+id/arrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true"
android:adjustViewBounds="true" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:layout_toLeftOf="#id/arrow"
android:gravity="center"
android:orientation="vertical">
<TextView
android:id="#+id/name"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:fontFamily="sans-serif-condensed"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:id="#+id/address"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:textSize="17sp" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

For instance, the default size for same SP value may vary depending on device, just to match its readability designed for the device.
The problem you got is because you have some elements sized to fixed size, post your XML code you use for the row and we can make a deep analyse.
Edit -- After xml
Well, instead of point you the wrongs, I did prefer to rebuild your layout, take a look:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="10dp"
android:orientation="horizontal" >
<com.android.volley.toolbox.NetworkImageView
android:id="#+id/image"
android:layout_width="wrap_content"
android:layout_height="match_parent" />
<TextView
android:id="#+id/name"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image"
android:layout_toLeftOf="#+id/arrow"
android:fontFamily="sans-serif-condensed"
android:textSize="22sp"
android:textStyle="bold" />
<TextView
android:id="#+id/address"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_toRightOf="#id/image"
android:layout_toLeftOf="#id/arrow"
android:layout_below="#id/name"
android:textSize="17sp" />
<ImageView
android:id="#id/arrow"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_alignParentRight="true" />
</RelativeLayout>
Your layout was too complex to a simple row... now the layout will be as tall as the TextViews needs it to be, and it is not a problem, as the user is already used with his text size.

you have to Create two different layout folder and see the result

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>

Android - LinearLayout Background "over" Views

I am trying to apply a simple gradient background to my main LinearLayout. My problem is that the background refuses to stay in the background and instead decides to also cover my views (TextViews and Buttons, in this case). What am I doing wrong/am I missing? Thanks for your help!
main layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/mainLinearLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="#drawable/bg_gradient"
android:orientation="vertical"
>
<TextView
android:id="#+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Select the PC to communicate with..." />
<TextView
android:id="#+id/textViewStatus"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Status" />
<RadioGroup
android:id="#+id/radioGroupDevices"
android:layout_width="wrap_content"
android:layout_height="wrap_content" >
</RadioGroup>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<Button
android:id="#+id/btnBack"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="<<" />
<Button
android:id="#+id/btnVolDown"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="-" />
<Button
android:id="#+id/btnPlayPause"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="|>" />
<Button
android:id="#+id/btnVolUp"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="+" />
<Button
android:id="#+id/btnNext"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text=">>" />
</LinearLayout>
</LinearLayout>
drawable/bg_gradient.xml:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<gradient android:angle="270" android:endColor="#181818" android:startColor="#616161"/>
<stroke android:width="1dp" android:color="#343434" />
</shape>
Result (Screenshot from Eclipse xml editor, but looks the same on the actual phone)
http://s14.directupload.net/images/130415/q8q6hcmn.png
As you can see, the text lines and the buttons appear to be at least partially covered by the background. I also tried to use a normal black background, but with the same result. All views appear "foggy" behind a black haze.

It seems you are developing for the android version 3 or higher...so in this versions and the versions above the theme is set such as the controls seems to be having transparent background...
try changing the controls(buttons,textviews) background to some hash color values
eg:-android:background="#ffaaff"
now you need not to change your code...give it a try as it is...
for your buttons put this in your code to make them transparent...
v.setBackgroundColor(0x0000FF00 );
hope this works for you

I do not see your buttons to be polluted by your gradient. As for the top most text - it's normal as by default TextView background is transparent, so container's bg will be seen thru it.