Style android spinner

style android spinner

Spinner Widget requires two different custom layouts, one for the view to be displayed and another for the drop down list!

In this example blog on Custom Spinner Android, we will guide you how to create a custom spinner in android studio which will have:

  1. Customized Background for Selected Item
  2. Custom Selected Item Text Color
  3. Text Color for Dropdown
  4. Background for Drop down List
  5. Spinner Animation

Link here: https://androiddvlpr.com/custom-spinner-android/


add

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

to your spinner style.


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.

Tags:

Android