SpinnerView in android | Custom Spinner view Example | Spinner dropdown style in android |Android Tutorial Code

This is a tutorial about simple spinner which allows to select an item from a drop down menu OR allow to display as "Dialog" .

Simple Spinner:

Spinner As a Dropdown:

OUTPUT:

Here is the implementation of code :

Step 1: Create activity_main.xml file

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

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical" >

<TextView

android:id="@+id/textView1"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:gravity="center"

android:paddingTop="20dp"

android:text="Spinner Dropdown Example "

android:textAppearance="?android:attr/textAppearanceMedium" />

<Spinner

android:id="@+id/spItems"

style="@style/style_Spinner"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_margin="15dp" />

</LinearLayout>

Step 2: Create row_spinner.xml

This is the text item for display spinner item

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

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

android:id="@+id/tvSpinnerData"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ellipsize="end"

android:padding="5dp"

android:singleLine="true"

android:textColor="@android:color/black"

</TextView>

Step 3: Create row_spinners_dropdown.xml

This is the text item for display spinner dropdown item

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

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

android:id="@+id/tvText"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:ellipsize="marquee"

android:singleLine="true"

android:padding="5dp"

android:textColor="@android:color/white"

Step 4: style.xml

-Apply following style to the spinner

<item name="android:background">@drawable/dropdown</item>

<item name="android:dropDownSelector">@android:color/transparent</item>

<item name="android:spinnerMode">dropdown</item>

</style>

Step 5: create MainActivity.java

public class MainActivity extends Activity implements OnItemSelectedListener

{

private Spinner spItems;

ArrayAdapter arrayAdapter;

List<String>listData=new ArrayList<String>();

@Override

protected void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

listData.add("Nexus");

listData.add("iPhone");

listData.add("Nokia");

listData.add("Samsung");

listData.add("HTC");

listData.add("Motorola");

spItems = (Spinner) findViewById(R.id.spItems);

arrayAdapter = new ArrayAdapter(MainActivity.this,R.layout.row_spinner, listData);

arrayAdapter.setDropDownViewResource(R.layout.row_spinners_dropdown);

spItems.setAdapter(arrayAdapter);

spItems.setOnItemSelectedListener(this);

}

@Override

public void onItemSelected(AdapterView<?> parent, View view, int position,long id)

{

Spinner spinner = (Spinner) parent;

if(spinner.getId() == R.id.spItems)

{

String item = parent.getItemAtPosition(position).toString();

Toast.makeText(parent.getContext(), "Selected: " + item, Toast.LENGTH_LONG).show();

}

@Override

public void onNothingSelected(AdapterView<?> parent)

{}

}

Spinner As a Dialog :

Custom spinner:

CustomSpinnerDemo.java

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 CustomSpinnerDemo extends Activity

{

String[] items = {"Android","Google","Apple", "Yahoo"};

String[] subs = {"Android Mobile Application ","Google","Apple", "Yahoo"};

int arr_images[] = {R.drawable.android, R.drawable.google,

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

@Override

public void onCreate(Bundle savedInstanceState)

{

super.onCreate(savedInstanceState);

setContentView(R.layout.main);

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

mySpinner.setAdapter(new MyAdapter(CustomSpinnerDemo.this, R.layout.row, items));

}

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(items[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;

}

main.xml

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

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

android:layout_width="fill_parent"

android:layout_height="fill_parent"

android:background="@drawable/bg_settings"

android:orientation="vertical" >

<Spinner

android:id="@+id/spinner"

android:layout_width="fill_parent"

android:layout_height="wrap_content"

android:layout_marginTop="10dp"

android:drawSelectorOnTop="true"

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

</LinearLayout>

row.xml

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

<TextView

android:id="@+id/company"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginLeft="5dip"

android:layout_marginTop="2dip"

android:layout_toRightOf="@+id/image"

android:padding="3dip"

android:text="Hasmukh Bhadani"

android:textColor="@drawable/red"

android:textStyle="bold" />

<TextView

android:id="@+id/sub"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_below="@+id/company"

android:layout_marginLeft="5dip"

android:layout_toRightOf="@+id/image"

android:padding="2dip"

android:text="Enjoy codes"

android:textColor="@drawable/darkgrey" />

</RelativeLayout>

string.xml

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

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

<string name="prompt">Select your Favourite</string>

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

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

</resources>

Download full sample code from here CustomSpinnerSampleCode

I will be happy if you will provide your feedback or follow this blog. Any suggestion and help will be appreciated.

Thank you :)

Android Tutorial Code

4 May 2012

SpinnerView in android | Custom Spinner view Example | Spinner dropdown style in android

1 comment: