I have a spinner in a toolbar at the bottom of the screen, but the arrow next to the spinner points down, which is counterintuitive. Is there any quick way to flip the arrow to point upwards instead?
If it helps, the spinner is defined as follows:
<Spinner
android:id="#+id/spinner_floors"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
And the row layout is just android.R.layout.simple_spinner_dropdown_item.
On another note, is there any way to change the font color to white without affecting the font color when the spinner is expanded?
Update
I managed to switch the color of the text using this answer. I also switched the background for this image so that now the code is
<Spinner android:id="#+id/spinner_floors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#drawable/ic_arrow_drop_up_white_24dp" />
Now it looks like this:
How do I move the button to the right?
Note: I'm using Android Marshmallow, API level 23
The default background of a spinner is a 9-patch drawable, so it can scale accordingly. If you want to invert the arrow you have to copy the drawable and invert it manually.
Here I took the background of the spinner found on Lollipop1 and flipped it vertically:
You can copy that and save it into the drawable-xxxhdpi folder as a 9-patch, i.e. with the extension .9.png (not just .png).
1 [android-sdk]/platforms/android-22/data/res/drawable-xxxhdpi/spinner_mtrl_am_alpha.9.png
Since Marshmallow, the default background is an XML drawable (selector and vector drawable). If you only want to support Android 6.0 and newer you can copy that from the Ansroid SDK and modify it such that it is vertically flipped.
You can find the drawable in the [android-sdk]/platforms/android-23/data/res/drawable/ directory. It's named spinner_background_material.xml and depends on control_background_40dp_material.xml and ic_spinner_caret.xml.
Try this
<Spinner
android:id="#+id/spinner_floors"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#android:drawable/btn_dropdown" <!-- You can use your own drawable -->
/>
Use this with your own icon for example: https://design.google.com/icons/#ic_arrow_drop_up
toolbar_spinner.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical">
<Spinner
android:id="#+id/toolbar_spinner"
style="#style/Widget.MyApp.HeaderBar.Spinner"
android:layout_width="wrap_content"
android:layout_height="match_parent"/>
</LinearLayout>
toolbar_spinner_item_actionbar.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableEnd="#drawable/ic_arrow_drop_up_black_24dp"
android:drawablePadding="8dp"
android:fontFamily="sans-serif"
android:paddingEnd="4dp"
android:paddingStart="16dp"
android:textColor="#ffffffff"
android:textSize="18sp"
android:textStyle="bold" />
</LinearLayout>
toolbar_spinner_item_dropdown.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:id="#android:id/text1"
android:layout_width="match_parent"
android:layout_height="48dp"
android:drawablePadding="8dp"
android:gravity="center_vertical|start"
android:paddingLeft="16dp"
android:paddingRight="16dp"
android:textColor="#ff333333"
android:textSize="16sp"/>
</LinearLayout>
And add this to your Styles:
<style name="Widget.MyApp.HeaderBar.Spinner" parent="Widget.AppCompat.Light.Spinner.DropDown.ActionBar">
<item name="android:background">?android:selectableItemBackground</item>
<item name="android:dropDownSelector">?android:selectableItemBackground</item>
<item name="android:divider">#null</item>
<item name="android:overlapAnchor">true</item>
</style>
Then add it in the OnCreate:
Toolbar toolbar = getActionBarToolbar();
View spinnerContainer = LayoutInflater.from(this).inflate(R.layout.toolbar_spinner,
toolbar, false);
ActionBar.LayoutParams lp = new ActionBar.LayoutParams(
ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
toolbar.addView(spinnerContainer, lp);
YourObjectSpinnerAdapter spinnerAdapter = new YourObjectSpinnerAdapter();
spinnerAdapter.addItems(getMyObjectSpinnerData());
Spinner spinner = (Spinner) spinnerContainer.findViewById(R.id.toolbar_spinner);
spinner.setAdapter(spinnerAdapter);
Taken from: https://dabx.io/2015/01/02/material-design-spinner-toolbar-style-fix/
With some changes and updating.
And here is the another method with changing the icon, thanks to Floern for suggest:
You have to create two drawable file named:
1.control_background_40dp_material.xml
2.spinner_background_material.xml
And, the first one content:
<?xml version="1.0" encoding="utf-8"?>
<ripple xmlns:android="http://schemas.android.com/apk/res/android"
android:color="#android:color/darker_gray"
android:radius="20dp" />
Second one:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
android:paddingEnd="24dp"
android:paddingLeft="0dp"
android:paddingMode="stack"
android:paddingRight="0dp"
android:paddingStart="0dp">
<item
android:width="24dp"
android:height="24dp"
android:drawable="#drawable/control_background_40dp_material"
android:gravity="end|center_vertical" />
<item
android:width="24dp"
android:height="24dp"
android:drawable="#drawable/ic_arrow_drop_up_black_24dp"
android:gravity="end|center_vertical" />
</layer-list>
That's it, just use that Spinner like this:
<Spinner
android:id="#+id/spinner_floors"
android:background="#drawable/spinner_background_material"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
There you go, have fun.
Related
I am trying to place two image buttons and some text on a single line. Here is the XML for the layout:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="28dp"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
The selector XML for each of the buttons in drawable:
button_delete.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/delete_button_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/delete_button"
android:state_focused="true" />
<item android:drawable="#drawable/delete_button" />
</selector>
button_add.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/button_add_pressed"
android:state_pressed="true" />
<item android:drawable="#drawable/button_add_normal"
android:state_focused="true" />
<item android:drawable="#drawable/button_add_normal" />
</selector>
In the builder all looks well:
But in the application the gray background is lost and the edges of the image (which are transparent) are shown, but only for the first image:
Strangely, the first image button is not recognizing the transparent background of the image. Additionally I needed to mess with the width and height of the RelativeLayout and the first ImageButton to even get it close to the right size. With the 2nd I did not have to do anything. There is nothing special with the first image.
Here are the images from the directory:
One last issue - How do you make the text wrap before the 2nd image if it is too long for the space? Right now it writes under the 2nd image before wrapping:
Here are all the delete images. Seem to have transparent backgrounds, but I am far from a Gimp expert. Also not sure if StackOverflow keeps the original..
Update
I have verified the images are transparent. The image still has the white background. I have also updated the XML to look like this:
<?xml version="1.0" encoding="utf-8"?>
<mycompany xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="5dp"
android:orientation="horizontal">
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#drawable/button_delete" />
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toEndOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
<ImageButton
android:id="#+id/sectionAdd"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:background="#drawable/button_add" />
</RelativeLayout>
<View
android:id="#+id/line"
android:layout_marginTop="8dp"
android:layout_width="match_parent"
android:layout_height="2dp"
android:background="#android:color/darker_gray" />
</LinearLayout>
</mycompany>
You should use:
<ImageButton
android:id="#+id/sectionDelete"
android:layout_width="35dp"
android:layout_height="28dp"
android:layout_alignParentLeft="true"
android:src="#drawable/button_delete"
android:background="#android:color/transparent"/>
Use "#null" like background on ImageButton:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:srcCompat="#drawable/bkash"
android:id="#+id/bid1"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:background="#null" />
You haven't included the actual PNG file you are using as an icon for your delete button (screenshot from Windows's Explorer showing this file on your disk isn't quite enough), but I am almost sure that this file lacks an alpha channel. Instead, there is a white color on every pixel you'd like to be set with zero alpha channel value.
Opening your graphic in some image editor and changing these white pixels to transparent will solve your problem, but as for the reason why your layout "looks different" in builder than on your device, it's because there is a default theme applied by the system to every app, you can read more about it here: https://developer.android.com/guide/topics/ui/look-and-feel/themes.html
This default, OS and device specific set of values determines things that aren't determined by app's authors.
In the case of your device, its OS determined app's background color to be gray, which wasn't the case with your builder. Your builder chose the background to be white. Your delete button's graphic never was transparent, but on the white background of your builder it looked like it was.
To make it look like on builder, you need to specifically apply the background by yourself to the root of your view. In this case, it's a LinearLayout which should look like this:
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#ffffff">
1) #DimDim had the right solution, if it didn't work, the delete button may have white background in the image, cross check with a png viewer.
2) To prevent overflow of text, try this
<TextView
android:id="#+id/header"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/sectionDelete"
android:layout_toLeftOf="#+id/sectionAdd"
android:text="test"
android:textAllCaps="true"
android:textColor="#color/navigation_bar"
android:textSize="16sp"
android:textStyle="bold" />
And put the sectionAdd Image button above this textview in the XML as this textview needs reference to the sectionAdd.
I am trying to make a list that looks like the list in the Material Design Guidelines. Google uses these round icons all over the place it seems like. I want to use a colored circle with a material design icon on it. Pretty much exactly like this image:from the guidelines page.
Do I need to create a circle drawable and then just set the icon on top of it, so I have two overlapping views? I feel like there must be a better solution than using two views for every icon.
To make the custom circle drawable:
..drawable/circle_drawable.xml
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners
android:radius="100dip"/>
<solid
android:color="#ff4CAF50" />
<stroke
android:width="2dip"
android:color="#FFF" />
<padding
android:left="6dip"
android:right="6dip"
android:top="5dip"
android:bottom="5dip" />
</shape>
To change circle_drawable color programmatically on Activity:
String hexColor = String.format("#%06X", (0xFFFFFF & intColor));
Drawable drawable = ContextCompat.getDrawable(MyActivity.this, R.drawable.circle_drawable);
drawable.setColorFilter(intColor, PorterDuff.Mode.SRC_ATOP);
layoutWithCircleDrawable.setBackground(drawable);
Then now on you layout you must assign a new background using the new circle_drawable.xml and then just set the icon on top of it.
Layout
...........
<FrameLayout
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_marginRight="20dp"
android:layout_marginTop="10dp"
android:id="#+id/layoutWithCircleDrawable"
android:layout_gravity="center_vertical"
android:background="#drawable/circle_drawable">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="#+id/imageView36"
android:src="#drawable/ic_folder"/>
</FrameLayout>
To create a circle drawable you can use this library https://github.com/hdodenhof/CircleImageView
It's very good implementation.
add this to layout file
<de.hdodenhof.circleimageview.CircleImageView
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="#+id/profile_image"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="#drawable/profile"
app:civ_border_width="2dp"
app:civ_border_color="#FF000000"/>
and for gradle dependencies
dependencies {
...
compile 'de.hdodenhof:circleimageview:2.1.0'
}
for the images you can use picasso library
Aspicas had the right answer, but I made a few changes and want to post my code just in case it helps in the future. And since I am using C# (Xamarin.Android) some methods look a little different.
My circle drawable:
<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="oval">
<solid
android:color="#33464d"/>
</shape>
My layout for the full list item. I am using vectors for icons so I have to use AppCompatImageView:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="#+id/routines_rv_item"
android:layout_width="match_parent"
android:layout_height="72dp"
android:orientation="horizontal">
<FrameLayout
android:id="#+id/icon_frame"
android:layout_width="40dp"
android:layout_height="40dp"
android:layout_gravity="top"
android:layout_margin="16dp"
android:background="#drawable/circle_drawable">
<android.support.v7.widget.AppCompatImageView
android:id="#+id/list_icon"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="8dp"
android:scaleType="fitCenter"/>
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:orientation="vertical">
<TextView
android:id="#+id/rv_main_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingBottom="2dp"
android:paddingRight="16dp"
android:textColor="#color/primary_text_default_material_light"
android:textSize="16sp" />
<TextView
android:id="#+id/rv_secondary_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:paddingRight="16dp"
android:paddingTop="2dp"
android:textColor="#color/secondary_text_default_material_light"
android:textSize="14sp" />
</LinearLayout>
</LinearLayout>
And the relevant code in my adapter where I change the color and set the icon image (note: have to pass in activity context to the adapter to access resources):
...
var vh = (ViewHolder)holder;
var drawable = ContextCompat.GetDrawable(_context, Resource.Drawable.circle_drawable);
string colorStr = _context.Resources.GetString(Resource.Color.primary).Substring(3);
drawable.SetColorFilter(Color.ParseColor("#"+colorStr), PorterDuff.Mode.SrcAtop);
vh.IconFrame.Background = drawable;
vh.ListIcon.SetImageResource(Resource.Drawable.ic_book_white_24px);
...
I have an Android app with a GridView where each item is a LinearLayout of two Buttons and two TextViews. When I set the LinearLayout's background color to white, the buttons are grey. However, if I change the background color, the surface of the buttons also get tinted with that color. How can I prevent this?
Example with strong color:
Buttons should be light gray, not reddish-gray.
Grid item layout XML:
<?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="wrap_content" android:orientation="horizontal"
android:background="#drawable/grid_cell_max">
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="+"
android:includeFontPadding="false"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:id="#+id/buttonPlus"
android:layout_gravity="center_vertical"
android:textSize="24sp"
android:gravity="center_vertical|center_horizontal" />
<Button
android:layout_width="50dp"
android:layout_height="50dp"
android:text="-"
android:textSize="24sp"
android:includeFontPadding="false"
android:paddingBottom="4dp"
android:paddingTop="4dp"
android:id="#+id/buttonMinus"
android:layout_gravity="center_vertical"
android:gravity="center_vertical|center_horizontal" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:paddingLeft="8dp"
android:paddingTop="1dp"
android:paddingBottom="2dp"
android:orientation="vertical">
<TextView
android:id="#+id/buildingTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:lines="1"
android:shadowDx="1"
android:shadowDy="1"
android:shadowRadius="2"
android:shadowColor="#android:color/darker_gray"
android:ellipsize="end"
android:textSize="15sp"
android:textStyle="bold"/>
<TextView
android:id="#+id/buildingInfo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textSize="11sp"
android:lines="2"
android:ellipsize="end"
android:lineSpacingExtra="-2dp"/>
</LinearLayout>
</LinearLayout>
drawable/grid_cell_max.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape= "rectangle" >
<solid android:color="#ffe6ffe3"/>
<stroke android:width="1dp" android:color="#c0c0c0"/>
</shape>
Unfortunately, I don't think there's an easy way to do this. The way I resolved this issue was:
Use Android holo colors generator to generate new resources:
Make sure to select the color you need for your button (under 'Theme Name')
Make sure to switch 'Colored Button' to 'Yes'
Download the archive and unpack it.
Merge only the drawable folders from the unpacked project into yours (only the button image resources and the button selector xml file - located in drawable)
Set the background of your buttons to:
android:background="#drawable/apptheme_btn_default_holo_light"
You'll now have a opaque button with the color you selected from the android holo colors generator.
If you want all your app buttons to behave the same way, you'll have to update the app theme. To do this, follow the steps above and afterwards update your 'styles.xml' file:
<style name="AppTheme" parent="android:Theme.Holo.Light">
<item name="android:buttonStyle">#style/ButtonAppTheme</item>
</style>
<style name="ButtonAppTheme" parent="android:Widget.Holo.Light.Button">
<item name="android:background">#drawable/apptheme_btn_default_holo_light</item>
</style>
Also, if you do this, you can remove the button background from xml. I couldn't find another solution if you want to keep the 'Theme.Holo.Light' app theme.
I am designing an app for multiple devices.In that I am using a imageview and using selector i am setting the background image depends on the state.I works fine for all the devices except only one 10 inch device.
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:clickable="true" >
<LinearLayout
android:layout_width="145dp"
android:layout_height="239dp"
android:layout_marginRight="6dp"
android:background="#drawable/common_selector_thumbnail_shadow_title_background"
android:gravity="center"
android:orientation="vertical"
android:paddingLeft="5dp"
android:paddingRight="5dp" >
<FrameLayout
android:layout_width="130dp"
android:layout_height="186dp"
android:layout_marginTop="5dp"
android:background="#color/RGB_100_215_216_217" >
<ImageView
android:id="#+id/seasonal_favorites_default_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="center"
android:src="#drawable/tw_noitem_movie" />
</FrameLayout>
<TextView
android:id="#+id/seasonal_favorites_list_text"
android:layout_width="140dp"
android:layout_height="43dp"
android:duplicateParentState="true"
android:ellipsize="end"
android:gravity="center_vertical"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:singleLine="true"
android:textColor="#drawable/common_selector_thumbnail_shadow_title_textcolor"
android:textSize="18dp" />
</LinearLayout>
</FrameLayout>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_focused="true" android:state_pressed="true"/>
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_pressed="true"/>
<item android:drawable="#drawable/thumbnail_title_bg_focus" android:state_focused="true"/>
<item android:drawable="#drawable/thumbnail_title_bg"/>
</selector>
Thanks in advance.
Probabilly you have to put in your manifest file: hardwareAccelerated="true"
Try that and let me know if it worked!
Use ImageButton there are two methods setBackgroundResource, setImageResource to set resources for button(which one will be pressed) and for image itself
You need to add android:clickable="true" to the LinearLayout or set a OnClickListener there. Otherwise your selector background does not get activated.
Use ImageButton instead of ImageView to get the selector work.
If you can provide the different states of the image then see this
post
Otherwise...
Use a LayerDrawable for the image source. One layer is the actual image, the other layer is a state list selector.
LayerDrawable d = new LayerDrawable(new Drawable[]{getResources().getDrawable(R.drawable.my_image), getResources().getDrawable(R.drawable.my_selector_list)});
imageView.setImageDrawable(d);
Or you can define a layer drawable XML resource and use that in your layout XML.
I'm developing an Android application and I have a problem with designing layouts:
With this layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp" >
<TextView
android:id="#+id/textUploadPhotos"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.4"
android:text="#string/layout_upload_photos"
android:textAppearance="?android:attr/textAppearanceMedium" />
<Spinner
android:id="#+id/spinUploadPhotos"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="0.7"
android:background="#drawable/spin_selector" />
</LinearLayout>
And the spin_selector.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:drawable="#drawable/select" android:state_pressed="true"/>
<item android:drawable="#drawable/select" android:state_focused="true"/>
<item android:drawable="#drawable/select"/>
</selector>
I get this:
#drawable/select is this one:
How can set spinner size to #drawable/select height?
Use 9 patch as background of your spinner. I think this will be interesting for you: http://adanware.blogspot.com/2012/03/android-custom-spinner-with-custom.html
You image seems to be the culprit. If you can't use a 9-patch png, try setting the height attribute of the spinner to a better value. Perhaps, right now, you have set it to wrap_content.
Or, may be you can try reducing the height of the image itself.