Wednesday, December 26, 2012

15 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/

15 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
  10. Thank you for your post, I look for such article along time, today i find it finally. this post give me lots of advise it is very useful for me.

    Best Linux training in Noida
    Linux Training Institute in Noida
    Shell Scripting Training Institute in Noida

    ReplyDelete
  11. Needed to compose you a very little word to thank you yet again regarding the nice suggestions you’ve contributed here.

    Best Hadoop training in chennai

    ReplyDelete