Spinner is a widget similar to a drop-down list for selecting items.
In this example I will show you how to implement Simple and Custom Spinner in Android.
Let’s get start by creating a project in Eclipse IDE.
1. Create a new project in Eclipse by navigating to File ⇒ New Android ⇒ Application Project and fill required details. (I kept my main activity name as MainActivity.java)
2. Create a layout file for MainActivtiy.java under res ⇒ layout folder. I named the layout file as activity_main.xml. In this layout i used two Spinner, one for simple and one for custom.
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 |
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" android:gravity="center" android:padding="5dp" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:textSize="18sp" android:textColor="#000000" android:text="Simple Spinner" /> <Spinner android:id="@+id/simple_spinner" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:padding="10dp" android:popupBackground="#FFCCDD" android:prompt="@string/spinner_prompt" /> <Button android:id="@+id/btnSubmit" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_marginTop="10dp" android:gravity="center" android:padding="10dp" android:text="Submit" /> <TextView android:textSize="18sp" android:textColor="#000000" android:layout_marginTop="10dp" android:layout_width="fill_parent" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:text="Custom Spinner" /> <Spinner android:id="@+id/custom_spinner" android:layout_marginTop="10dp" android:popupBackground="#ffffff" android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawSelectorOnTop="true" android:prompt="@string/spinner_prompt" /> </LinearLayout> |
3. For custom Spinner we have to make a new layout for custom view naming custom_spinner_layout.xml under layout folder. In this layout i had just taken an ImageView and a TextView.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:padding="5dp" > <ImageView android:id="@+id/image" android:layout_width="50dp" android:layout_height="50dp" android:scaleType="fitCenter" /> <TextView android:id="@+id/text" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_centerVertical="true" android:layout_marginLeft="5dip" android:layout_toRightOf="@+id/image" android:textColor="#000000" /> </RelativeLayout> |
4. Now create a new class naming SpinnerData_Items.java for getter and setter for custom view.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
package com.android_spinner_demo; public class SpinnerData_Items { String text; Integer image; // Getter and setter for custom spinner public SpinnerData_Items(String text, Integer image) { this.text = text; this.image = image; } // Return the text public String getText() { return text; } // Return the image public int getImage() { return image; } } |
5. Now make a custom adapter class naming CustomSpinner_Adapter.java for inflating custom view and add the following code.
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 70 71 72 |
package com.android_spinner_demo; import java.util.ArrayList; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.TextView; import com.android_spinner_demo.R; public class CustomSpinner_Adapter extends BaseAdapter { private ArrayList<SpinnerData_Items> arrayList; LayoutInflater inflater; ViewHolder holder = null; public CustomSpinner_Adapter(Context context, ArrayList<SpinnerData_Items> arrayList) { this.arrayList = arrayList; this.inflater = LayoutInflater.from(context); } @Override public int getCount() { // Array list size return arrayList.size(); } @Override public SpinnerData_Items getItem(int pos) { return arrayList.get(pos); } @Override public long getItemId(int pos) { return pos; } @Override public View getView(int position, View view, ViewGroup parent) { if (view == null) { view = inflater.inflate(R.layout.custom_spinner_layout, parent, false); holder = new ViewHolder(); holder.text = (TextView) view.findViewById(R.id.text); holder.imageView = (ImageView) view.findViewById(R.id.image); view.setTag(holder); } else { holder = (ViewHolder) view.getTag(); } // Setting text and image holder.text.setText(arrayList.get(position).getText()); holder.imageView.setBackgroundResource(arrayList.get(position) .getImage()); return view; } // Viewholder for holding the views public class ViewHolder { TextView text; ImageView imageView; } } |
6. Finally, come to MainActivity.java and add the following code. In this class we load both the spinners (Simple and Custom) with some data and set adapter to both the spinners. And a toast will be shown when the item is selected from spinner.
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 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 |
package com.android_spinner_demo; import java.util.ArrayList; import java.util.List; import android.os.Bundle; import android.support.v7.app.ActionBarActivity; import android.view.View; import android.view.View.OnClickListener; import android.widget.AdapterView; import android.widget.AdapterView.OnItemSelectedListener; import android.widget.ArrayAdapter; import android.widget.Button; import android.widget.Spinner; import android.widget.TextView; import android.widget.Toast; import com.android_spinner_demo.R; public class MainActivity extends ActionBarActivity implements OnClickListener { private static Spinner simple_spinner, custom_spinner; private static Button submit; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); init(); setListeners(); } // Initializing all views void init() { simple_spinner = (Spinner) findViewById(R.id.simple_spinner); custom_spinner = (Spinner) findViewById(R.id.custom_spinner); submit = (Button) findViewById(R.id.btnSubmit); // Loading items to simple spinner loadItemstoSimpleSpinner(); // Loading items to custom spinner loadItemstoCustomSpinner(); } // Simple Spinner items loader method void loadItemstoSimpleSpinner() { // Getting string array from strings.xml String[] spinner_items = getResources().getStringArray( R.array.simple_spinner_items); // List for storing data for spinner List<String> list = new ArrayList<String>(); for (int i = 0; i < spinner_items.length; i++) { list.add(spinner_items[i]); } // Adappter for showing data ArrayAdapter<String> dataAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_spinner_item, list); // Setting dropdown view dataAdapter .setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); // Setting adapter simple_spinner.setAdapter(dataAdapter); } // Cusotm Spinner items loader method void loadItemstoCustomSpinner() { // String array for texts String[] spinner_items = getResources().getStringArray( R.array.custom_spinner_items); // Integer array for images Integer[] spinner_images = { R.drawable.cupcake, R.drawable.donut, R.drawable.eclair, R.drawable.froyo, R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.icecream }; // Arrays list for storing string and integer arrays into spinnerdata // items ArrayList<SpinnerData_Items> list = new ArrayList<SpinnerData_Items>(); for (int i = 0; i < spinner_items.length; i++) { list.add(new SpinnerData_Items(spinner_items[i], spinner_images[i])); } // Custom adapter for custom spinner CustomSpinner_Adapter adapter = new CustomSpinner_Adapter( MainActivity.this, list); // Setting adapter custom_spinner.setAdapter(adapter); } // Setting listeners void setListeners() { // Click listener on button submit.setOnClickListener(this); // Item selected listener simple_spinner.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<> parent, View view, int position, long id) { // Showing a toast when item is selected Toast.makeText( parent.getContext(), "On Spinner Item Select : n" + parent.getItemAtPosition(position).toString(), // Getting // item // from // position Toast.LENGTH_SHORT).show(); } @Override public void onNothingSelected(AdapterView<> arg0) { } }); custom_spinner.setOnItemSelectedListener(new OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<> parentView, View v, int position, long id) { // Getting textView text and showing via toast String text = ((TextView) v.findViewById(R.id.text)).getText() .toString(); Toast.makeText(getApplicationContext(), text, Toast.LENGTH_SHORT).show(); } @Override public void onNothingSelected(AdapterView<> parentView) { } }); } @Override public void onClick(View v) { switch (v.getId()) { case R.id.btnSubmit: Toast.makeText( // Showing a toast on button click for simple spinner MainActivity.this, "On Button Click : " + "n" + String.valueOf(simple_spinner.getSelectedItem()), // Get // simple // spinner // item // selected Toast.LENGTH_SHORT).show(); break; } } } |
7. Now, run the app and you will get the output as shown in video.
Thanks.
Subscribe to us and get the latest news.