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!
Need some career advice or prepping for an Android developer interview? Hit me up on Topmate.io, and let's chat!
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:
- Customized Background for Selected Item
- Custom Selected Item Text Color
- Android spinner Dropdown text color
- Background for Dropdown List
- 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.
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
<?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!
<?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
<?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!)
<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!
1 comment