How do you make a dropdown list that displays images to the user instead of text?

Question

The ObjectChoiceField field meets all my requirements but it is not pretty.

This is what I have:

String pets[] = {"Dog", "Cat", "Duck" };
ObjectChoiceField dd = new ObjectChoiceField("My Pet",pets,0,ObjectChoiceField.FIELD_LEFT);

But I would prefer to have pictures in the dropdown. My understanding is that the object array must contain objects that support the toString method. There are got to be a way to do I see it in other apps, I just can't find the correct object in the API.

It doesn't have to be an ObjectChoiceField.

Answer 1

I'm not familiar with blackberry development but I guess you could subclass ObjectChoiceField and overwrite the layout(int, int) and the paint(Graphics) methods.

And then in paint(Graphics) maybe use the drawImage(...) method of the passed in Graphics-object to draw the image.

Just a wild guess

Answer 2

If this is a java widget then chances are you can pass simple html as items to display in the choice field (or have toString() return simple html). Then if that's the case and you pass an image URL/relative path the image should display. AFAIK that would work in Swing at least, e.g ...

"< html> Dog < img src="dog.png">< /html>"

(spaces added for the code to show up in preview)

Answer 3

My answer will be along the lines of jitter's response. The general idea for the kind of customizations that you want is to override the default behavior of the basic components.

Suppose, the choices that you want to display can be encapsulated by a class named Choice declared as follows:

private class Choice
{
  public Bitmap image;
  public String label;

  public Choice(String name)
  {
    this.image = Bitmap.getBitmapResource(name + ".png");
    this.label = name;
  }

  public String toString()
  {
    return this.label;
  }
}

then you can declare an ObjectListField instance as:

ObjectChoiceField choice = new ObjectChoiceField()
{      
  protected void paint(Graphics graphics)
  {
    // Get the current selected Choice
    Choice item = (Choice) this.getChoice(getSelectedIndex());

    int xOffset = 5; // 5 px padding on the left
    graphics.drawBitmap(xOffset, 0, 
                        item.image.getWidth(), 
                        item.image.getHeight(), 
                        item.image, 
                        0, 0);
    // Add text after the image and 10px padding.
    xOffset += item.image.getWidth() + 10; 
    graphics.drawText(item.label, xOfffset, 0);
  }            
};

set your choice items as:

choice.setChoices(new Choice[]{ new Choice("choice 1"), new Choice("choice 2")});

and then add it to your Screen (or FieldManager of your choice) using:

add(choice);

I have not been able to override the actual selection pop-up menu items. This seems to call the toString() method of your choice items. That is why I have overriden the default implementation of toString() in the Choice class so that we can display logical names in that pop-up.