Custom Spinner Android Styling Tutorial | Java and Kotlin

Learn how to style a Custom Spinner for Android App. Android Studio has a widget known as spinner, but however styling spinner widget is a complicated stuff!

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:

custom android spinner
custom android spinner
  1. Customized Background for Selected Item
  2. Custom Selected Item Text Color
  3. Android spinner Dropdown text color
  4. Background for Dropdown List
  5. Spinner Animation

Android Spinner selected Item Background

To begin first, lets start by making a custom background for our spinner, as shown in the image below.

custom spinner android
custom spinner background

Create a new drawable xml file and name it as spinner_bg.xml.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android"
    android:exitFadeDuration="@android:integer/config_mediumAnimTime">
    <item android:state_pressed="true" android:drawable="@android:color/white" />
    <item android:state_selected="true" android:drawable="@android:color/white" />
    <item>
        <inset android:insetLeft="-1dp" android:insetRight="-1dp">
            <shape android:shape="rectangle">
                <stroke android:width="1dp"
                    android:color="#cccccc" />
                <solid android:color="#f0f0f0" />
            </shape>
        </inset>
    </item>
</selector>

For custom animation we’ve added exitFadeDuration attribute to our xml <selector> tag. The <item> tag has 2 states: state_pressed and state_selected, you can set a different color for drawable attribute here.

Android Spinner Animation

Now create another drawable for animation named spinner_sla.xml

custom android spinner
android spinner animation
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_mediumAnimTime"
                android:propertyName="translationZ"
                android:valueTo="5dp" />
        </set>
    </item>
    <item android:state_selected="true">
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="5dp" />
        </set>
    </item>
    <item>
        <set>
            <objectAnimator
                android:duration="@android:integer/config_shortAnimTime"
                android:propertyName="translationZ"
                android:valueTo="0dp" />
        </set>
    </item>
</selector>
duration,propertyName and valueTo are different properties with which you can play to add some custom animation!

Android Spinner selected item Text Color

Now we’ll create a different background for selected text item shown in the spinner! Here you can set custom Android spinner Dropdown text color and a custom background color!

custom android spinner
android spinner
<?xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    style="?attr/spinnerDropDownItemStyle"
    android:textColor="@color/colorAccent"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:background="@drawable/abc_spinner_mtrl_am_alpha"
    android:backgroundTint="@color/colorAccent"
    android:ellipsize="marquee" />

Android Spinner Dropdown Text Color

Now let’s set a custom background for drop down menu items! Here also you can set a Android spinner Dropdown text color and background color!

Android spinner dropdown
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/text1"
    android:textColor="#FFF"
    android:background="@color/colorPrimary"
    style="?attr/spinnerDropDownItemStyle"
    android:singleLine="true"
    android:layout_width="match_parent"
    android:layout_height="?attr/dropdownListPreferredItemHeight"
    android:ellipsize="marquee"/>

Designing Custom Android Spinner

Now that all different (4) drawable and layout files are ready, lets create our Spinner! (Please mind the Constraints!)

custom android spinner
custom android spinner
    <Spinner
        android:id="@+id/spinner"
        style="@style/Widget.AppCompat.Spinner"
        android:layout_width="300dp"
        android:layout_height="?attr/dropdownListPreferredItemHeight"
        android:layout_margin="10dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:background="@drawable/spinner_bg"
        android:dropDownWidth="300dp"
        android:dropDownVerticalOffset="?attr/dropdownListPreferredItemHeight"
        android:paddingRight="14dp"
        android:popupBackground="@android:color/white"
        android:popupElevation="3dp"
        android:stateListAnimator="@drawable/spinner_sla"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

Coding Spinner in Java (with Toast Msg!)

TaDaa! Now lets code our spinner in our MainActivity.java (wherever you want to put Spinner!) and create a Toast message whenever any value is selected in Spinner!

    String[] data = {"Java", "Python", "C++", "C#", "Angular", "Go"};

        ArrayAdapter adapter = new ArrayAdapter<String>(this, R.layout.spinner_item_selected, data);
        adapter.setDropDownViewResource(R.layout.spinner_dropdown_item);

        Spinner spinner = findViewById(R.id.spinner);
        spinner.setAdapter(adapter);
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                Toast.makeText(MainActivity.this,parent.getItemAtPosition(position).toString(),Toast.LENGTH_LONG).show();
            }

            @Override
            public void onNothingSelected(AdapterView<?> parent) {

            }
        });

An array of Strings is first created and passed in ArrayAdapter. For Array adapter we’ve set the custom layout here (spinner_item_selected) and our custom drop down resource (spinner_dropdown_item)

Once we’ve set an adapter for spinner, we have created ‘setOnItemSelectedListener‘ which helped in getting the string value of selected item and passed its value in toast!

Coding Spinner in Kotlin (with Toast Msg!)

For our Kotlin fans, here is how you can code your android spinner in Kotlin in our MainActivity.java (wherever you want to put Spinner!) and create a Toast message whenever any value is selected in Spinner!

val data = arrayOf("Java", "Python", "C++", "C#", "Angular", "Go")

        val adapter = ArrayAdapter(this, R.layout.spinner_item_selected, data)
        adapter.setDropDownViewResource(R.layout.spinner_dropdown_item)

        val spinner = findViewById<Spinner>(R.id.spinner)
        spinner.adapter = adapter
        spinner.onItemSelectedListener = object : AdapterView.OnItemSelectedListener {
            override fun onItemSelected(parent: AdapterView<*>, view: View, position: Int, id: Long) {
                Toast.makeText(this@MainActivity, parent.getItemAtPosition(position).toString(), Toast.LENGTH_LONG).show()
            }

            override fun onNothingSelected(parent: AdapterView<*>) {

            }
        }

In case you faces any issue or have something we left to discuss, drop a comment below and we will reply asap. Thanks 🙂

Source: StackOverFlow

Love Styling your Android App? Read more about creating a custom button using 6 different styles in Android here!

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.