This article will show you examples about how to use android.widget.Spinner to show item selection list in android application. The selection list can be shown in either drop down list or popup dialog.
1. Basic Spinner Example.
If you can not watch the above video, you can see it on the youtube URL https://youtu.be/8W2UkSh4lSM
In above gif image, there are two Spinners. The First one is just demo a basic Spinner. To implement it, you just need to add below xml in your android app layout file.
<Spinner
android:id="@+id/emailSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:entries="@array/email_array"
android:spinnerMode="dropdown"
android:dropDownSelector="@color/colorGreen"
android:prompt="@string/title_choose_email"
android:popupBackground="@color/colorYellow"/>
2. Spinner Properties Introduce.
- spinnerMode: The value is either dropdown or dialog. The default value is dropdown. It controls how to show the spinner item list.
- entries : A string array variable defined in app / res / values / arrays.xml file like below. Then you can display those array string as spinner items.
<resources> <string-array name="email_array"> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> <item>[email protected]</item> </string-array> <string-array name="country_array"> <item>China</item> <item>Japan</item> <item>India</item> <item>Korea</item> <item>United Kingdom</item> <item>United State</item> </string-array> </resources> - dropDownSelector : Color or drawable resource id. It will be shown as one item background when user select an item.
- popupBackground : Color or drawable resource id. It will be shown as the item list background.
- prompt : This is a string variable which will be shown in the dialog title. It is only effective when spinnerMode value is dialog.
3. Spinner Example Source Code.
In this example, android.widget.AdapterView.OnItemSelectedListener is used to listen user select Spinner item event.
3.1 activity_spinner.xml
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
tools:layout_editor_absoluteY="0dp"
tools:layout_editor_absoluteX="8dp">
<!-- Basic Spinner Example-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingLeft="10dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<TextView
android:id="@+id/textViewBasicSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Basic Spinner Example"
android:textSize="15dp"
android:background="@color/colorGreen"/>
<Spinner
android:id="@+id/emailSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:entries="@array/email_array"
android:spinnerMode="dropdown"
android:dropDownSelector="@color/colorGreen"
android:prompt="@string/title_choose_email"
android:popupBackground="@color/colorYellow"/>
</LinearLayout>
<!-- Custom Spinner Example -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:paddingTop="20dp"
android:paddingLeft="10dp"
tools:layout_editor_absoluteY="8dp"
tools:layout_editor_absoluteX="8dp">
<TextView
android:id="@+id/textViewCustomizeSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Custom Spinner Example"
android:textSize="15dp"
android:background="@color/colorGreen"/>
<Spinner
android:id="@+id/customSpinner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="3"
android:spinnerMode="dialog"/>
</LinearLayout>
<!--Custom Spinner Adapter Buttons-->
<Button
android:id="@+id/customAdapterButton"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="Custom Adapter" />
</LinearLayout>
3.2 SpinnerActivity.java
package com.dev2qa.example;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AlertDialog;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.Spinner;
import android.widget.TextView;
public class SpinnerActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_spinner);
// Get custom Spinner object.
final Spinner customSpinner = (Spinner)findViewById(R.id.customSpinner);
// Set on item select lister code.
this.setSpinnerOnItemSelectListener(customSpinner);
// Load spinner items in java code.
this.customSpinner(customSpinner);
// Get custom spinner adapter use text button.
Button customSpinnerAdapterButton = (Button)findViewById(R.id.customAdapterButton);
customSpinnerAdapterButton.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
customAdapter(customSpinner);
}
});
}
/* This method show you how to manipulate a Spinner use java code.
Include customize it's items and listen it's select item event. */
private void customSpinner(Spinner customSpinner)
{
// Get custom Spinner items array.
String customSpinnerItemArr[] = getResources().getStringArray(R.array.country_array);
// Set Spinner list items in array adapter..
ArrayAdapter<String> customSpinnerItemArrAdaptor = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, customSpinnerItemArr);
customSpinnerItemArrAdaptor.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
// Set Spinner adapter.
customSpinner.setAdapter(customSpinnerItemArrAdaptor);
}
/* This method use a custom adapter to render Spinner items with image and text. */
private void customAdapter(Spinner customSpinner)
{
// Set custom adapter in Spinner.
customSpinner.setAdapter(new BaseAdapter() {
@Override
public int getCount() {
return 10;
}
@Override
public Object getItem(int i) {
return String.valueOf(i);
}
@Override
public long getItemId(int i) {
return i;
}
@Override
public View getView(int i, View view, ViewGroup viewGroup) {
// Create a LinearLayout to contain image an text.
LinearLayout itemView = new LinearLayout(SpinnerActivity.this);
itemView.setOrientation(LinearLayout.HORIZONTAL);
// Create an ImageView.
ImageView imageView = new ImageView(SpinnerActivity.this);
imageView.setImageResource(R.mipmap.ic_launcher);
// Create a TextView.
TextView textView = new TextView(SpinnerActivity.this);
textView.setText(String.valueOf(i));
textView.setTextSize(25);
textView.setTextColor(Color.RED);
// Add image and text in the item object.
itemView.addView(imageView);
itemView.addView(textView);
return itemView;
}
});
}
// This method will implement on item select listener java code.
private void setSpinnerOnItemSelectListener(Spinner customSpinner)
{
// Set Spinner on item select listener.
customSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
// When item select.
Object selectedItem = adapterView.getAdapter().getItem(i);
AlertDialog alertDialog = new AlertDialog.Builder(SpinnerActivity.this).create();
alertDialog.setMessage((String)selectedItem);
alertDialog.show();
}
@Override
public void onNothingSelected(AdapterView<?> adapterView) {
AlertDialog alertDialog = new AlertDialog.Builder(SpinnerActivity.this).create();
alertDialog.setMessage("You select nothing.");
alertDialog.show();
}
});
}
}