Android custom spinner with image And Text | Custom Adapter

Android custom spinner with image And Text is a good idea for better user experience.

This tutorial will guide you to make custom spinner with custom adapter.

At the end of the tutorial, you will be able to make fully customize view for the spinner.

Adapter will inflate the custom view for the spinner and for the dropdown menu also.

You can showcase brief information about the items of the spinner using it’s image.

If you want to enhance the quality then spinner with image will give an extra delight to the user.

Step 1. Custom Layout

In this step, we will create layout file that will represent the spinner’s view.

So, make a new layout resource file named spinner_custom_layout.xml

Add below source code in it

As you can see that the above layout file is purely custom and it does not include any default code or UI item.

You can set any UI widget like TextView, ImageView etc. as per your requirements.

Step 2. Add Fruit Images

Because we are making spinners with images, we need to add some images in the drawable folder.

Actually, you should add number of images which is equals to the number of items in the spinners.

Download the fruit images by clicking the below link

Now add these images into res-> drawable folder.

Step 3. Custom Adapter

We need to write custom adapter that will accept our custom layout file.

This adapter will create the custom view for our spinner using that spinner_custom_layout.xml file.

Following source code is for CustomAdapter.java file.

Let us dive deep into this adapter class.

In the Main Activity of this example I have defined two arrays as below

  • First one is the string array which defines the names of the fruits.
  • Second contains the resource id of the drawable images.
  • In the constructor of the adapter, we will pass these two arrays as a parameter.
  • So we will receive them here at the execution of the adapter class.

getView() method from adapter is the most important part of this class. Below is the code for it.

  • getView() method will create a custom view for our spinner.
  • It will inflate the spinner_custom_layout.xml file to create a particular view for the spinner.

After that, compiler will set the name and image of the fruit by using the string (fruit[i]) and integer (images[i]) array respectively.

Step 4. Last Writings

In this last step, you should update the code of your activity_main.xml and MainActivity.java file code

Replace the code of activity_main.xml with the below one

I have taken one spinner in this file.

Copy following code into MainActivity.java file

Explanation of Above Code

Look at the below two lines

  • First line defines the string array. This string array includes the names of the fruits.
  • Second line defines the integer array which includes the resource id of the images which we have inserted in the drawable folder.

  • Above code will first define the object of the adapter class and then compiler will set the adapter to the spinner.
  • We have to pass out string and integer arrays as a parameter when defining the object of the adapter.

After this, our spinner will be populated with images and texts.

To track the on click method of the spinner, read below code

  • Here, I have set the code when the user will select any particular item from the spinner.
  • A toast will be popped up when user selects the item.

This toast contains the position of the item in the spinner and also the name of the selected item.

Look And Feel

Following images shows us how our spinner will look with images and texts.

android custom spinner with image

First Screen

android custom spinner with image

Drop Down

android custom spinner with image

Last View Toast

Download Source Code For Android Custom Spinner With Image

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *