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.

Customer.java

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.

Result

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

activity_main.xml

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

strings.xml

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

colors.xml

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.

customer_row.xml

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

Customer.java

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

CustomerAdapter.java

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

MainActivity.java

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


Share & Like

Tutorial topics

About ApnaTutorials.com

ApnaTutorials.com 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.