Tuesday, December 14, 2010

Custom Spinner with icon

Refer to the exercise "HelloAndroid with Spinner", it's a basic spinner with default format to display simple text in the spinner. Current exercise is modified to have custom display with icon in the spinner, actually it is Spinner version of another exercise "ListView, with icon".

Custom Spinner with icon

Create a row.xml in /res/layout/. To to setup the layout on each row.
<?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="wrap_content"
android:orientation="horizontal">
<ImageView
android:id="@+id/icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icon"/>
<TextView
android:id="@+id/weekofday"
android:layout_width="wrap_content"
android:layout_height="wrap_content"/>
</LinearLayout>


main.xml layout
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<TextView
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:text="@string/hello"
/>
<Spinner
android:id="@+id/spinner"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
/>
</LinearLayout>


Main Java code, AndroidCustomSpinner.java
package com.exercise.AndroidCustomSpinner;

import android.app.Activity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.Spinner;

public class AndroidCustomSpinner extends Activity {

String[] DayOfWeek = {"Sunday", "Monday", "Tuesday",
"Wednesday", "Thursday", "Friday", "Saturday"};

/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);

Spinner mySpinner = (Spinner)findViewById(R.id.spinner);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
R.layout.row, R.id.weekofday, DayOfWeek);
mySpinner.setAdapter(adapter);
}
}

Download the files.

Related Article:
- Custom ArrayAdapter for Spinner, with different icons

* Please see the article "In-correct arrow icon on Spinner with custom ArrayAdapter"!



4 comments:

Unknown said...

If I want to put different icon for each row how can implement that ?

Erik said...

Hello Jovish,

Pls. refer Custom ArrayAdapter for Spinner, with different icons

letroll said...

hello,
could you help me, I have my spinner with arrow incorrect when I take your code, even though my phone is version 2.3.3 and my application is Build Target of Android 2.2, and android: minSdkVersion = "7", and when I clicked I obtain the following exception :http://pastebin.com/9E4a5qd8

Unknown said...

dialog is taking full screen width can we make it wrap my any way?