I have already shown another example of creating custom spinner in android in this post.
That was by extending the ArrayAdapter class, Now it’s using the baseAdapter class.
You all knew that a spinner or combobox is an inbuilt widget in android. And Like any other widgets spinners are also customizable.
Here is a simple example to customize a spinner. First we will look at the java code.
The getView method is called for each row in the spinner. So with the help of an Layout Inflater you can inflate any layout for each row.
At extreme you can have each layout for each row.
Check these older posts about spinner.
1. How to get a selected Item from a spinner in ANDROID?
2. How to set an item selected in Spinner in ANDROID?
3. How to create a custom ListView in android?
4. Customizing a spinner in android.
Check out these of ListViews
Ok We will start.
These are the layouts.
Activity_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:orientation="vertical" > <Spinner android:id="@+id/spinner" android:layout_width="fill_parent" android:layout_height="wrap_content" android:drawSelectorOnTop="true" android:prompt="@string/prompt" /> </LinearLayout>
Now this is the layout for each row in the spinner.
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="CoderzHeaven" 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="Sub " android:textColor="@drawable/darkgrey" /> </RelativeLayout>
Now the object which we are placing in each row in the Spinner.
ListObject.java
package com.coderzheaven.customspinner; public class ListObject { String company, sub; int image_id; public String getCompany() { return company; } public void setCompany(String company) { this.company = company; } public String getSub() { return sub; } public void setSub(String sub) { this.sub = sub; } public int getImage_id() { return image_id; } public void setImage_id(int image_id) { this.image_id = image_id; } public void setAll(int img_id, String title, String sub) { setImage_id(img_id); setCompany(title); setSub(sub); } }
Now the Adapter class that creates each row for the spinner.
MyAdapter.java
package com.coderzheaven.customspinner; import java.util.ArrayList; import android.app.Activity; 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.TextView; public class MyAdapter extends BaseAdapter { Context c; ArrayList<ListObject> objects; public MyAdapter(Context context, ArrayList<ListObject> objects) { super(); this.c = context; this.objects = objects; } @Override public int getCount() { return objects.size(); } @Override public Object getItem(int position) { return objects.get(position); } @Override public long getItemId(int position) { return 0; } public View getView(int position, View convertView, ViewGroup parent) { ListObject cur_obj = objects.get(position); LayoutInflater inflater = ((Activity) c).getLayoutInflater(); View row = inflater.inflate(R.layout.row, parent, false); TextView label = (TextView) row.findViewById(R.id.company); label.setText(cur_obj.getCompany()); TextView sub = (TextView) row.findViewById(R.id.sub); sub.setText(cur_obj.getSub()); ImageView icon = (ImageView) row.findViewById(R.id.image); icon.setImageResource(cur_obj.getImage_id()); return row; } }
Now the activity that ads the spinner and set the values.
MainActivity.java
package com.coderzheaven.customspinner; import java.util.ArrayList; import android.app.Activity; import android.os.Bundle; import android.widget.Spinner; public class MainActivity extends Activity { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); String[] strings = { "CoderzHeaven", "Google", "Microsoft", "Apple", "Yahoo", "Samsung" }; ArrayList<ListObject> objects = new ArrayList<ListObject>(); for (int k = 0; k < strings.length; k++) { ListObject obj = new ListObject(); obj.setAll(R.drawable.ic_launcher, strings[k], "Sub title"); objects.add(obj); } Spinner mySpinner = (Spinner) findViewById(R.id.spinner); mySpinner.setAdapter(new MyAdapter(this, objects)); } }
And at last the manifest file. You may not need it .
AndroidManifest.xml
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.coderzheaven.customspinner" android:versionCode="1" android:versionName="1.0" > <uses-sdk android:minSdkVersion="8" android:targetSdkVersion="15" /> <application android:icon="@drawable/ic_launcher" android:label="@string/app_name" android:theme="@style/AppTheme" > <activity android:name="com.coderzheaven.customspinner.MainActivity" android:label="Custom Spinner" > <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> </manifest>
if i have two custom spinners can i populate second spinner based on the value in first spinner? where both spinners are using the same custom class
sure, no problem add the second spinner elements in the click on the first spinner.