Android Custom Spinner - Androchunk

So Far you learn how to create Spinner and change the color of the spinner in android.
In this post, you learn how to create a custom spinner in android.

 

Steps to create a custom Spinner

1. Create a Spinner Element in your XML file.
2. Create the custom layout for Spinner element.
3. Create the Getter/Setter method for Spinner element.
4. Create Adapter for the Spinner.
5. Create Item List for the spinner.
6. Implement OnItemSelectedListener for Spinner.
7. Full Source Code & Output.

Create a Spinner element.

Add spinner element in your layout.xml file.write the following code in your activity_main.xml file.

	<Spinner
	android:id="@+id/customSpinner"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="10dp" />

view raw custom_spinner_element.xml hosted with ❤ by GitHub

Custom Layout for Spinner

create a new layout file name custom_spinner_layout.xml and design spinner layout, here we use ImageView and TextView for Spinner Item.

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<ImageView
	android:id="@+id/ivCustomSpinner"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:src="@drawable/ic_android_black_24dp" />
	<TextView
	android:id="@+id/tvCustomSpinner"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:text="Androchunk"
	android:textColor="@android:color/black"
	android:textSize="20sp" />
	</LinearLayout>

view raw custom_spinner_layout.xml hosted with ❤ by GitHub

Getter/Setter method for Spinner element

create a class name CustomItems.java and add a getter/setter method for each variable of the custom item.

	public class CustomItems {
	private String spinnerText;
	private int spinnerImage;
	public CustomItems(String spinnerText, int spinnerImage) {
	this.spinnerText = spinnerText;
	this.spinnerImage = spinnerImage;
	}
	public String getSpinnerText() {
	return spinnerText;
	}
	public int getSpinnerImage() {
	return spinnerImage;
	}
	}

view raw CustomItems.java hosted with ❤ by GitHub

Adapter for the Spinner

Create Adapter class to render data into the spinner. Create class name CustomAdapter.java and extends it to ArrayAdapter<CustomItems>. Override two methods,

getView: return view of spinner with selected item position.
getDropDownView: return view of dropdown list of the spinner
 
here we have same view for both methods so we create new method customView and use it for both methods.

	public class CustomAdapter extends ArrayAdapter<CustomItems> {
	public CustomAdapter(@NonNull Context context, ArrayList<CustomItems> customList) {
	super(context, 0, customList);
	}
	@NonNull
	@Override
	public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	return customView(position, convertView, parent);
	}
	@Override
	public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	return customView(position, convertView, parent);
	}
	public View customView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	if (convertView == null) {
	convertView = LayoutInflater.from(getContext()).inflate(R.layout.custom_spinner_layout, parent, false);
	}
	CustomItems items = getItem(position);
	ImageView spinnerImage = convertView.findViewById(R.id.ivCustomSpinner);
	TextView spinnerName = convertView.findViewById(R.id.tvCustomSpinner);
	if (items != null) {
	spinnerImage.setImageResource(items.getSpinnerImage());
	spinnerName.setText(items.getSpinnerText());
	}
	return convertView;
	}
	}

view raw CustomAdapter.java hosted with ❤ by GitHub

Item List for the spinner

this list contains items which display into the spinner.

	ArrayList<CustomItems> customList = new ArrayList<>();
	customList.add(new CustomItems("Android", R.drawable.ic_android_black_24dp));
	customList.add(new CustomItems("School", R.drawable.ic_school_black_24dp));
	customList.add(new CustomItems("satisfied", R.drawable.ic_sentiment_very_satisfied_black_24dp));
	customList.add(new CustomItems("shopping_cart", R.drawable.ic_shopping_cart_black_24dp));
	customList.add(new CustomItems("whatshot", R.drawable.ic_whatshot_black_24dp));

view raw Item_List_custom_spinner.java hosted with ❤ by GitHub

Implement OnItemSelectedListener for Spinner

To handle the item selection of Spinner attaches onItemSelectedListener which implement two methods.  
onItemSelected: this method called when item selection is changed.
 onNothingSelected: this method call when no item is selected for ex: remove the selected item from the list

	@Override
	public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
	CustomItems items = (CustomItems) adapterView.getSelectedItem();
	Toast.makeText(this, items.getSpinnerText(), Toast.LENGTH_SHORT).show();
	}
	@Override
	public void onNothingSelected(AdapterView<?> adapterView) {
	}

view raw OnItemSelectedListener_custom_Spinner.java hosted with ❤ by GitHub

Full Source Code & Output.

activity_main.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	xmlns:tools="http://schemas.android.com/tools"
	android:layout_width="match_parent"
	android:layout_height="match_parent"
	android:gravity="center"
	android:orientation="vertical"
	tools:context=".MainActivity">
	<Spinner
	android:id="@+id/customSpinner"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:layout_margin="10dp" />
	</LinearLayout>

view raw custom_Spinner_activity_main.xml hosted with ❤ by GitHub

custom_spinner_layout.xml

	<?xml version="1.0" encoding="utf-8"?>
	<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="horizontal">
	<ImageView
	android:id="@+id/ivCustomSpinner"
	android:layout_width="wrap_content"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:src="@drawable/ic_android_black_24dp" />
	<TextView
	android:id="@+id/tvCustomSpinner"
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:padding="10dp"
	android:text="Androchunk"
	android:textColor="@android:color/black"
	android:textSize="20sp" />
	</LinearLayout>

view raw custom_spinner_layout.xml hosted with ❤ by GitHub

MainActivity.java

	public class MainActivity extends AppCompatActivity implements AdapterView.OnItemSelectedListener {
	private Spinner customSpinner;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	customSpinner = findViewById(R.id.customSpinner);
	// create spinneritemlist for spinner
	ArrayList<CustomItems> customList = new ArrayList<>();
	customList.add(new CustomItems("Android", R.drawable.ic_android_black_24dp));
	customList.add(new CustomItems("School", R.drawable.ic_school_black_24dp));
	customList.add(new CustomItems("satisfied", R.drawable.ic_sentiment_very_satisfied_black_24dp));
	customList.add(new CustomItems("shopping_cart", R.drawable.ic_shopping_cart_black_24dp));
	customList.add(new CustomItems("whatshot", R.drawable.ic_whatshot_black_24dp));
	// create Adapter for spinner
	CustomAdapter customAdapter = new CustomAdapter(this, customList);
	if (customSpinner != null) {
	customSpinner.setAdapter(customAdapter);
	customSpinner.setOnItemSelectedListener(this);
	}
	}
	@Override
	public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
	CustomItems items = (CustomItems) adapterView.getSelectedItem();
	Toast.makeText(this, items.getSpinnerText(), Toast.LENGTH_SHORT).show();
	}
	@Override
	public void onNothingSelected(AdapterView<?> adapterView) {
	}
	}

view raw CustomSpinner_MainActivity.java hosted with ❤ by GitHub

CustomItems.java

	public class CustomItems {
	private String spinnerText;
	private int spinnerImage;
	public CustomItems(String spinnerText, int spinnerImage) {
	this.spinnerText = spinnerText;
	this.spinnerImage = spinnerImage;
	}
	public String getSpinnerText() {
	return spinnerText;
	}
	public int getSpinnerImage() {
	return spinnerImage;
	}
	}

view raw CustomItems.java hosted with ❤ by GitHub

CustomAdapter.java  

	public class CustomAdapter extends ArrayAdapter<CustomItems> {
	public CustomAdapter(@NonNull Context context, ArrayList<CustomItems> customList) {
	super(context, 0, customList);
	}
	@NonNull
	@Override
	public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	return customView(position, convertView, parent);
	}
	@Override
	public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	return customView(position, convertView, parent);
	}
	public View customView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
	if (convertView == null) {
	convertView = LayoutInflater.from(getContext()).inflate(R.layout.custom_spinner_layout, parent, false);
	}
	CustomItems items = getItem(position);
	ImageView spinnerImage = convertView.findViewById(R.id.ivCustomSpinner);
	TextView spinnerName = convertView.findViewById(R.id.tvCustomSpinner);
	if (items != null) {
	spinnerImage.setImageResource(items.getSpinnerImage());
	spinnerName.setText(items.getSpinnerText());
	}
	return convertView;
	}
	}

view raw CustomAdapter.java hosted with ❤ by GitHub

If you have any questions or suggestions  please leave them in the comments.

Full Source Code : https://github.com/Androchunk/CustomSpinner

---

Question of the Day

  Change Icon of Spinner like this,

Solution :

---

Official documentation:

Spinner : https://developer.android.com/guide/topics/ui/controls/spinner

SpinnerAdapter:https://developer.android.com/reference/android/widget/SpinnerAdapter

AdapterView.OnItemSelectedListener:https://developer.android.com/reference/android/widget/AdapterView.OnItemSelectedListener

---