I Just Created a spinner with Android Material Design. Let me share my pains with you

kolanse

Samuel Ochuba

Posted on November 21, 2020

I Just Created a spinner with Android Material Design. Let me share my pains with you

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).

WhatsApp Image 2020-11-21 at 14.57.48
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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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"
Enter fullscreen mode Exit fullscreen mode

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 
Enter fullscreen mode Exit fullscreen mode

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.

💖 💪 🙅 🚩
kolanse
Samuel Ochuba

Posted on November 21, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related