The task was to create a spinner item to display a list of banks for users to select. I decided to use the material design spinner to accomplish the task. This was the first time I would use material design spinner but I didn't worry about the limited timeline of my sprint because I expected it to be an easy thing to do, Considering I had used Material design components multiple times. My first point of call was google's material design website. The result included progress bars, menu etc, but nothing on spinners. I was shocked that a very common UI component like spinner wasn't available in material design.
Not wanting to believe that possibility, I decided to do a google search on how a material design spinner in android could be implemented. One of the very first articles I came across was hilarious and made my already souring mood to cheer up a little. if you are interested in a little laugh you can read the article here
After reading the article i found out that google decided to call a spinner in android material design an Exposed Dropdown Menu. If not for that article I would never have found out or I would have done a considerable search before finding out what exactly a spinner is called in material design.
Because Exposed Dropdown Menu isn't exactly a spinner, you are forced to think in terms of a spinner but code in terms of a TextInputLayout. Good luck finding relevant materials as a dev on material design spinner (it took me over 30 minutes to figure out how to get a user's selected item).
All I Was Trying to Accomplish
Battle 1: Setting a background colour to the spinner
Setting the background color in most UI components mostly involves just using the "android:background" attribute i.e.
android:background="@color/black"
I was pleasantly suprised that it didn't work as intended i decided to do a little digging and found out that the appriopate attribute to use was
app:boxBackgroundColor="@color/black"
Battle 2: Setting a Stroke Color
As an android developer especially a junior one or a beginner, Most of the times you get to customize an edittext field or button, It is usually done by creating a drawable xml file and setting the background of the view to the xml drawable. It doesn't work that way on a material design spinner aka Exposed Dropdown Menu.
After trying out all the usual ways with ever-increasing frustration. I decided to take a chilled coke and think up another way I could do it. it is amazing what a chilled coke could do to the brain in terms of inducing a eureka moment.
I decided to use themes to colour the stroke and unsurprisingly it worked. It just involved me creating a style like this
Then i set the style of my TextInputLayout to:
style="@style/spinnerTheme"
Battle 3: Setting the Spinner Dropdown Icon and Getting the Selected Item
After winning the first two battles, I felt confident that the next battle would be the easiest of the three. I was wrong in that aspect. Setting the icon drawable meant I had to go through all the suggested properties android studio offered me before I found out that the endIcon attribute was the attribute I had to change.
Once i found out it was just a matter of overriding it in my themes.
My completed style is below:
The path to finding out how to get the user-selected item took quite some time than i estimated.. over 15 minutes. In a normal android spinner, overriding onItemSelected Material design spinner ..coughs* .. Exposed Dropdown Menu doesn't work like that. After a little search, i found out that onTextChanged listener could work for it. But to me, it felt like an over kill since I was just looking to get the user selected bank.
After a deeper search, I found out that AutoCompleteTextView was a child of EditText. Going along with that reasoning i hypothesized that the getText() method would work in getting the selected item. it worked!!.
var bank = spinner.editText?.text.toString
Though my solution seemed to work I am still anticipating bugs.
I decided to post this article to add some material and help some other junior dev or beginner who might have the fortune to navigate the material design spinner maze. Articles on Material design spinner seemed scarce online.
Top comments (6)
I used to believe Material Design was a way to design according to the mindless expectation of the user but these days, Google is making it seem like a brash manipulative way of imposing their own engineering team's weirdness on everyone.
Obscure documentation and all.
This is a good one man. Do write more.
Will do so
Maybe we have an alternative now?
See official example here
what do you say about it?
yeah . i think that works
Nice. This should be helpful when I come strolling down this path.
Thanks