Spinner with text and icons

Question

i need to make a spinner with text and icons.. how can i do that? I only now how to put the same icon to all lines of the spinner.. i need to put diferent icons to each line..

Answer 1

This is the main.xml

<?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">
    <Spinner android:id="@+id/spinner"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

This is the textandicon.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <ImageView android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/icon"/>
    <TextView android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ABC"/>
</LinearLayout>

This is the Activity:-

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.BaseAdapter;
import android.widget.Spinner;

public class SpinnerPractice extends Activity {
    Spinner spinner;
    LayoutInflater inflator;

    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        spinner = (Spinner) findViewById(R.id.spinner);
        spinner.setAdapter(new NewAdapter());
        inflator = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    class NewAdapter extends BaseAdapter {

        @Override
        public int getCount() {
            return 26;
        }

        @Override
        public Object getItem(int arg0) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            if (convertView == null) {
                convertView = inflator.inflate(R.layout.textandicon, null);
            }
            return convertView;
        }

    }
}

Hope this helps.

Answer 2

The simple way to do this is to use an ArrayAdapter created using this constructor. The second and third parameters are the ID of the layout of each row (which you can define in a XML file) and respectively the ID of the text field from that layout which can represent your items.

For example you can have a layout defined like this (row.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="wrap_content"
    android:orientation="horizontal">
      <ImageView
          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>

Then you could create your ArrayAdapter like this:

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"};

    @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);
    }
}

Note the call ArrayAdapter<String>(this, R.layout.row, R.id.weekofday, DayOfWeek); which defines the row layout as R.layout.row, the textfield that shows the data R.id.weekofday and the data to the array DayOfWeek.

The only downside to this is that you cannot change the icon for each item... if you want to do that, you want to override the BaseAdapter.getView() to create (or reuse) a view for each row of the spinner in pretty much the same way you would for a ListView. There are literally hundreds of tutorials on how to do that.