add space between two images in container in codenameone

Viewed 72

I am trying to add 6 images in container, but the gap between two images is large as shown in fig below. I tried this code.

class TestPallet extends Container {

    TestIcon firstIcon;
    TestIcon secondIcn;
    TestIcon thirdIcn;
    TestIcon fourIcn;


    Container panel;

    public TestPallet() {
        super();
        panel= new Container();
        panel.getStyle().setBgColor(0x323232);
        panel.getStyle().setBgTransparency(255);
        panel.setLayout(new BoxLayout(BoxLayout.X_AXIS));
        panel.getStyle().setBorder(Border.createLineBorder(2, 0xffffff));
        panel.getStyle().setPadding(10, 10,10,10);
        panel.getStyle().setMargin(50, 10, 10, 10);
        panel.setSelectedStyle(panel.getStyle());

        Container row1 = new Container();
        row1.setLayout(new BoxLayout(BoxLayout.X_AXIS));

        int margin = Display.getInstance().convertToPixels(1, true);


        firstIcon = new ShapeIcon(1, this);
        panel.addComponent(firstIcon);

        secondIcn = new ShapeIcon(2, this);
        panel.addComponent(secondIcn);


        thirdIcn = new ShapeIcon(3, this);
        panel.addComponent(thirdIcn);

        fourIcn = new ShapeIcon(4, this);
        panel.addComponent(fourIcn);

        addComponent(panel);

    }
}
class TestIcon extends Container{

    boolean selected=false;
    ShapePallet pallet;
    int t;

    public TestIcon(int s, ShapePallet sp) {
        super();
        pallet=sp;
        t=s;
        getStyle().setBgTransparency(0);
        getStyle().setBgColor(0xdcdcdc);
        this.setSelectedStyle(this.getStyle());
        setFocusable(true);

    }

    @Override
    public void paint(Graphics g) {

        int size = Display.getInstance().convertToPixels(2, false);

        Image im= null;

        if(t==1) {
            size *= 2;
            im = DisplayManager.getWmUiBuilder().getResources().getImage("image1.png").scaled(size, size);

        }

        else if(t== 2) {
            size *= 2;
            im = DisplayManager.getWmUiBuilder().getResources().getImage("image2.png").scaled(size, size );

        }

        else if(t== 3) {
            size *= 2;
            im = DisplayManager.getWmUiBuilder().getResources().getImage("image3.png").scaled(size, size);

        }

        else if(t== 4) {
            size *= 2;
            im = DisplayManager.getWmUiBuilder().getResources().getImage("image4.png").scaled(size, size);

        }

    g.drawImage(im,getX() + ((getWidth() - im.getWidth())) / 2, getY() + ((getHeight() - im.getHeight()) / 2));

    }

}

enter image description here

As you can see from image, the space between two images is too large, and this is from iPad, on Iphone I can see only two images. In this case also, one image is missing. So, how to reduce the gap between two images? Any answers on this will be helpful. Thanks

1 Answers

I would suggest using styles.

You need to set the padding/margin units as well, ideally use millimeters and set the numbers to lower values. E.g. setPaddingUnit/setMarginUnit to either Style.UNIT_TYPE_PIXELS or Style.UNIT_TYPE_DIPS.

A better approach would be using gridlayout which will evenly space the components within it.

Related