Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Style android spinner

Tags:

android

I'm trying to get my android app a bit more stylish and have made some progress but the spinner dropdown are giving me trouble. I've got a screenshot to show you the problem:

How do I get rid of the white background

What I want is the white box in the background to be transparent, as in the same grey overlay over the back screen as the rest of the screen outside the dropdown.

Android 4.0, API 15 if I recall correctly.

As requested here's how I do it so far. These are snippets I think are relevant but I might have missed something.

Here's the xml for spinner:

<Spinner     android:id="@+id/edit_countrySpinner"     android:layout_width="0dip"     android:layout_height="wrap_content"     android:layout_weight="1"     android:entries="@array/edit_countryArray"     android:gravity="center"     android:prompt="@string/country_prompt" /> 

In my values/style.xml. If I change the color of the background here the background in the dialog do change, but all the rest of the backgrounds as well. I haven't figure out how to jus change the background in the dropdown dialog.

<style name="appcin" parent="@android:style/Theme.NoTitleBar.Fullscreen">     <item name="android:spinnerStyle">@style/spinnerStyle</item>     <item name="android:spinnerItemStyle">@style/SpinnerItem</item>     <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item> -->     <item name="android:background">#FFFFFF</item> </style> <style name="spinnerStyle">     <item name="android:background">@drawable/pink_white_dropdown</item>     <item name="android:clickable">true</item> </style> <style name="SpinnerItem">     <item name="android:textColor">#993399</item>     <item name="android:background">@drawable/pink_white_dropdown</item>     <item name="android:maxHeight">10dip</item> </style> <style name="SpinnerDropDownItem">     <item name="android:textColor">#993399</item>     <item name="android:background">#FFFFFF</item> </style> 

I've tried adding this to the app theme but none of them made any difference, the background was still white.

<...theme....>    <item name="android:dropDownListViewStyle">@style/DropDownStyle</item>    <item name="android:dropDownSpinnerStyle">@style/DropDownStyle</item>    <item name="android:dropDownSelector">@style/DropDownStyle</item> </... theme ...> <style name="DropDownStyle">     <item name="android:background">#FFF000</item>     <item name="android:popupBackground">#FFF000</item>     <item name="android:cacheColorHint">#FFF000</item> </style> 

In drawable/pink_white_dropdown, just showing the same image for all the cases. pink_white_arrow is a 9patch image I've made. There are lots of guides, here's one I found by 30sec on google.

<selector xmlns:android="http://schemas.android.com/apk/res/android">   <item android:state_window_focused="false" android:state_enabled="true"       android:drawable="@drawable/pink_white_arrow"/>   <item android:state_window_focused="false" android:state_enabled="false"       android:drawable="@drawable/pink_white_arrow"/>   <item android:state_pressed="true"        android:drawable="@drawable/pink_white_arrow"/>   <item android:state_pressed="false"        android:drawable="@drawable/pink_white_arrow"/>   <item android:state_focused="true" android:state_enabled="true"        android:drawable="@drawable/pink_white_arrow"/>   <item android:state_enabled="true"        android:drawable="@drawable/pink_white_arrow"/>   <item android:state_focused="true"        android:drawable="@drawable/pink_white_arrow"/>   <item        android:drawable="@drawable/pink_white_arrow"/> </selector> 

Somewhere in these files I figure something should be made transparent, but I don't know where.

like image 321
dutt Avatar asked Dec 04 '12 12:12

dutt


People also ask

What is spinner in android with example?

Android Spinner is a view similar to the dropdown list which is used to select one option from the list of options. It provides an easy way to select one item from the list of items and it shows a dropdown list of all values when we click on it.

What is a spinner in android Studio?

Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one. You can add a spinner to your layout with the Spinner object.


2 Answers

Remove the SpinnerStyle background attribute.

Remove this:

<style name="spinnerStyle">     <item name="android:background">@drawable/whitish_rectangle</item> </style> 

which is what draws the background white rectangle.

Building on the code in your question, here is a basic example on how you can style your Spinner:

The styles.xml file sets styles for the SpinnerItem and SpinnerDropDownItem:

<resources>     <style name="customtheme" parent="@android:style/Theme.Light">         <item name="android:spinnerItemStyle">@style/SpinnerItem</item>         <item name="android:spinnerDropDownItemStyle">@style/SpinnerDropDownItem</item>     </style>     <style name="SpinnerItem">         <item name="android:textColor">#993399</item>         <item name="android:background">@drawable/my_rectangle</item>     </style>     <style name="SpinnerDropDownItem">         <item name="android:textColor">#993399</item>         <item name="android:background">@drawable/my_rectangle</item>     </style> </resources> 

For testing, I've created a bright-colored drawable shape, called my_rectangle.xml. Replace this with your own drawable:

<?xml version="1.0" encoding="UTF-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" >     <solid android:color="#ff0000" />     <stroke         android:width="1dp"         android:color="#888888" /> </shape> 

Add the Spinner to the Activity's layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:layout_width="match_parent"     android:layout_height="match_parent"      android:padding="40dip">     <Spinner         android:id="@+id/edit_countrySpinner"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:entries="@array/location_names"/> </LinearLayout> 

This produces:

enter image description here

with no white square in the background.

like image 102
onosendai Avatar answered Sep 23 '22 02:09

onosendai


add

<item name="android:popupBackground">@null</item> 

to your spinner style.

like image 35
faylon Avatar answered Sep 23 '22 02:09

faylon