Spinners — Android #13

A quick one today — how to show a list of values that the user can choose from. One way is a Spinner.

Start a new project in Android Studio and open the activity_main.xml layout file. Delete the default TextView if you want and drag out a LinearLayout (vertical). This isn’t mandatory, but I don’t want to worry about constraints right now!

Into the LinearLayout, drag a Spinner object:

Make sure it has an ID, it’ll be something like “spinner”:

To put content i.e. the choices, into the Spinner, we use a SpinnerAdapter. There’s a few ways of getting content into the SpinnerAdapter, we’ll do a simple way — creating a new resource file.

Right-click on the values folder:

and hit New -> Values resource file:

On the pop-up, give the file a name … like “donutchoices” and hit OK:

This will appear:

We can add code to this now, to create a String Array, that will hold our values:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="donuts_array">
<item>Jam</item>
<item>Coconut</item>
<item>Boston Cream</item>
<item>Pistachio</item>
<item>Toffee</item>
<item>Sprinkled</item>
<item>Classic</item>
<item>Custard</item>
</string-array>
</resources>

Awesome, and delicious.

Now, head over to the MainActivity.java file and in the onCreate folder, add this code:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Spinner spinner = (Spinner) findViewById(R.id.spinner);

// Create an ArrayAdapter using the string array and a default spinner layout
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.donuts_array, android.R.layout.simple_spinner_item);

// Specify the layout to use when the list of choices appears
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

// Apply the adapter to the spinner
spinner.setAdapter(adapter);

}

This gets a reference to our Spinner:

Spinner spinner = (Spinner) findViewById(R.id.spinner);

This creates an ArrayAdapter using our donuts_array:

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.donuts_array, android.R.layout.simple_spinner_item);

If you called yours something else, change it there. i.e. if your array is called biscuits_array:

ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
R.array.biscuits_array, android.R.layout.simple_spinner_item);

This specifies what the Spinner should look like, using a default:

adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

and this sets the adapter (which uses our array) to the Spinner:

spinner.setAdapter(adapter);

Run that app! You’ll see something like this:

Which is the Spinner, showing the first value from our array, which in this case is Jam. Or subh in Irish, by the way. Anyway … tap on the Spinner to see all the choices:

Lovely. Before I say goodbye, let’s add one last thing — how to do something when a user hits one of the choices.

In the MainActivity file, change:

public class MainActivity extends AppCompatActivity{

to:

public class MainActivity extends AppCompatActivity implements OnItemSelectedListener{

which is saying that this Class “implements” a OnItemSelectedListener, from the Class AdapterView.

You may need to add this import manually to the start of the file with the other imports:

import android.widget.AdapterView.OnItemSelectedListener;

The OnItemSelectedListener requires two methods — add these now:

public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// An item was selected. You can retrieve the selected item using
// parent.getItemAtPosition(pos)
}

public void onNothingSelected(AdapterView<?> parent) {
// Another interface callback
}

I’m going to add a TextView into the Activity (should have kept the default one!) and give it an ID of “displayTextView”, along with center aligning it and making the textSize bigger. We’ll use this to display the chosen value:

Back in our code, add these two lines to the OnItemSelected method:

public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// An item was selected. You can retrieve the selected item using
// parent.getItemAtPosition(pos)

TextView displayTextView = (TextView)findViewById(R.id.displayTextView);

displayTextView.setText((String) parent.getItemAtPosition(pos));

}

This gets a reference to our TextView:

TextView displayTextView = (TextView)findViewById(R.id.displayTextView);

and this sets its value to the item selected from the Spinner by the user:

displayTextView.setText((String) parent.getItemAtPosition(pos));

One final thing (which I originally forgot to include here!) — add this line:

spinner.setOnItemSelectedListener(this);

to the onCreate method, after the Spinner declaration:

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

Spinner spinner = (Spinner) findViewById(R.id.spinner);
spinner.setOnItemSelectedListener(this);

Run the app!

Hmm, the TextView is showing “Jam” even though we didn’t actually select anything yet. One, slightly hacky way, to fix this is to add in a “blank” entry in our array:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="donuts_array">
<item></item>
<item>Jam</item>
<item>Coconut</item>
<item>Boston Cream</item>
<item>Pistachio</item>
<item>Toffee</item>
<item>Sprinkled</item>
<item>Classic</item>
<item>Custard</item>
</string-array>
</resources>

Or, to add in a “Select Item” entry instead:

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="donuts_array">
<item>Select Item</item>
<item>Jam</item>
<item>Coconut</item>
<item>Boston Cream</item>
<item>Pistachio</item>
<item>Toffee</item>
<item>Sprinkled</item>
<item>Classic</item>
<item>Custard</item>
</string-array>
</resources>

Anyway, it’s not important for now! Tap on the Spinner and select something else, and you will see the TextView change value:

Great. Note that we could have done other things when an item is selected, like storing the chosen item in a variable, for use later:

//create variable to store selected value
String selectedValue = "";

public void onItemSelected(AdapterView<?> parent, View view,
int pos, long id) {
// An item was selected. You can retrieve the selected item using
// parent.getItemAtPosition(pos)

selectedValue = (String) parent.getItemAtPosition(pos);

}

Any comments or thoughts let me know below!

** Finally, a quick plug — I also deliver a video course to become a certified Android developer here. #ad **

If you like, please hit the little clap recommend below, or go all out nuts and share! Andy

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Andy O'Sullivan

Andy O'Sullivan

Creator of Boxapopa, the iOS game for young kids with zero ads, just fun! https://apps.apple.com/ie/app/boxapopa/id1550536188