A dropdown or pull-down menu, also known as spinner, is one of the most essential UI elements for an app. In this tutorial I’ll tell you how to add one to your Android app using Java.
In this tutorial, we show you how to do the following tasks :
- Render a Spinner in XML, and load the selection items via XML file also.
- Render another Spinner in XML, and load the selection items via code dynamically.
- Attach a listener on Spinner, fire when user select a value in Spinner.
- Render and attach a listener on a normal button, fire when user click on it, and it will display selected value of Spinner.
DEMO: Android Spinner (Drop Down List) Example
Step 1: Open “res/values/strings.xml” file, define the list of items that will display in Spinner (dropdown list).
File : res/values/strings.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<resources> <string name="app_name">Code4Example</string> <string name="lang_prompt">Choose a Language</string> <string-array name="lang_arrays"> <item>Java</item> <item>PHP</item> <item>JavaScript</item> <item>Dart</item> <item>Ruby</item> <item>Go</item> <item>Python</item> <item>Scala</item> </string-array> </resources> |
Step 2: Open “res/layout/acticity_main.xml” file, add two spinner components and a button.
- In
spinner1, theandroid:entriesrepresents the selection items in spinner. - In
spinner2, the selection items will be defined in code later.
File : res/layout/activity_main.xml
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".MainActivity"> <Spinner android:id="@+id/spinner1" android:prompt="@string/lang_prompt" android:entries="@array/lang_arrays" android:layout_width="409dp" android:layout_height="wrap_content" android:layout_marginStart="24dp" android:layout_marginTop="32dp" android:layout_marginEnd="24dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" /> <Spinner android:id="@+id/spinner2" android:layout_width="409dp" android:layout_height="wrap_content" android:layout_marginStart="24dp" android:layout_marginTop="32dp" android:layout_marginEnd="24dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/spinner1" /> <Button android:id="@+id/btnSubmit" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="32dp" android:text="Button" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/spinner2" /> </androidx.constraintlayout.widget.ConstraintLayout> |
Step 3: Read the code and also code’s comment, it should be self-explanatory.
File : MainActivity.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 |
package com.example.code4example; import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.Spinner; import android.widget.Toast; import java.util.ArrayList; import java.util.List; public class MainActivity extends AppCompatActivity { Spinner spinner1, spinner2; Button btnSubmit; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // Declaring and typecasting views spinner1 = (Spinner) findViewById(R.id.spinner1); spinner2 = (Spinner) findViewById(R.id.spinner2); btnSubmit = (Button) findViewById(R.id.btnSubmit); // Adding Listener on spinner1 spinner1.setOnItemSelectedListener(new CustomOnItemSelectedListener()); //Populating data into spinner2 addItemsOnSpinner2(); btnSubmit.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { Toast.makeText(MainActivity.this, "OnClickListener : " + "\nSpinner 1 : "+ String.valueOf(spinner1.getSelectedItem()) + "\nSpinner 2 : "+ String.valueOf(spinner2.getSelectedItem()), Toast.LENGTH_SHORT).show(); } }); } // add items into spinner dynamically public void addItemsOnSpinner2() { spinner2 = (Spinner) findViewById(R.id.spinner2); List<String> list = new ArrayList<String>(); list.add("list item 1"); list.add("list item 2"); list.add("list item 3"); ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list); dataAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); spinner2.setAdapter(dataAdapter); } } |
Step 4: Create Custom java class.
File : CustomOnItemSelectedListener.java
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package com.example.code4example; import android.view.View; import android.widget.AdapterView; import android.widget.Toast; public class CustomOnItemSelectedListener implements AdapterView.OnItemSelectedListener { @Override public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) { Toast.makeText(adapterView.getContext(), "OnItemSelectedListener : " + adapterView.getItemAtPosition(i).toString(), Toast.LENGTH_SHORT).show(); } @Override public void onNothingSelected(AdapterView<?> adapterView) { } } |
