Spininner中的SimpleAdapter，Text和Image

Question

I've got a little problem. Well, let me first state what I'm trying to accomplish. I had a spinner that pulls strings out of a stored array. Like so, you don't need to read it though:

ArrayAdapter<?> healthadapter = ArrayAdapter.createFromResource(this, R.array.health, android.R.layout.simple_spinner_item);
mHealthSpin = (Spinner) findViewById(R.id.health_spin);
healthadapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
mHealthSpin.setAdapter(healthadapter);

Simple and almost sufficient. I would like to add an image to the Spinner. the RadioButton is not necessary. So the Spinner should pop up and have a list:

TEXT     *IMAGE*
TEXT2    *IMAGE*
TEXT3    *IMAGE*

So far I've got a custom SimpleAdapter. Here is the Problem!! :

The text comes up but not the image.

Here is the code:

public class stageadapter extends SimpleAdapter {

    private Context localContext;
    private ArrayList<HashMap<String, Object>> localList;

    public stageadapter(Context context, ArrayList<HashMap<String, Object>> list, int resource, String[] from, int[] to) {
        super(context, list, resource, from, to);
        localContext = context;
        localList = list;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        if (null == convertView) {
            LayoutInflater inflater = (LayoutInflater) localContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.stagerow, null);
        }
        TextView name = (TextView) convertView.findViewById(R.id.stage_name);
        name.setText((String) localList.get(position).get("Name"));
        ImageView icon = (ImageView) convertView.findViewById(R.id.stage_icon);

        icon.setImageResource(R.drawable.icon);

        return convertView;
    }

    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        if (null == convertView) {
            LayoutInflater inflater = (LayoutInflater) localContext.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
            convertView = inflater.inflate(R.layout.stagerow, null);
        }
        TextView name = (TextView) convertView.findViewById(R.id.stage_name);
        name.setText((String) localList.get(position).get("Name"));
        ImageView icon = (ImageView) convertView.findViewById(R.id.stage_icon);
        icon.setImageResource(R.drawable.icon);

        return convertView;
    }
}

I plan to use a switch statement to set different images to each name. however I stopped here until I can get any image to show.

How i am calling:

ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
    HashMap<String, Object> map = new HashMap<String, Object>();
    map.put("Name", "One");
    map.put("Icon", R.drawable.icon);
    list.add(map);

    map = new HashMap<String, Object>();
    map.put("Name", "Two");
    map.put("Icon", R.drawable.icon);
    list.add(map);

    mStageSpin = (Spinner) findViewById(R.id.stage_spin);
    stageadapter adapter = new stageadapter(getApplicationContext(), list, R.layout.stagerow, new String[]{"Name", "Icon"}, new int[]{R.id.stage_name, R.id.stage_icon});
    mStageSpin.setAdapter(adapter);

The answer for me is in the comments.

Answer 1

Remove the following line -- its confusing your adapter:

healthadapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.main);

        ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
        HashMap<String, Object> map = new HashMap<String, Object>();
        map.put("Name", "One");
        map.put("Icon", R.drawable.icon);
        list.add(map);

        map = new HashMap<String, Object>();
        map.put("Name", "Two");
        map.put("Icon", R.drawable.icon);
        list.add(map);

        Spinner spin = (Spinner) findViewById(R.id.spin);
        myAdapter adapter = new myAdapter(getApplicationContext(), list,
                R.layout.list_layout, new String[] { "Name", "Icon" },
                new int[] { R.id.name, R.id.icon });

        spin.setAdapter(adapter);

    }

    private class myAdapter extends SimpleAdapter {

        public myAdapter(Context context, List<? extends Map<String, ?>> data,
                int resource, String[] from, int[] to) {
            super(context, data, resource, from, to);

        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {

            if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.list_layout,
                        null);
            }

            HashMap<String, Object> data = (HashMap<String, Object>) getItem(position);

            ((TextView) convertView.findViewById(R.id.name))
                    .setText((String) data.get("Name"));
            ((ImageView) convertView.findViewById(R.id.icon))
                    .setImageResource(R.drawable.icon);

            return convertView;
        }

    }

Answer 2

The problem is in getView you have assigned text corresponding to position using

((TextView) convertView.findViewById(R.id.name)) .setText((String) data.get("Name"));

But for image u have used the same resource ie

((ImageView) convertView.findViewById(R.id.icon)) .setImageResource(R.drawable.icon);

You need to use the "data" hashmap list and assign the image here

Answer 3

Yes @Vicky you are right. For image it should be

((ImageView) convertView.findViewById(R.id.icon)) .setBackgroundResource((Integer) data.get("Icon"));

Answer 4

Based on the above answer, but with a few tweaks to simplify the code and make it work for the dropdown as well. First define the xml for the row layout you want. In this case a textview and a image in a row:

text_image_spinner_layout.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >

<TextView android:id="@+id/text_image_spinner_text_tv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:text="Medium Text"
    android:textAppearance="?android:attr/textAppearanceMedium" />
<ImageView android:id="@+id/text_image_spinner_image_imageview"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_vertical"
    android:src="@drawable/icon" />
</LinearLayout>

Then, create the class that will build each row as needed:

TextImageAdapter.java

public class ImageTextAdapter extends SimpleAdapter {
public final static String keyForTextInAdapter  = "text";
public final static String keyForImageInAdapter = "image";

private final static String fromKeys[]        = {keyForTextInAdapter, keyForImageInAdapter};
private final static int    toIds[]           = {MyR.id.text_image_spinner_text_tv, MyR.id.text_image_spinner_image_imageview};
private final static int    TO_ID_TEXT_INDEX  = 0;
private final static int    TO_ID_IMAGE_INDEX = 1;
private final static int    layoutId          = MyR.layout.text_image_spinner_layout;

private final static int    TYPE_SHOWN_SELECTION = 0;
private final static int    TYPE_IN_DROPDOWN     = 1;

LayoutInflater inflater;
private List<? extends Map<String, ?>> dataIn;

public ImageTextAdapter(Context context, List<? extends Map<String, ?>> data) {
    super(context, data, layoutId, fromKeys, toIds);
    inflater  = LayoutInflater.from(context);
    dataIn    = data;
}

@Override
public View getDropDownView(int position, View convertView, ViewGroup parent) {
    return makeView(position, convertView, parent,TYPE_IN_DROPDOWN);
}

@Override
public View getView(int position, View convertView, ViewGroup parent) {
    return makeView(position, convertView, parent, TYPE_SHOWN_SELECTION);
}

private View makeView(int position, View convertView, ViewGroup parent, int type) {
    // Use the int type if you want to determine different actions if you have
    // differing requirements for the dropdown and the shown selection.
    if (convertView == null) convertView = inflater.inflate(layoutId, null);

    HashMap<String, Object> data = (HashMap<String, Object>)dataIn.get(position);

    ((TextView) convertView.findViewById(toIds[TO_ID_TEXT_INDEX])).setText((String) data.get(keyForTextInAdapter));
    ((ImageView) convertView.findViewById(toIds[TO_ID_IMAGE_INDEX])).setImageBitmap((Bitmap) data.get(keyForImageInAdapter));

    return convertView;
  }
}

And now you just need to build the spinner adapter when instantiating it. You provide the "things" ...:

private void setUpAppOptions() {
    ArrayList<HashMap<String, Object>> list = new ArrayList<HashMap<String, Object>>();
    HashMap<String, Object> map;

    for (int i=0; i<things.length; i++) {
        map = new HashMap<String, Object>();
        map.put(ImageTextAdapter.keyForTextInAdapter, things[i].name);
        map.put(ImageTextAdapter.keyForImageInAdapter, things[i].image);
        list.add(map);
    }

    ImageTextAdapter adapter = new ImageTextAdapter(myContext, list);
    appOptionSpinner.setAdapter(adapter);
}