Remove ContainerList margin or padding between elements

Question

Context: J2ME, LWUIT, Nokia S40

I've been struggling with this for the last few days. When using a ContainerList, no matter how much I change the ContainerList or the padding, margin and border of the elements, there is always a 2px margin around each element. I put together this sample midlet to show what I am talking about:

import javax.microedition.midlet.MIDlet;
import javax.microedition.midlet.MIDletStateChangeException;

import com.sun.lwuit.Command;
import com.sun.lwuit.Component;
import com.sun.lwuit.Display;
import com.sun.lwuit.Form;
import com.sun.lwuit.Label;
import com.sun.lwuit.events.ActionEvent;
import com.sun.lwuit.layouts.BoxLayout;
import com.sun.lwuit.list.CellRenderer;
import com.sun.lwuit.list.ContainerList;
import com.sun.lwuit.list.DefaultListModel;

public class Test extends MIDlet {

public Test() {

}

protected void startApp() throws MIDletStateChangeException {
    Display.init(this);

    Form form = new Form("ContainerList margin test");

    DefaultListModel model = new DefaultListModel();
    for(int i=0; i<100; i++){
        model.addItem(new String("Element " + i));
    }

    ContainerList list = new ContainerList(new BoxLayout(BoxLayout.Y_AXIS), model);
    list.getStyle().setBgColor(0x00FF00);
    list.getStyle().setBgTransparency(255);
    list.getStyle().setPadding(0,0,0,0);
    list.getStyle().setMargin(0,0,0,0);
    list.getStyle().setBorder(null);

    list.setRenderer(new CellRenderer(){

        public Component getCellRendererComponent(Component plist,
                Object pmodel, Object pvalue, int index, boolean selected) {

            Label l = new Label((String) pvalue);
            l.getStyle().setBgColor(0xff0000);
            l.getStyle().setBgTransparency(255);
            l.getStyle().setPadding(0,0,0,0);
            l.getStyle().setMargin(0,0,0,0);
            l.getStyle().setBorder(null);
            l.getPressedStyle().setBgColor(0x000000);
            l.getPressedStyle().setBgTransparency(255);
            l.getSelectedStyle().setBgColor(0xFFFFFF);
            l.getSelectedStyle().setBgTransparency(255);

            return l;
        }

        public Component getFocusComponent(Component arg0) {
            Label l2 = new Label();
            l2.getStyle().setBgColor(0xFF00FF);
            l2.getStyle().setBgTransparency(255);
            return l2;
        }

    });

    form.addComponent(list);

    Command exitCommand = new Command("Exit") {

        public void actionPerformed(ActionEvent e) {
            notifyDestroyed();
        }
    };
    form.addCommand(exitCommand);

    form.show();
}

protected void destroyApp(boolean arg0) throws MIDletStateChangeException {

}

protected void pauseApp() {

}

}

Issue #1:

As you can see, I remove the margin, padding and border both on the list itself and on all the elements. However, on the nokia s40 emulator, I always see a 2px margin around all elements.

Have I forgotten any other style that should be changed for this? I've looked at the getSideGap and getBottomGap but they aren't causing the issue.

Issue #2:

How can we highlight the element on press? setting the pressed or selected style made no difference and returning a focus component also made no difference on press. It would be nice to have some touch feedback (I'm only targeting touch devices so focus is not an issue)

Answer 1

There was a bug in padding between entries in the ContainerList in LWUIT which has been fixed for Codename One. Generally container list creates fake entries to match every entry within and they have the default padding/margin. I don't know if there is a workaround since we no longer work on LWUIT and I don't think anyone is seriously maintaining it.

Setting the default padding/margin to 0 might workaround this issue but might also impact everything. I would suggest migrating to Codename One as a more effective strategy.