46 How to create custom Spinner Control in Android

Tweet

From Developer.android.com: “Spinners provide a quick way to select one value from a set. In the default state, a spinner shows its currently selected value. Touching the spinner displays a dropdown menu with all other available values, from which the user can select a new one.”

In this tutorial, we show you how to customize a spinner with image, text

This project is developed in Eclipse 4.2.0.

1. First make xml main layout for app

<LinearLayout

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

    android:layout_width="match_parent"

    android:layout_height="wrap_content"

    android:orientation="vertical"

    android:gravity="center">

    <Button

        android:id="@+id/button1"

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:layout_marginTop="16dp"

        android:text="Get spinner content"

        android:layout_marginBottom="15dp"

         android:onClick="button_click"/>

   

       <Spinner

        android:id="@+id/spinner1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_alignParentRight="true"

        android:layout_marginBottom="15dp"

        android:prompt="@string/prompt"/>

      

       <TextView android:id="@+id/textView"

         android:layout_width="fill_parent"

         android:layout_height="wrap_content"

         android:textSize="27px"

         android:text="Show spinner choice"

         android:gravity="center"

         android:textColor="#CD2134" 

         android:textStyle="bold"  />

</LinearLayout>

The layout have a button, a spinner and a textview. We’ll custom spinner and when click on the button, the text view will show the content of spinner . All codes show below

package com.example.spinnerwidget;

import android.os.Bundle;

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.Button;

import android.widget.ImageView;

import android.widget.Spinner;

import android.widget.TextView;

public class SpinnerActivity extends Activity {

       // declare three arrays for content of spinner

       String[] strings = {"Inter Milan","AC Milan",

                   "Manchester City", "Barcelona", "Valencia","Juventus"};

        

       String[] subs = {"Italia","Italia",

                   "England", "Spain", "Spain","Italia"};

        

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

                            R.drawable.pic2, R.drawable.pic3,

                            R.drawable.pic4, R.drawable.pic5, R.drawable.pic6};

          

              Button button;

              TextView textview; 

              Spinner spinner;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_spinner);

        button = (Button)findViewById(R.id.button1);

        textview = (TextView)findViewById(R.id.textView);

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

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

    }

    // button onclick

    public void button_click(View view) {

              textview.setText(spinner.getSelectedItem().toString());

       }

    // Adapter class for spinner control

    public class MyAdapter extends ArrayAdapter<String>{

        

        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;

            }

        }

}

Now the layout for each row in the spinner.

<?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/pic1"/>

    <TextView

         android:layout_toRightOf="@+id/image"

         android:layout_marginTop="2dip"

         android:textColor="@drawable/red"

         android:textStyle="bold"

         android:id="@+id/company"

         android:text="Inter Milan"

         android:layout_marginLeft="5dip"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

     <TextView

         android:layout_toRightOf="@+id/image"

         android:padding="1dip"

         android:textColor="@drawable/darkgrey"

         android:layout_marginLeft="5dip"

         android:id="@+id/sub"

         android:layout_below="@+id/company"

         android:text="Italia"

         android:layout_width="wrap_content"

         android:layout_height="wrap_content"/>

</RelativeLayout>

And make some change in strings.xml.

<resources>

    <string name="app_name">spinnerWidget</string>

    <string name="hello_world">Hello world!</string>

    <string name="menu_settings">Settings</string>

    <string name="title_activity_spinner">SpinnerActivity</string>

    <string name="prompt">  Select one Football Club  </string>

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

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

</resources>

2. DEMO

2.1. When click on the spinner

2.2. When click on the button

You can download all source codes from here. 

Reference: http://www.coderzheaven.com/2011/07/18/customizing-a-spinner-in-android/