Create your own customized spinner control with icon and text

How to create your own customized spinner control with icon and text

In this tutorial we will see how to create your own customized spinner view. In real life application, your UI designer will ask you to put some icon, with text having background etc. So to achieve this, you will need to create your own spinner view.

To achieve this, you will need need to place some icons in your drawable folder - motorola.png, google.png, microsoft.png, apple.png, yahoo.png, samsung.png.

• First step to create an android project. I created with the "CustomerSpinnerDemo" and the package is "com.customspinnerdemo".
• Copy the above mentioned images into res/drawable folder.
• Create the string.xml file with the below content - 

string.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>

    <string name="hello">CustomSpinner Demo</string>

    <string name="prompt">Choose your selection</string>

    <string name="app_name">CustomSpinner Demo</string>

    <drawable name="white">#ffffff</drawable>

    <drawable name="black">#000000</drawable>

    <drawable name="green">#347C2C</drawable>

    <drawable name="pink">#FF00FF</drawable>

    <drawable name="violet">#a020f0</drawable>

    <drawable name="grey">#778899</drawable>

    <drawable name="red">#C11B17</drawable>

    <drawable name="yellow">#FFFF8C</drawable>

    <drawable name="PowderBlue">#b0e0e6</drawable>

    <drawable name="brown">#2F1700</drawable>

    <drawable name="Hotpink">#7D2252</drawable>

    <string name="select_Category">Select Category</string>

    <drawable name="darkgrey">#606060</drawable>

</resources>

• Change the main.xml as follows - 

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    >

<TextView

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:text="@string/hello"

    />

<Spinner

    android:id="@+id/spinner"

    android:layout_width="fill_parent"

    android:layout_height="wrap_content"

    android:drawSelectorOnTop="true"

    android:prompt="@string/prompt"

    />

</LinearLayout>

• Create the row.xml as below under the layout folder - 

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

 android:layout_width="fill_parent"

 android:layout_height="wrap_content"

 android:orientation="vertical"

 android:padding="3dip"

>

    <ImageView

         android:id="@+id/image"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"

         android:src="@drawable/icon"/>

    <TextView

         android:layout_toRightOf="@+id/image"

         android:padding="3dip"

         android:layout_marginTop="2dip"

         android:textColor="@drawable/red"

         android:textStyle="bold"

         android:id="@+id/company"

         android:layout_marginLeft="5dip"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

     <TextView

         android:layout_toRightOf="@+id/image"

         android:padding="2dip"

         android:textColor="@drawable/darkgrey"

         android:layout_marginLeft="5dip"

         android:id="@+id/sub"

         android:layout_below="@+id/company"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

</RelativeLayout>

• Now need to change the main activity class as follows - 

package com.customspinnerdemo;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ArrayAdapter;

import android.widget.ImageView;

import android.widget.Spinner;

import android.widget.TextView;

public class CustomSpinnerDemoActivity extends Activity {

String[] strings = {"Motorola","Google",

            "Microsoft", "Apple", "Yahoo","Samsung"};

    String[] subs = {"Mobile world","Google gives you everything",

            "Microsoft king of windows", "Apple you will love it", "Yahoo still strugling","Samsung good"};

    int arr_images[] = { R.drawable.motorola,

                         R.drawable.google, R.drawable.microsoft,

                         R.drawable.apple, R.drawable.yahoo, R.drawable.samsung}; 

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.main);

        Spinner mySpinner = (Spinner)findViewById(R.id.spinner);

        mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemoActivity.this, R.layout.row, strings));

    }

    public class MyAdapter extends ArrayAdapter{

        public MyAdapter(Context context, int textViewResourceId,   String[] objects) {

            super(context, textViewResourceId, 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) {

            LayoutInflater inflater=getLayoutInflater();

            View row=inflater.inflate(R.layout.row, parent, false);

            TextView label=(TextView)row.findViewById(R.id.company);

            label.setText(strings[position]);

            TextView sub=(TextView)row.findViewById(R.id.sub);

            sub.setText(subs[position]);

            ImageView icon=(ImageView)row.findViewById(R.id.image);

            icon.setImageResource(arr_images[position]);

            return row;

            }

        }

}

• Run the application and you will see the customer spinner control. You  can also attach the selector to change the background color, change the text etc.