Adding icons to each list item in a List

Question

I want to add an icon to each items in a list an image. This is my code for creating list :

    Form f3=new Form("DEMO FORM");
    f3.setScrollable(true);
    f3.setLayout(new BorderLayout());
    f3.setLayout(new BoxLayout(BoxLayout.Y_AXIS));


     String items[] = {"one","two","three","four"};
     DefaultListModel myListModel = new DefaultListModel(items);
     List lst=new List(myListModel);

    f3.addComponent(lst);
    f3.show();

How can I do that?

score 3 · Accepted Answer · answered Jul 30 '11 at 21:39

Use this List Renderer

import com.sun.lwuit.Component;
import com.sun.lwuit.Font;
import com.sun.lwuit.Image;
import com.sun.lwuit.Label;
import com.sun.lwuit.List;
import com.sun.lwuit.list.ListCellRenderer;
import com.sun.lwuit.plaf.Border;
import java.io.IOException;
public class MyListRenderer extends Label implements ListCellRenderer {

    private Image[] images;
    /** Creates a new instance of MyListRenderer */

    public MyListRenderer() {
        super("");
        images = new Image[2];
        try {
            images[0] = Image.createImage("/on.png");
            images[1] = Image.createImage("/off.png");
        } catch (IOException ex) {
            ex.printStackTrace();
        }
    }

    public Component getListCellRendererComponent(List list, Object value, int index, boolean isSelected) {
        setText(value.toString());
        //getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD,Font.SIZE_MEDIUM));
        if (isSelected) {
            setFocus(true);
            setIcon(images[1]);
            getStyle().setBgColor(0xffcc99);
            getStyle().setBgTransparency(55);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xff9900, true));
        } else {
            setFocus(false);
            setIcon(images[0]);
            getStyle().setBgColor(0xffffff);
            getStyle().setFgColor(0x000000);
            getStyle().setBorder(Border.createRoundBorder(15, 15, 0xffcc99, true));
            getStyle().setBgTransparency(255);
        }
        return this;
    }

    public Component getListFocusComponent(List list) {
        setIcon(images[1]);
        setText("");
        getStyle().setBgColor(0x0000ff);//no effect
        setFocus(true);
        getStyle().setBgTransparency(100);
        return this;
    }
}

You can remove unwanted embelishments from this renderer: color changes on focus, etc, ...I have also given code for two different icons for the unselected and selected list item. Then set the renderer of the list like this:

lst.setListCellRenderer(new MyListRenderer());

dear Peter would you tell me how to set diffrent image for each item in a list?? tanx in advance — aida, Aug 08 '11 at 19:59
This would require you to construct a new / customized list; the normal list in lwuit or the j2me list does not give you this feature. I created an extended list that sets icon for each list item -you'll need a renderer to render it though. I cant post the code here in this thread because of space, i tried it, it couldnt fit. Alternatively you can check the fish eye renderer in the lwuit demo. — Peter, Aug 18 '11 at 16:33

score 1 · Answer 2 · answered Jul 28 '11 at 04:47

You need to place the image data in the model or provide some way for the renderer to extract and apply that data. See samples for this in the LWUIT demo where you have both the renderer demo or the Scrolling demo which show off lists that have icons and various entry layouts.

score 0 · Answer 3 · answered Mar 06 '12 at 06:33

I have used newer 'Generic List Cell Renderer' to produce thumbnail(icons) in a list. I found it easier to implement than other options for list rendering. Following link has example code to show how to create list using this technique. http://codenameone.blogspot.in/2011/03/list-rendering-easy-way-generic-list.html

To show thumbnail i did the following which is pretty much boilerplace in LWUIT.

 private Container createGenericRendererContainer() throws IOException {

        Container c = new Container(new BorderLayout());
        c.setUIID("ListRenderer");

        Label xname = new Label("");
        Label description = new Label();
        //create box layout to contain name and description
        Container cnt = new Container(new BoxLayout(BoxLayout.Y_AXIS));
        xname.setName("Name");
        xname.getStyle().setBgTransparency(0);
        xname.getStyle().setFont(Font.createSystemFont(Font.FACE_SYSTEM, Font.STYLE_BOLD, Font.SIZE_MEDIUM));
        description.setFocusable(true);
        description.setName("Description");
        cnt.addComponent(xname);
        cnt.addComponent(description);
        c.addComponent(BorderLayout.CENTER, cnt);
        //thumbail or icon goes here. we add to the left in our borderlayout
        Button thumb = new Button(Image.createImage("/res/home-work.png"));
        c.addComponent(BorderLayout.WEST, thumb);

        return c;

}

Adding icons to each list item in a List

3 Answers3