Android: Need to change the spinner background color

Question

I'm using three spinners inside of my XML file. Want to change spinner color until press the next spinner.

This is my xml I used:

<Spinner
    android:id="@+id/spinner13"
    android:drawSelectorOnTop="true"
    android:background="@drawable/mybg"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:textColor="#0000FF" />

<Spinner
    android:id="@+id/spinner23"
    android:drawSelectorOnTop="true"
    android:background="@drawable/mybg"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:textColor="#0000FF" />
<Spinner
    android:id="@+id/spinner33"
    android:drawSelectorOnTop="true"
    android:background="@drawable/mybg"
    android:layout_width="80dp"
    android:layout_height="wrap_content"
    android:textColor="#0000FF"/>

and this is mybg.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true" android:drawable="@style/AppBaseTheme.Yellow"/>
    <item android:state_selected="true" android:drawable="@style/AppBaseTheme.Yellow" />
</selector>

And Style :

<resources>
    <style name="AppBaseTheme" parent="android:Theme.Light">
    </style>
    <!-- Application theme. -->
    <style name="AppTheme" parent="AppBaseTheme">
    </style>
    <style name="AppBaseTheme.Yellow">
    <item name="android:background">#FFAA00</item>
</style> 
</resources>

Solution 1

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;
    }

}

Solution 2

Inspired by Gustavo's answer, here is my version of Spinner's background with DropDown arrow. Just the complete background, not only the arrow.

This is how it looks

Apply on spinner like

<Spinner
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:background="@drawable/spinner_bg" />

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/InputBg" />
</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="#666666" />
        <stroke android:color="#aaaaaa" android:width="1dp"/>
    </shape>
</rotate>
</item>
<item android:width="30dp" android:height="10dp" android:bottom="21dp" android:gravity="center">
<shape android:shape="rectangle">
    <solid android:color="@color/InputBg"/>
</shape>
</item>
</layer-list>
</item>
</layer-list>

@color/InputBg should be replaced by the color you want as your background.

First it fills the background with desired color. Then a child layer-list makes a square and rotates it by 45 degrees and then a second Rectangle with background color covers the top part of rotated square making it look like a down arrow. (There is an extra stroke in rotated rectangle with is not really required)

Comments

[Crishnan Kandada]

I just want to keep the color until other spinner selected.Actually I'm using 3 spinners.If i apply this background spinner shape was completely changing(not showing that ">" symbol @GBFSoft

[Parag Kadam]

Thanks it worked! Is there a way of making the corners of the spinner rounded?