custom-spinner-android

custom spinner or drop-down in android example

Custom spinner or drop-down in android example

We already learn simple spinner in android.

Honestly speaking client doesn't satisfy with the simple spinner looking ,so we need to customized the spinner in android. Here we use PopupWindow to do that.  Here have three java class

1. CustomSpinnerActivity.java

2. CustomSpinnerAdapter.java

3. CustomSpinnerCollection.java

and xml file

a.  activity_custom_spinner.xml

b.  drop_down_item.xml

c.  pop_up_window.xml

Now We will go to source code.


1. CustomSpinnerActivity.java


 

package com.androidfromhome.customspinner;

import java.util.ArrayList;
import android.app.Activity;
import android.content.Context;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.LinearLayout;
import android.widget.ListAdapter;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.AdapterView.OnItemClickListener;

public class CustomSpinnerActivity extends Activity implements OnClickListener {

    private RelativeLayout relative_layout_spinner;
    private TextView tv_result;
    private PopupWindow popwind;
    private ListView list_drop_down;
    private ListAdapter custom_adapter;

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

    
    public void getSpinner(){    
        
        CustomSpinnerCollection.simple_arr=new ArrayList<CustomSpinnerCollection>();
        
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("1", "One"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("2", "Two"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("3", "Three"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("4", "Four"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("5", "Five"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("6", "Six"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("7", "Seven"));
        CustomSpinnerCollection.simple_arr.add(new CustomSpinnerCollection("8", "Eight"));
        
        relative_layout_spinner= (RelativeLayout)findViewById(R.id.relative_layout_spinner);
        relative_layout_spinner.setOnClickListener(this);
        tv_result=(TextView)findViewById(R.id.tv_result);
        tv_result.setText("No item selected");
        
        
        
    }
    
    
    @SuppressWarnings("deprecation")
    private void getCustomSpinner(){
            LayoutInflater inflater = (LayoutInflater)CustomSpinnerActivity.this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            
            LinearLayout layout = (LinearLayout)inflater.inflate(R.layout.pop_up_window, (ViewGroup)findViewById(R.id.PopUpView));
            
            RelativeLayout layout1 = (RelativeLayout)findViewById(R.id.relative_layout_spinner);
            popwind = new PopupWindow(layout,LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT, true);
            popwind.setBackgroundDrawable(new BitmapDrawable());
            popwind.setTouchable(true);
            
            popwind.setOutsideTouchable(true);
            popwind.setHeight(LayoutParams.WRAP_CONTENT);
            
            popwind.setTouchInterceptor(new OnTouchListener() {
                
                public boolean onTouch(View v, MotionEvent event) {
                    // TODO Auto-generated method stub
                    if (event.getAction() == MotionEvent.ACTION_OUTSIDE) {
                        popwind.dismiss();
                        return true;                    
                    }
                
                    return false;
                }
            });
            
            popwind.setContentView(layout);
            
            popwind.showAsDropDown(layout1);
            
            list_drop_down = (ListView) layout.findViewById(R.id.list_drop_down);
         custom_adapter = new CustomSpinnerAdapter(this, CustomSpinnerCollection.simple_arr,popwind);
            
            list_drop_down.setOnItemClickListener(new OnItemClickListener() {

                @Override
                public void onItemClick(AdapterView<?> arg0, View arg1,
                        int arg2, long arg3) {
                    // TODO Auto-generated method stub
                    
                    CustomSpinnerCollection.SELECTED__SPINNER_INDEX=arg2;
                    CustomSpinnerCollection spinner_collection_obj=CustomSpinnerCollection.simple_arr.get(arg2);
                    String name=spinner_collection_obj.name;
                     String id=spinner_collection_obj.id;
                     tv_result.setText("You have selected "+name);
                    
                    
                    
                    popwind.dismiss();    
                    }
            });
            list_drop_down.setAdapter(custom_adapter);
        }

    @Override
    public void onClick(View v) {
        // TODO Auto-generated method stub
        switch (v.getId()) {
        case R.id.relative_layout_spinner:
            
            if(CustomSpinnerCollection.simple_arr!=null){
                if (CustomSpinnerCollection.simple_arr.size()>0) {
                    getCustomSpinner();
                        
                }    }
            break;

        default:
            break;
        }
        
    }
}


2. CustomSpinnerAdapter.java


 

package com.androidfromhome.customspinner;

import java.util.ArrayList;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class CustomSpinnerAdapter extends BaseAdapter {

    private ArrayList<CustomSpinnerCollection> custom_list;
    private LayoutInflater layoutInflater;
    private ViewHolder holder;
    private static String selected = "";    
    PopupWindow pw;
    
    public static String getSelected() {
        return selected;
    }

    public CustomSpinnerAdapter(Context context, ArrayList<CustomSpinnerCollection> items, PopupWindow pw) {
        this.pw=pw;
        custom_list = new ArrayList<CustomSpinnerCollection>();
        custom_list.clear();
        custom_list.addAll(items);
        layoutInflater = LayoutInflater.from(context);
        
    }

    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return custom_list.size();
    }

    @Override
    public Object getItem(int arg0) {
        // TODO Auto-generated method stub
        return null;
    }

    @Override
    public long getItemId(int arg0) {
        // TODO Auto-generated method stub
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // TODO Auto-generated method stub
    
        if (convertView == null) {
            
            convertView = layoutInflater.inflate(R.layout.drop_down_item, null);
            holder = new ViewHolder();
            holder.tv = (TextView) convertView.findViewById(R.id.tv_dropdown);
            holder.chkbox = (ImageView) convertView.findViewById(R.id.iv_dropdpwn);
            
            
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        
    CustomSpinnerCollection custom_obj=custom_list.get(position);
        holder.tv.setText(custom_obj.name);

    

        if(CustomSpinnerCollection.SELECTED__SPINNER_INDEX==position)
            holder.chkbox.setBackgroundResource(android.R.drawable.radiobutton_on_background);
        else
            holder.chkbox.setBackgroundResource(android.R.drawable.radiobutton_off_background);
        return convertView;
    }

        
    private class ViewHolder {
        TextView tv;
        ImageView chkbox;
    }
    
    
    
    
    public CustomSpinnerCollection setSelected(int position){

        return custom_list.get(position);
            }
}


3. CustomSpinnerCollection.java


package com.androidfromhome.customspinner;

import java.util.ArrayList;

public class CustomSpinnerCollection {

    public static int SELECTED__SPINNER_INDEX = 0;
    public static ArrayList<CustomSpinnerCollection> simple_arr=null;
    public String id="";
    public String name="";
    
    public  CustomSpinnerCollection(String id,String name){
    this.id=id;
    this.name=name;
    }
}


Now source code of xml file

a.  activity_custom_spinner.xml


 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <LinearLayout
        android:id="@+id/LinearLayout2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#A758AB"
        android:gravity="center"
        android:orientation="vertical"
        android:padding="15dp" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="2dp"
            android:text="Android From Home"
            android:textColor="#ffffff"
            android:textSize="22dp"
            android:textStyle="bold" />

    </LinearLayout>

    <TextView
        android:id="@+id/tv_result"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" >

        <RelativeLayout
            android:id="@+id/relative_layout_spinner"
            android:layout_width="match_parent"
            android:layout_height="45dp"
            android:layout_margin="5dp"
            android:background="#6FB35C"
            android:clickable="true"
            android:gravity="center" >

                <TextView
                    android:id="@+id/textView2"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:layout_alignParentLeft="true"
                    android:layout_alignParentTop="true"
                    android:background="#6FB35C"
                    android:gravity="center"
                    android:text="Change"
                    android:textColor="#ffffff"
                    android:textSize="17dp"
                    android:textStyle="bold" />

            </RelativeLayout>
    </LinearLayout>

</LinearLayout>


 

b.  drop_down_item.xml


 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/linearLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <FrameLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="2dp"
        android:padding="4dp" >

        <ImageView
            android:id="@+id/iv_dropdpwn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:focusable="false"
            android:padding="4dp"
            android:visibility="visible" />

    </FrameLayout>

    <TextView
        android:id="@+id/tv_dropdown"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_weight="1"
        android:focusable="false"
        android:padding="4dp"
        android:textColor="#000"
        android:textSize="18dp"
        android:textStyle="bold|italic" />

</LinearLayout>

 


 

c.  pop_up_window.xml


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/PopUpView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#dfdfdf">

    <ListView
        android:id="@+id/list_drop_down"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:cacheColorHint="#00000000"
        android:choiceMode="singleChoice"
        android:divider="#000"
        android:dividerHeight="0.5dp" >

</ListView>
</LinearLayout>


 

 

Download Source Code

 

Related Post:-

Simple Alert Dialog in android

Custom Alert Dialog in android with custom xml layout

ListView in android example

Custom Toast example in android example

 

Comments

Leave a Reply

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

Get Widget