Android Spinner - customization with Image & Text

Download Android Spinner with Image and Text sample

In custom spinner tutorial, we are going to demonstate an android Spinner with Image and Text. When select a customer from dropdown, we will display customer's firstName & lastName in Toast.

Customer is my model class, which I am going to use for demonstration.

Now, let's create CustomerAdapter class that extends ArrayAdapter as follows:

We must call a public constructor of ArrayAdapter from our constructor, as I did.

How to customize rows of android spinner?

To customize Android Spinner we need to do 3 things:

  1. We must specify arow layout, how we want to display rows in suggestion list
  2. We must override getView method in our adapter class
  3. We must override getDropDownView
I created a customer_row.xml under res ->layout, code of customer_row.xml is given below:

Here is screenshot, how above layout looks like:

Android spinner row

Our next step is to override getView method in CustomerAdapter. This method specify how Spinner look like once user has selected an item.

We also need to override getDropDownView method which specify how our option list will looks like.

Here is source of these 2 methods:

I wanted to display odd and even row in different color so I implemented my logic in initView method.

Android spinner with image & text example

In this example, we are going to use demonstrate AutoCompleteTextView with customized suggestion box with custom filter logic.


Custom spinner Custom spinner

Step 1: Create a new project in Android Studio and name it Spinner with custom arrayAdapter.

Step 2: Open res -> layout -> activity_main.xml and add following code


Step 3: Open res -> values -> strings.xml and replace it with below given code.


Step 4: Open your res ->values ->colors.xml and replace it's code with below given code of my colors.xml as follows:


Step 5: Create a new layout resource under res -> layout named customer_row.xml. Replace the code of customer_row.xml with below given code.


Step 6: Create a class and replace it's code with below given code of my as follows:

Step 7:Create a class and replace it's code with below given code of my as follows:

Step 8: Open your and replace it's code with below given code of my as follows:

Step 9: Clean and run the project to see the result.

Share & Like

Tutorial topics

About is for Java, J2ee, Html5 and android developers. All tutorials are well explained and are easy to understand. We have tested every tutorials on our developement environment before posting it in public domain.