Wednesday, December 26, 2012

13 How to create custom Spinner Control in Android

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.”
Android Custom Spinner Control - Figure 1

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

Android Custom Spinner Control - Figure 2


2.2. When click on the button

Android Custom Spinner Control - Figure 3


You can download all source codes from here
Reference: http://www.coderzheaven.com/2011/07/18/customizing-a-spinner-in-android/

13 comments:

  1. Very nice tutorial…But i want to create rounded corners in my spinner item but it is not showing. I was trying code from this link.
    http://www.bounty4u.com/custom-spinner/

    ReplyDelete
  2. Hi! Thank you very much. really very helpful tutorial.

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Nice post, I bookmark your blog because I found very good information on your blog, Thanks for sharing more information .
    Android App development Manchester & Iphone App Development manchester

    ReplyDelete
  5. how to set height of the overall spinner dropdown list?

    ReplyDelete
  6. i need a spinner if click to spinner so it will open below to set text, i already tried some code it will success in marshmallow, if any possibility for kitkat version???

    ReplyDelete
  7. Almost certainly I’m going to bookmark your blog post . You absolutely come with great well written articles. Thanks a lot for sharing your blog.Android Training institute in chennai with placement | Android Training in chennai

    ReplyDelete
  8. This information is impressive; I am inspired with your post writing style & how continuously you describe this topic. After reading your post, thanks for taking the time to discuss this, I feel happy about it and I love learning more about this topic.
    Android Training in chennai | Android Training|Android Training in chennai with placement | Android Training in velachery

    ReplyDelete
  9. more impressive and informative article, thanks for your valuable information and time. keep rocks.
    Android Training in chennai|Home

    ReplyDelete