Working with Android can be particularly intensive, especially when first starting out. I have recently started working with this technology, and I wanted to share some tips and tricks I have learned along the way. My goal is to help others who are also working on developing apps for the Android environment, in hopes that they too will share their knowledge and insights. This first segment, of a six-week series, will focus on how to use and customize the Spinner widget in your Android application.
(Note: All the following examples are shown using Xamarin within the Visual Studio IDE.)
The Spinner widget in Android is akin to a dropdown menu with which most people are familiar. You click on the widget, and it presents you with a series of options from which to choose. The first step in developing a Spinner widget for your app is to create the dropdown items that your widget will need to access. To do so, we will create the items within an array. For this demonstration, we will be creating a Spinner from which the user can select the State in which they live.
- Create an Array – To create the array from which can access our dropdown items, we must first create an XML file to house the items. To do so, add a new XML file to Resources/values folder and name the file Strings. In the new XML file, you will create a root element of <resources><resources/> within which you will house your array element. In the example below, you can see that the <string-array> element is nested inside the <resources> element. The <item> elements are the States from which the user will be able to choose. Notice that the array has a name and it is set to “states_array” that we will access later. This name will be used to access our array later in the tutorial.
- Create the Spinner Widget – To create the Spinner widget, you must access the layout within which you will use to house the Spinner. In the Resources/layout folder, select the layout. In the XML create the Spinner as shown below. Notice that the Spinner has an id that is set to “@+id/spnState” that we will use to access our Spinner later. This id ties our widget to the Resources file so that we can access it from our activity.
- Customization of Spinner Widget – Typically, you will want to customize the widget so that it matches with the overall theme of your application. Therefore, you may want to override the default color scheme and fonts. To do so, you must create two additional XML files within the Resources/layout folder. These two files must be named spinner_item.xml and spinner_dropdown_item.xml. The spinner_dropdown_item.xml file will be used to customize the dropdown list itself. The spinner_item.xml file customizes the item that is selected and shown to the user. Below is the customization that I used for the spinner_item.xml file. You will see that the color is not hardcoded, but rather a reference to another Resources/values folder named Colors. This technique is good practice, as it allows you to make changes to your color scheme that will propagate through your entire application instead of having to change every hardcoded color. Below you will also see an example of my Colors.xml file for reference.
- Tying Everything Together – Now that you have created your array, and also created and customized your Spinner widget, the last step is to access everything from your activity. Launch your activity, and begin by calling a reference to the id of your Spinner widget in the OnCreate method of your activity as shown below:
Next, we set an ArrayAdapter that will access our array (“states_array”) and set the view of that array to our customized layouts that we created in the previous step. Notice in the code below that Resource.Array.states_array is how we access the array that we created in Step 1. Also, the Resource.Layout.spinner_item and Resource.Layout.spinner_dropdown_item calls are used to bind our array to view that we created Step 3.
The next step is to create the event handler that will show the selected item to the user. We create an event handler outside of OnCreate that will fire when the user selects the item. This event handler is shown in the following code:
Last, inside of OnCreate, we link our event handler to the ItemSelected change event of our Spinner widget and, viola…our Spinner is now fully functional!
I hope that this tutorial will help someone else who is just starting out with working on Android development. Please comment below with your experiences and let me know if you found this tutorial helpful. Thanks for reading and remember to keep learning.