How to Change the Spinner Background in Android

How to change the spinner background in Android?

You can set the spinners background color in xml like this:

android:background="YOUR_HEX_COLOR_CODE"

and if you use the drop down menu with you spinner you can set its background color like this:

android:popupBackground="YOUR_HEX_COLOR_CODE"

Change Spinner background programmatically

Taken From this answer, and something which I'm using as well:

If you're creating Spinner dynamically then use this:

// to change background of the popup list
  spinner.setPopupBackgroundResource(R.drawable.spinner_background);

// to change the `Spinner` background
  spinner.setBackgroundResource(R.drawable.your_drawable);

And here is spinner_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#ffffff" />
</shape>

Change spinner background color but keep arrow

For the record, I found an easy solution : Wrap your spinner in a relative layout and add an image :

 <RelativeLayout 
     android:layout_width="fill_parent"
     android:layout_height="wrap_content"
     android:background="@drawable/borderbottom_white"<!-- white background with bottom border -->
     android:layout_marginTop="15dp"  >
        <Spinner
        android:id="@+id/postfield_category"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:textSize="16sp"
        android:background="@null"
        android:minHeight="0dp" />
        <ImageView 
         android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:src="@drawable/arrowspinner" />
    </RelativeLayout>

How can I change spinner background color?

Couple of things need to do with customization spinner as per below :-

spinner_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>

<color android:color="@color/InputBg1" />
</item>
<item android:gravity="center_vertical|right" android:right="8dp">
<layer-list>
<item android:width="12dp" android:height="12dp"  android:gravity="center" android:bottom="10dp">
    <rotate
        android:fromDegrees="45"
        android:toDegrees="45">
        <shape android:shape="rectangle">
            <solid android:color="#ffffff" />
            <stroke android:color="#ffffff" android:width="1dp"/>
        </shape>
    </rotate>
</item>
<item android:width="20dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
    <shape android:shape="rectangle">
        <solid android:color="@color/InputBg1"/>
    </shape>
</item>
</layer-list>
</item>
</layer-list>

spinner_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="@style/spinnerItemStyle"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="#ffffff"
    android:ellipsize="marquee"
    android:textAlignment="inherit"/>

spinner_dropdown_item.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="@style/spinnerItemStyle"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:textColor="#000000"
    android:ellipsize="marquee"/>

spinner

<Spinner
android:id="@+id/spinner"
android:layout_width="100dp"
android:popupBackground="#ffffff"
android:layout_marginBottom="1dp"
android:layout_height="wrap_content"
android:textColor="#ffff"
style="@style/spinnerItemStyle"
android:background="@drawable/spinner_bg"
android:layout_marginLeft="1dp" />

style.xml

<style name="spinnerItemStyle" parent="@android:style/Widget.Holo.DropDownItem.Spinner">
    <item name="android:textColor">#000000</item>
</style>

Creating adapter for spinner

ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, R.layout.spinner_item, categories);
// Drop down layout style - list view with radio button
dataAdapter.setDropDownViewResource(R.layout.spinner_dropdown_item);

Android: Need to change the spinner background color

You can change mybg.xml as below.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item
        android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFAA00"/>
        </shape>
    </item>
    <item 
        android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#FFAA00"/>
        </shape>
    </item>
</selector>

If want to show the arrow (">"). You can change your file mybg.xml as below.
The nine-patch file can be found in /Android/android-sdks/plataforms//data/res/spinner_default_holo_light.9.png. Copy this to your drawable folder.

File res/drawable/mybg.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="transparent">
    <item
        android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="#AAFFAA00"/>
        </shape>
    </item>
    <item 
        android:state_selected="true">
        <shape android:shape="rectangle">
            <solid android:color="#AAFFAA00"/>
        </shape>
    </item>
    <item android:drawable="@drawable/spinner_default_holo_light"></item>
</layer-list>

File res/layout/activity_main

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="@string/hello_world" />

<Spinner
    android:id="@+id/spinner1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="38dp"
    android:layout_toRightOf="@+id/textView1"
    android:entries="@array/listX"/>

<Spinner
    android:id="@+id/spinner2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@+id/textView1"
    android:layout_marginTop="119dp"
    android:layout_toRightOf="@+id/textView1"
    android:entries="@array/listX"/>

<Spinner
    android:id="@+id/spinner3"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="151dp"
    android:layout_toRightOf="@+id/textView1"
    android:entries="@array/listX"/>

File MainActivity.java

import android.app.Activity;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Spinner;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final Spinner sp1, sp2, sp3;

        sp1 = (Spinner)findViewById(R.id.spinner1);
        sp2 = (Spinner)findViewById(R.id.spinner2);
        sp3 = (Spinner)findViewById(R.id.spinner3);

        Drawable d = sp1.getBackground();

        sp1.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                sp1.setBackgroundResource(R.drawable.mybg);
                sp2.setBackgroundResource(R.drawable.spinner_default_holo_light);
                sp3.setBackgroundResource(R.drawable.spinner_default_holo_light);
                return false;
            }
        });

        sp2.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                sp1.setBackgroundResource(R.drawable.spinner_default_holo_light);
                sp2.setBackgroundResource(R.drawable.mybg);
                sp3.setBackgroundResource(R.drawable.spinner_default_holo_light);
                return false;
            }
        });

        sp3.setOnTouchListener(new OnTouchListener() {

            @Override
            public boolean onTouch(View v, MotionEvent event) {
                sp1.setBackgroundResource(R.drawable.spinner_default_holo_light);
                sp2.setBackgroundResource(R.drawable.spinner_default_holo_light);
                sp3.setBackgroundResource(R.drawable.mybg);
                return false;
            }
        });

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

Change background color of the selected item in Android Spinner

You need to implement below method in your adapter class:

It will help you:

 int selectedItem = -1;

 ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list) {

   @Override
   public View getDropDownView(int position, View convertView, ViewGroup parent)
   {
       View v = null;
       v = super.getDropDownView(position, null, parent);
       // If this is the selected item position
       if (position == selectedItem) {
           v.setBackgroundColor(Color.BLUE);
       }
       else {
           // for other views
           v.setBackgroundColor(Color.WHITE);

       }
       return v;
   }
};

 dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 mySpinner.setAdapter(dataAdapter);

Now on item selected in spinner put below

   selectedItem = position;

Android spinner dropdown menu background color change

Yep, it's possible. Use android:popupBackground on the Spinner in your XML or setPopupBackgroundResource(int) in code.

---

Related Topics