ListField item background Color

Question

I just want to know how can I change ListField's item background color. I have two items in my ListField like this one.

|First One|Second One.................|

I need to change first one's background color.

My drawListRow(..) method looks like this

public void drawListRow(ListField listField, Graphics graphics, 
                                    int index, int y, int width) {
    int oldColor = 0;
    try {
        oldColor = graphics.getColor();
        String txt = (vector.elementAt(index)).toString();
        int xPos = 15;
        int yPos = 5 + y;

        //graphics.clear();
        graphics.setColor(Color.GREEN);
        graphics.fillRect(0, y, (Display.getWidth()*10/100), yPos);

        graphics.drawText(txt, xPos, yPos);
        //graphics.fillRect(0,(index*Display.getHeight()/10),Display.getWidth(),Display.getHeight()/10);
    } finally {
        graphics.setColor(oldColor);
    }
}

But this is not working.

Answer 1

Though you have attached an image, I am still confused. The image didn't answer some question, for example, how it will look on a row get focused (I didn't understand actually).

But you can check following output and code. I think you can customize the look as you wish if you check the code.

Generated Output

How to use

public class MyScreen extends MainScreen {
    private Vector listElements;

    public MyScreen() {
        setTitle("Custom ListField Demo");

        // data for the ListField
        listElements = new Vector();
        for (int i = 0; i < 4; i++) {
            listElements.addElement("Some text for row " + i);
        }
        ListField taskList = new ListField() {
            // disable default focus drawing
            protected void drawFocus(Graphics graphics, boolean on) {
            };
        };
        taskList.setCallback(new ListCallback(listElements));
        taskList.setSize(listElements.size());
        taskList.setRowHeight(40);
        add(taskList);
    }
}

ListCallback implementation

class ListCallback implements ListFieldCallback {
    final int COLOR_INDEX_NORMAL_BG = 0x1D6789;
    final int COLOR_INDEX_FOCUSED_BG = 0x0E8CB3;
    final int COLOR_NORMAL_BG = 0x2A2A2A;
    final int COLOR_FOCUSED_BG = 0x1F1F1F;

    private Vector listElements;
    public ListCallback(Vector listElements) {
        this.listElements = listElements;
    }

    public void drawListRow(ListField list, Graphics graphics, int index, int y,
            int width) {
        int rowHeight = list.getRowHeight(index);
        boolean isSelectedRow = (list.getSelectedIndex() == index);
        int indexBgColor = isSelectedRow ? COLOR_INDEX_FOCUSED_BG : COLOR_INDEX_NORMAL_BG;
        int rowBgColor = isSelectedRow ? COLOR_FOCUSED_BG : COLOR_NORMAL_BG;

        final int indexWidth = width / 10;

        // draw row background
        fillRectangle(graphics, rowBgColor, 0, y, width, rowHeight);
        // draw index background
        fillRectangle(graphics, indexBgColor, 0, y, indexWidth, rowHeight);

        // set text color, draw text
        Font font = list.getFont();

        graphics.setColor(Color.WHITE );
        graphics.setFont(font);

        String indexText = "" + (index + 1);
        String textToDraw = "";
        try {
            textToDraw = (String) listElements.elementAt(index);
        } catch (Exception exc) {
        }

        int xText = (indexWidth - font.getAdvance(indexText)) / 2;
        int yText = (rowHeight - font.getHeight()) / 2;
        graphics.drawText(indexText, xText, y + yText, 0, indexWidth);

        final int margin = 5;
        int availableWidth = (width - indexWidth) - 2 * margin;
        xText = indexWidth + margin;
        yText = (rowHeight - font.getHeight()) / 2;
        graphics.drawText(textToDraw, xText, y + yText, DrawStyle.ELLIPSIS, availableWidth); 
    }

    private void fillRectangle(Graphics graphics, int color, int x, int y, int width, int height) {
        graphics.setColor(color);
        graphics.fillRect(x, y, width, height);
    }

    public Object get(ListField list, int index) {
        // not implemented
        return "";
    }

    public int indexOfList(ListField list, String prefix, int string) {
        // not implemented
        return 0;
    }

    public int getPreferredWidth(ListField list) {
        return Display.getWidth();
    }
}

Answer 2

Check the edited answer,

    protected void drawFocus(Graphics graphics, boolean on) {
    XYRect focusRect = new XYRect();
    getFocusRect(focusRect);

   boolean oldDrawStyleFocus = graphics.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS);
     try {

if (on) {

        graphics.setDrawingStyle(Graphics.DRAWSTYLE_FOCUS, true);

        int oldColour = Color.BLACK;

     try {

        graphics.fillRect(focusRect.x, focusRect.y,
                              focusRect.width, focusRect.height);
        } finally {
            graphics.setColor(oldColour);
        }
        //to draw the row again
        drawListRow(this, graphics, getSelectedIndex(),
                    focusRect.y, focusRect.width);
    }

} finally {
  graphics.setDrawingStyle(Graphics.DRAWSTYLE_FOCUS, oldDrawStyleFocus);
}

}

Answer 3

If you need to change onFocus Background color than add drwFocus method on your ListField.

protected void drawFocus(Graphics graphics, boolean on) {
        //get the focus rect area
        XYRect focusRect = new XYRect();
        getFocusRect(focusRect);

    boolean oldDrawStyleFocus = graphics.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS);
    try {
        if (on) {
            //set the style so the fields in the row will update its color accordingly
            graphics.setDrawingStyle(Graphics.DRAWSTYLE_FOCUS, true);
            int oldColour = graphics.getColor();
            try {
                graphics.setColor(0xc8d3db); //set the color and draw the color
                graphics.fillRect(focusRect.x, focusRect.y,
                        focusRect.width, focusRect.height);
            } finally {
                graphics.setColor(oldColour);
            }
            //to draw the row again
            drawListRow(this, graphics, getSelectedIndex(),
                    focusRect.y, focusRect.width);
            //              drawRow(graphics, focusRect.x,focusRect.y, focusRect.width,focusRect.height);
        }

    } finally {
        graphics.setDrawingStyle(Graphics.DRAWSTYLE_FOCUS, oldDrawStyleFocus);
    }
}