How to customize listfield items?

Question

I am new to Blackberry development.My application contain five list items having strings each item.My requirement is when one cell is selected it should enlarge and other items adjust space automatically among them. I took two types of images for list items one for general view and one for displaying the selected item when user clicked on it which is of more height than previous.

But the problem is when I selected one item it is enlarging and overlapped on the next item and is not displaying full item and not adjusting the space among them. can anyone give me the solution for this. I am using the following code snippet....

_listField.setCallback(this);
    _listField.setRowHeight(45);
    _listField.setChangeListener(this);

public void drawListRow(ListField arg0, Graphics graphics, int index, int y, int width) {

    if (listFieldIndex != index) {

        graphics.drawBitmap(0, y, listBkgrnd.getWidth(), listBkgrnd
                .getHeight(), listBkgrnd, 0, 0);

        graphics.setColor(0xAA0000);
        graphics.setFont(this.getFont().derive(Font.BOLD, 17));
        graphics.drawText(((Station) _stationList.elementAt(index))
                .getStationName(), 15, y + 15, 0,
                (listBkgrnd.getWidth() - 70));

        graphics.setColor(0x770000);
        graphics.setFont(this.getFont().derive(Font.PLAIN, 13));

        // graphics.drawText(
        // ((Station) _stationList.elementAt(index)).getCT(), 15,
        // y + 40, 0, (listBkgrnd.getWidth() - 65));

    } else {

        graphics.drawBitmap(0, y, playBkgrnd.getWidth(), playBkgrnd
                .getHeight(), playBkgrnd, 0, 0);

        graphics.setColor(0xAA0000);
        graphics.setFont(this.getFont().derive(Font.BOLD, 17));
        graphics.drawText(((Station) _stationList.elementAt(index))
                .getStationName(), 15, y + 15, 0,
                (playBkgrnd.getWidth() - 70));

        graphics.setColor(0x770000);
        graphics.setFont(this.getFont().derive(Font.PLAIN, 13));

        graphics.drawText(
                    s.getCT(), 15,
                    y + 40, 0, (playBkgrnd.getWidth() - 65));
    }
}

Answer 1

List fields on BlackBerry assume that all rows are the same height.

To get the kind of effect you want, use a bunch of selectable fields in a VerticalFieldManager, you'll get a similar effect to a ListField. Be sure to make your items focusable, and call updateLayout whenever they gain or lose focus, then in your layout method, set the field's height according to whether or not it's focused. Something like the following outline:

public class CustomListFieldItem extends Field {

    public boolean isFocusable() {
        return true;
    }

    protected void onFocus(int direction) {
        super.onFocus(direction);
        updateLayout();
    }

    protected void onUnfocus() {
        super.onUnfocus();
        updateLayout();
    }

    protected void layout(int width, int height) {
        if (isFocus()) {
            setExtent(width, playBkgrnd.getHeight());
        }
        else {
            setExtent(width, listBkgrnd.getHeight());
        }

    }

    protected void paint(Graphics graphics) {
        if (isFocus()) {
            // draw selected item
        }
        else {
            // draw unselected item
        }
    }

}