Customizing a spinner in android.

By | July 18, 2011

Hello everyone………

You all knew that a spinner or combobox is an inbuilt widget in android. And Like any other widgets spinners are also customizable.

Custom Spinner in Android

Here is a simple example to customize a spinner. First we will look at the java code.
The getView method is called for each row in the spinner. So with the help of an Layout Inflater you can inflate any layout for each row.
At extreme you can have each layout for each row.

Check these older posts about spinner.

1. How to get a selected Item from a spinner in ANDROID?

2. How to set an item selected in Spinner in ANDROID?

3. How to create a custom ListView in android?

Check out these of ListViews

1. Simplest Lazy Loading ListView Example in Android with data populated from a MySQL database using php.

2. How to add checkboxes and radio buttons to ListView in android? OR How to set single choice items in a ListView in android?

Infolinks

Now we will look at the source code

MyCustom Object for the Spinner..

package com.coderzheaven.customspinner;

public class ListItem {
    String name, place;
    int logo;

    public void setData(String name, String place, int logo) {
        this.name = name;
        this.place = place;
        this.logo = logo;
    }
}

CustomAdapter for the Spinner.

package com.coderzheaven.customspinner;

import android.app.Activity;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class MyAdapter extends ArrayAdapter<ListItem> {

    LayoutInflater inflater;
    ArrayList<ListItem> objects;
    ViewHolder holder = null;

    public MyAdapter(Context context, int textViewResourceId, ArrayList<ListItem> objects) {
        super(context, textViewResourceId, objects);
        inflater = ((Activity) context).getLayoutInflater();
        this.objects = objects;
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }

    public View getCustomView(int position, View convertView, ViewGroup parent) {

        ListItem listItem = objects.get(position);
        View row = convertView;

        if (null == row) {
            holder = new ViewHolder();
            row = inflater.inflate(R.layout.row, parent, false);
            holder.name = (TextView) row.findViewById(R.id.name);
            holder.place = (TextView) row.findViewById(R.id.place);
            holder.imgThumb = (ImageView) row.findViewById(R.id.imgThumb);
            row.setTag(holder);
        } else {
            holder = (ViewHolder) row.getTag();
        }

        holder.name.setText(listItem.name);
        holder.place.setText(listItem.place);
        holder.imgThumb.setBackgroundResource(listItem.logo);

        return row;
    }

    static class ViewHolder {
        TextView name, place;
        ImageView imgThumb;
    }
}

Layout for the Spinner Row

row.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:padding="10dip">

    <ImageView
        android:id="@+id/imgThumb"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:background="@drawable/google" />

    <TextView
        android:id="@+id/name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dip"
        android:layout_marginTop="2dip"
        android:layout_toRightOf="@+id/imgThumb"
        android:padding="3dip"
        android:text="CoderzHeaven"
        android:textColor="@android:color/holo_red_dark"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/place"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/name"
        android:layout_marginLeft="5dip"
        android:layout_toRightOf="@+id/imgThumb"
        android:padding="2dip"
        android:text="Heaven of all working codes"
        android:textColor="@android:color/darker_gray" />
</RelativeLayout>

MainActivity

package com.coderzheaven.customspinner;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Spinner;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Spinner mySpinner = (Spinner) findViewById(R.id.spinner);
        mySpinner.setAdapter(new MyAdapter(this, R.layout.row, getAllList()));
    }

    public ArrayList<ListItem> getAllList() {

        ArrayList<ListItem> allList = new ArrayList<ListItem>();

        ListItem item = new ListItem();
        item.setData("Google", "USA", R.drawable.google);
        allList.add(item);

        item = new ListItem();
        item.setData("Apple", "USA", R.drawable.apple);
        allList.add(item);

        item = new ListItem();
        item.setData("Samsung", "Korea", R.drawable.samsung);
        allList.add(item);

        item = new ListItem();
        item.setData("Sony", "Japan", R.drawable.sony);
        allList.add(item);

        item = new ListItem();
        item.setData("HTC", "Taiwan", R.drawable.htc);
        allList.add(item);

        for (int i = 0; i < 10000; i++) {
            item = new ListItem();
            item.setData("Google " + i, "USA " + i, R.drawable.google);
            allList.add(item);
        }

        return allList;
    }
}

You can download the complete Android Studio Source Code from here.

23 thoughts on “Customizing a spinner in android.

  1. kamal

    good tutorial, I would like to ask one question that, how to display the spinner list View just below the spinner and making it’s width smaller. thank you.

    Reply
  2. David

    Hello, I have been trying to do something like this for some time now. All teh samples I look at seem to be missing something (or don’t explain it well). Your example has been the most complete, but I am still having problems.

    lines 30 and 52 have .row highlighted.
    my suggested corrections are to create field row in type layout, or create constant row in type layout.

    Any ideas? No other errors listed elsewhere.

    I tried renaming spinner.row.xml to spinnerrow.xml and changing .row to spinnerrow on lines 30 and 52, but that didnt work.

    I tried

    Reply
    1. James Post author

      Hey mart :- If you dont want to show the first option when the spinner is not expanded then make your array of strings with a blank field in the first index. Is that you want or anything else. please explain.
      Or call this
      mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemo.this, R.layout.row, strings));
      when your spinner expands to reset it’s data with your choice in the first index of the string array when it expands.

      Reply
  3. Arefin

    Hi, I was wondering if you could explain this span thing.
    package pack.coderzheaven;

    I am new to this kind of thing. Since I am not aware of span, I also could not complete the tutorial because of errors. Please do mention what alternatives can be used instead.
    Thanks

    Reply
    1. James Post author

      Sorry, that’s the problem with my syntax highlighter. please remove those HTML span tags and proceed.

      Reply
  4. Rash

    How can i use custom font(such as Bangla,Hindi….) in spinner text …?

    Reply
  5. vaishali

    how to do the same thing using sqlite. i mean if i have to fetch these values from database, in that case how it will be done?

    Reply
  6. luke

    what if i want the items on spinner to take me to another activity, please write the code, ive tried everything

    Reply
    1. James Post author

      just write an onItemSelected Listener for the spinner and inside that call the startActivity.

      Reply
  7. Pingback: Only images in a spinner : Android Community - For Application Development

  8. Pingback: ImageView in Spinner items : Android Community - For Application Development

  9. ali

    hello,
    great job
    its woriking perfectly. but how can i get the String[] strings from the string,.xml in value folder for translation?
    i tried to do it with getResource.getString(R.array.something)
    but the app is crashing.
    what to do please help.
    thanks in advance

    Reply
  10. bedirhan

    hey thats a very good tutorial.ı am new on android and ı need the add image to spinner but ı cant do this.ı already have spinner and add some items in it.would you make a tutorial video about that cause ı barely understand.

    Reply
  11. Rachit Kalra

    Hey thanks for the help , gave me a quick walk through and general how adapter api’s wrk (y)

    Reply
  12. Samir Samedov

    Thank you worked pretty well. Just added setters and getters to ListItem fields and called them getName() getLogo()

    Reply

Leave a Reply to Arefin Cancel reply

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