I'm trying to add an icon to a switch control via thumbIcon, but I can't find a way to resize the icon. I'm trying to learn about this on this Page but I haven't been able to.
If I use the drawable without a selector, the icon displays the correct size, but if I use the drawable with the selector, the icon size becomes large, larger than 16dp and unsightly. Is there a way to change the icon size with the drawable mode selector? or can this be done in some way? I want when the switch is in the unchecked position it shows a different icon than the checked position with the right size or fit.
Material Switch
<com.google.android.material.materialswitch.MaterialSwitch
android:id="#+id/SFilter_WorldWideValue"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="10dp"
android:checked="true"
android:fontFamily="#font/roboto_medium"
android:text="#string/search"
android:textAllCaps="true"
android:textColor="#color/Text_Base_White"
android:textIsSelectable="false"
android:textSize="16sp"
app:thumbIcon="#drawable/icon_check" --> **Normal Size**
app:thumbIcon="#drawable/default_switch_icon" --> **Size is not normal**
tools:ignore="TouchTargetSizeCheck" />
style.xml
<style name="Theme.Default" parent="Theme.Material3.Light.NoActionBar">
...
<item name="materialSwitchStyle">#style/Switch.Default</item>
</style>
<style name="Switch.Default" parent="Widget.Material3.CompoundButton.MaterialSwitch">
<item name="thumbIcon">#drawable/default_switch_icon</item>
<item name="checkedIconSize">16dp</item> // Not working
<item name="selectorSize">16dp</item> // Not working
<item name="iconSize">16dp</item> // Not working
<item name="drawableSize">16dp</item> // Not working
<item name="itemIconSize">16dp</item> // Not working
<item name="maxImageSize">16dp</item> // Not working
<item name="materialThemeOverlay">#style/Switch.Colors.Default</item>
</style>
<style name="Switch.Colors.Default" parent="">
...
...
</style>
drawable/default_switch_icon.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto">
<item
android:state_checked="true"
android:drawable="#drawable/icon_check"/>
<item
android:state_checked="false"
android:drawable="#drawable/icon_close"/>
</selector>
You can use a layer-list in your selector :
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- State Checked -->
<item android:state_checked="true">
<layer-list>
<item android:drawable="#drawable/ic_check"
android:height="16dp"
android:width="16dp"
android:gravity="center"/>
</layer-list>
</item>
<!-- State Unchecked -->
<item android:drawable="#color/transparent" />
</selector>
I had to set the gravity to center or the icon was not centered in the thumb.
Related
Reference: How to specify background color in Color State List Resources?
I have followed the popular answer in the link above.
I have the following drawable;
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:drawable="#color/KeyActionPrimary"/> <!-- enabled -->
<item android:state_enabled="false"
android:drawable="#color/KeyActionButtonDeactivated"/> <!-- disabled -->
<item android:state_pressed="true"
android:drawable="#color/KeyActionPrimary"/> <!-- pressed -->
<item android:state_focused="true"
android:drawable="#color/KeyActionPrimary"/> <!-- focused -->
<item android:drawable="#color/KeyActionPrimary"/> <!-- default -->
</selector>
I understand that it will always follow order of precedence and therefore in the current order only activated and deactivated likely to be triggered. Currently however I am not getting any results at all
My button;
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:background="#drawable/state_controlled_key_action_button"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
The button comes out as white which in my material theme is the ColorPrimary attribute
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base application theme. -->
<style name="Theme.Home" parent="Theme.MaterialComponents">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/Primary</item>
<item name="colorPrimaryVariant">#color/PrimaryVariant</item>
<item name="colorSecondary">#color/Secondary</item>
<item name="colorSecondaryVariant">#color/SecondaryVariant</item>
<!--colorBackground appears behind scrollable content and is used for the default window-->
<!--background. colorSurface is mapped to the surface of components such as cards, sheets-->
<!--and menus. colorError is used to indicate an error state for components such as-->
<!--text fields.-->
<item name="android:colorBackground">#color/Background</item>
<item name="colorSurface">#color/Surface</item>
<item name="colorError">#color/Error</item>
<!--"On" colors define how text, icons and strokes are colored in relation to the surface-->
<!--on which they appear.-->
<item name="colorOnPrimary">#color/ColorOnPrimary</item>
<item name="colorOnSecondary">#color/ColorOnSecondary</item>
<item name="colorOnBackground">#color/ColorOnBackground</item>
<item name="colorOnSurface">#color/ColorOnSurface</item>
<item name="colorOnError">#color/ColorOnError</item>
<item name="android:fontFamily">#font/atma_medium</item>
<item name="android:textColor">#color/PrimaryTextColor</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">#color/StatusBar</item>
<!-- Customize your theme here. -->
<item name="actionBarSize">36dip</item>
</style>
</resources>
Firstly I am assuming that a theme covers the entire app but if you explicitly specify a background to a specific button it should override the theme value, please correct me if I am wrong.
I started this journey with a colorstatelist under res/colors. Read the link at the top which confirmed you need to use drawable. As I already had a color state list initially followed the advice of the answer which had 0 votes...
shape
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
<solid android:color="#color/primary_button_color" />
<stroke android:width="#dimen/btn_stroke" android:color="#color/primary_button_stroke_color"/>
<corners android:radius="#dimen/btn_radius"/>
</shape>
colorstatelist
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_enabled="false"
android:color="#color/PrimaryButtonDeactivated"/> <!-- pressed -->
<item android:state_pressed="true"
android:color="#color/Primary"/> <!-- pressed -->
<item android:state_focused="true"
android:color="#color/Primary"/> <!-- focused -->
<item android:color="#color/Primary"/> <!-- default -->
</selector>
Neither of these approaches is amending my button color. I am still always seeing a white button. I purposely chose horrid colors to ensure the change was obvious
What am I doing wrong? What else do you need to see?
UPDATE...........
Following discussion with #rcs I used my original colorstatelist from res/color with the backgroundtint property on the button and it works as intended
My final code:
For each button that requires a different style i have a button color or text color file in res/colors as per below
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:color="#color/KeyActionColorOnPrimary"/>
<item android:state_enabled="true"
android:color="#color/KeyActionPrimary"/>
<item android:state_enabled="false"
android:color="#color/lime"/>
<item android:state_focused="true"
android:color="#color/KeyActionPrimary"/>
<item android:color="#color/KeyActionPrimary"/>
</selector>
Then within my button xml
android:backgroundTint="#color/key_action_button_color" // for button color
android:textColor="#color/key_action_button_text_color" // for text color
e.g.
<Button
android:id="#+id/buttonSTART"
android:layout_width="#dimen/btn_width"
android:layout_height="#dimen/btn_height"
android:layout_marginStart="4dp"
android:layout_marginEnd="4dp"
android:layout_marginBottom="16dp"
android:backgroundTint="#color/key_action_button_color"
android:padding="#dimen/btn_padding"
android:text="#string/btn_start"
android:textColor="#color/key_action_button_text_color"
app:autoSizeTextType="uniform"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/btnSCORES"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent" />
This works with no additional styles. I can keep my material design theme without the button style being set to apt compat style. I am only using the above attributes in the layout xml for the button i want to have these styles
Since the first condition in your color_state is `android:state_enabled="true", which is always the case, thereby resulting in the same color. Get rid of it to notice the color changes
Refer the official docs for more info and try to use a color file resource instead of drawable as the docs says,
ColorStateLists are created from XML resource files defined in the "color" subdirectory directory of an application's resource directory
Edit:
As mentioned in this answer, applying the colorstate as a style to the Button tag should solve the issue
create a new style
<style name="AppTheme.CustomButtonStyle" parent="#style/Widget.AppCompat.Button.Colored">
<item name="android:backgroundTint">#color/state_controlled_key_action_button</item>
</style>
Activity
<Button
android:id="#+id/your_button_id"
style="#style/AppTheme.CustomButtonStyle"/>
I can't change inactive color on my bottom navigation
and this my xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/home_item"
android:icon="#drawable/ic_home"
android:color="#FFFFFF"
android:tint="#FFFFFF"
android:backgroundTint="#FFFFFF"
android:title="Home"
/>
<item
android:id="#+id/setting_item"
android:icon="#drawable/ic_setting"
android:color="#FFFFFF"
android:tint="#FFFFFF"
android:backgroundTint="#FFFFFF"
android:title="Setting"
/>
and this my java
bottomBar.getBar().setBackgroundColor(getResources().getColor(R.color.bottom_tabs));
bottomBar.setActiveTabColor("#FFFFFE");
anyone can help?
If you are using the BottomNavigationView, the solution could be easy.
You just need to create a selector as a ColorStateList, then assign the selector to the "itemIconTint" attribute of the BottomNavigationView.
For example:
Create file inside drawable
bottom_nav_icon_color_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="#android:color/white" />
<item android:state_pressed="true" android:state_enabled="true" android:color="#android:color/white" />
<item android:color="#color/InactiveBottomNavIconColor" />
</selector>
BotttomNavigationview.xml
<android.support.design.widget.BottomNavigationView
android:id="#+id/bottomNavMainMenu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
app:itemBackground="#color/BottomNavBarColor"
app:itemIconTint="#drawable/bottom_nav_icon_color_selector"
app:itemTextColor="#drawable/bottom_nav_icon_color_selector"
app:menu="#menu/bottom_navigation_menu" />
Chrislis answer is a good start. However I like to solve this problem via styling and theming. I also used the new material BottomNavigationView for this example.
Create a new file under the color folder, for example: bottom_nav_item_color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/item_color_active" android:state_checked="true"/>
<item android:color="#color/item_color_inactive"/>
</selector>
Add this line to your base theme located in themes.xml
<item name="bottomNavigationStyle">#style/BottomNavigationViewStyle</item>
Add this code to styles.xml
<style name="BottomNavigationViewStyle" parent="Widget.MaterialComponents.BottomNavigationView.Colored">
<item name="android:background">#color/my_background_color</item>
<item name="itemTextColor">#color/bottom_nav_item_color</item>
<item name="itemIconTint">#color/bottom_nav_item_color</item>
</style>
Now the BottomNavigationView should be styled correctly
Example layout file
<com.google.android.material.bottomnavigation.BottomNavigationView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schema.android.com/apk/res/res-auto"
android:id="#+id/navigation"
android:layout_width="match_parent"
android:layout_height="56dp"
android:layout_gravity="start"
app:menu="#menu/my_navigation_items" />
I've sligthly edited #Wirling answer to match Android Studio 4.2 Canary 16.
You just have to define your active/inactive colors under the color folder, for example bottom_nav_item.color.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/item_color_active" android:state_checked="true"/>
<item android:color="#color/item_color_inactive"/>
</selector>
Then, in your BottomNavigationView just use previous created selector like this
<?xml version="1.0" encoding="utf-8"?>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorPrimary"
app:itemIconTint="#color/bottom_nav_item_color"
app:itemTextColor="#color/bottom_nav_item_color"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="parent"
app:menu="#menu/bottom_nav_menu" />
So its super simple. You have to create your selector in new .xml file and then use it for your BottomNavigationView in
app:itemIconTint="#color/bottom_nav_item_color"
app:itemTextColor="#color/bottom_nav_item_color"
Bottom Navigation select text and icon Color
first bottom navigation home layout activity
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="#+id/bottom_navigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="#color/colorAccent"
android:theme="#style/ThemeOverlay.BottomNavView"
app:itemIconTint="#drawable/icon_color_selector"
app:itemTextColor="#drawable/selector"
app:labelVisibilityMode="labeled"
app:menu="#menu/home_menu">
</com.google.android.material.bottomnavigation.BottomNavigationView>
then selector file create in drawable
item_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/bottomBarItemColor" android:state_selected="true" />
<item android:color="#color/colorDivider" android:state_selected="false" />
then create text selected color xml file in drawable
text_color_selector.xml
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#color/white" android:state_selected="true" />
<item android:color="#color/colorDivider" android:state_selected="false" />
then add style on theme xml
<style name="ThemeOverlay.BottomNavView" parent="Theme.AppCompat.Light">
<item name="colorPrimary">#color/colorWhite</item>
<item name="colorOnSurface">#color/colorDivider</item>
<item name="android:textColorSecondary">#color/colorDivider</item>
</style>
then create home menu xml file in res directory
home_menu.xml add in menu directory
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/nav_live_date"
android:icon="#drawable/icon_selector"
android:title="Live Data"
android:enabled="true"/>
<item
android:id="#+id/nav_house_details"
android:icon="#drawable/icon_selector"
android:title="House Details"
android:enabled="true"/>
<item
android:id="#+id/nav_attendance"
android:icon="#drawable/icon_selector"
android:title="Attendance"
android:enabled="true"/>
<item
android:id="#+id/nav_emp_details"
android:icon="#drawable/icon_selector"
android:title="Emp Details"
android:enabled="true"/>
End Thank you so much
<!-- Base application theme. -->
<style name="Theme.RunnerApp"
parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Primary brand color. -->
<item name="colorPrimary">#color/purple_500</item>
<item name="colorPrimaryVariant">#color/purple_700</item>
<item name="colorOnPrimary">#color/white</item
<!-- Secondary brand color. -->
<item name="colorSecondary">#color/teal_200</item>
<item name="colorSecondaryVariant">#color/teal_700</item>
<item name="colorOnSecondary">#color/white</item>
<!-- Status bar color. -->
<item name="android:statusBarColor" tools:targetApi="l">?
attr/colorPrimaryVariant</item>
<!-- Customize your theme here. -->
</style>
In most of the case...developer change there theme to NoActionBar
But instead of
Theme.MaterialComponents.DayNight.NoActionBar
They change it into
Theme.AppCompat.DayNight.NoActionBar
That causes all these colour issues
Navigation component use material design so keep this point in mind
Try below code. Hope its helpful!!!
mBottomBar = BottomBar.attach(this, savedInstanceState);
mBottomBar.setItems(R.menu.bottombar_menu);
mBottomBar.getBar().setBackgroundResource(R.color.navigationColor);
mBottomBar.setOnMenuTabClickListener(new OnMenuTabClickListener() {
Recently my ToggleButtons on an application I'm working on lost it's green light indicator. I started with the various tutorials and got together a set of 9 patch indicators to make them work correctly again. The only problem is the text now sits on top of the indicator, like so:
I would like the text on top like the old toggle buttons...is there any way to do this?
btn_toggle_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="#+android:id/background" android:drawable="#android:drawable/btn_default" />
<item android:id="#+android:id/toggle" android:drawable="#drawable/btn_toggle" />
</layer-list>
my btn_toggle.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:drawable="#drawable/btn_toggle_on" />
<item android:state_checked="false" android:drawable="#drawable/btn_toggle_off" />
</selector>
and the togglebutton tag in my activity:
<ToggleButton
android:background="#drawable/btn_toggle_bg"
style="#style/OurThemeName"
android:textOff="#string/fertilizer"
android:textOn="#string/fertilizer"
android:id="#+id/toggleFertilizer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="false">
</ToggleButton>
<ToggleButton
android:background="#drawable/btn_toggle_bg"
style="#style/OurThemeName"
android:textOff="#string/irrigation"
android:textOn="#string/irrigation"
android:id="#+id/toggleIrrigation"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:checked="false">
</ToggleButton>
almost forgot the themes.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Overwrite the ToggleButton style -->
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:textOn">On</item>
<item name="android:textOff">Off</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
<style name="OurThemeName" parent="#android:Theme.Light">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
<item name="android:textOn"></item>
<item name="android:textOff"></item>
</style>
</resources>
You need to set the Fill Area in your 9-Patch. You can add this areas including them in the right and bottom of your images using the Draw 9-patch tool. With this you are defining the area for your text label.
Check this tutorial explaining how 9-Patch works.
I'm trying to customize ToggleButton in my app. I'm setting 9-patch image as background as written here.
And then in my layout xml:
<ToggleButton
android:id="#+id/toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="#drawable/btn_toggle_bg"
android:checked="true"
android:gravity="center_horizontal|center_vertical" />
btn_toogle_bg.xml:
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
<item
android:id="#+android:id/background"
android:drawable="#android:color/transparent"/>
<item
android:id="#+android:id/toggle"
android:drawable="#drawable/btn_toggle"/>
</layer-list>
btn_toggle.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="#drawable/btn_toggle_off" android:state_checked="false"/>
<item android:drawable="#drawable/btn_toggle_on" android:state_checked="true"/>
</selector>
9-patch looks like this (btn_toggle_off):
The same image for checked state.
But when I'm applying this as background I get some unexpected top and bottom padding:
I've got the same result when applying this background to Button or using xml-drawable as background.
How to avoid unexpected padding? Help, please.
Update:
Also, when I'm adding this style to the app theme there is no padding but ToggleButton becames unclickable (doesn't change its state):
styles.xml:
<style name="Widget.Button.Toggle" parent="android:Widget">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
themes.xml:
<style name="MyThemeName" parent="#android:Theme.Black">
<item name="android:buttonStyleToggle">#style/Widget.Button.Toggle</item>
</style>
It seems that I needed to extend android:Widget.Button.Toggle style:
<style name="Widget.Button.Toggle" parent="android:Widget.Button.Toggle">
<item name="android:background">#drawable/btn_toggle_bg</item>
<item name="android:disabledAlpha">?android:attr/disabledAlpha</item>
</style>
The reason for the padding is your right black pixel that describes where the content should be placed, should be the whole length of the image from top to bottom.
try this:
I'm using spinner and want to add spinner - to change behavior depends of states(focused, pressed)
sample project is here https://github.com/vovs/spinner_issue
My code:
activity_main.xml
<Spinner
android:id="#+id/spinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_marginTop="30dp"
android:spinnerMode="dropdown"
android:dropDownSelector="#drawable/spinner_state" />
spinner_state.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_enabled="false"
android:drawable="#color/black" />
<item
android:state_pressed="true"
android:state_enabled="true"
android:drawable="#color/red" />
<item
android:state_focused="true"
android:state_enabled="true"
android:drawable="#color/red" />
<item
android:state_enabled="true"
android:drawable="#color/gray" />
</selector>
AndroidManifest:
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="16" />
So, if I run app in emulator Android 4.0.2 API 14 and try to select some item or scroll using wheel of my mouse no any effect, that I set in selector(when press or scrolling - items should be red, but it is blue - default for ICS color).
For Android 2.2 API 8 when press or scroll using wheel(in this case state is focused) color is yellow[orange](default color for Android 2.2)
How to enable selector for spinner?
also an official bug...
https://code.google.com/p/android/issues/detail?id=24922
what helps:
<resources>
<style name="Theme.MyTheme" parent="#android:style/Theme.Holo.Light">
<item name="android:dropDownListViewStyle">#style/Theme.MyListView</item>
</style>
<style name="Theme.MyListView" parent="#android:style/Widget.Holo.Light.ListView">
<item name="android:listSelector">#drawable/orange_list</item>
</style>
</resources>
good luck!
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_focused="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:state_selected="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:state_pressed="true" android:drawable="#color/lighter_gray_no_transparent" />
<item android:drawable="#android:color/transparent"/>
</selector>
<color name="lighter_gray_no_transparent">#FFDDDDDD</color>
set backgroud selector for your item view, that's all. Work for me. The color alpha value should be FF, or it will show orange background, left one color value is #FFDDDDDD, the right one is #55DDDDDD
There may be other ways but here's what I understand from using one of the Generators.
Declare your own style for the spinner in your res/values/styles.xml pointing to your drawable.
<style name="myCustomSpinner" parent="android:Widget.Holo.Light.Spinner">
<item name="android:background">#drawable/spinner_state</item>
</style>
Create res/values/themes.xml and declare your own theme that inherits from the current theme. Within this theme, add an item for each attribute you're modifying and point it to your custom style from the last step. I think this could go in the styles file if you wanted, but since the generator separates them I follow suit.
<style name="myCustomTheme" parent="android:Theme.Light">
<item name="android:dropDownSpinnerStyle">#style/myCustomSpinner</item>
</style>
In your AndroidManifest, add android:theme="#style/myCustomTheme" to the opening application tag.
Your values for parent will depend on how the project is setup and I think this will style of the spinners in your project and not just one. Try it out and let me know what you get.