Codename One BoxLayout scroll

Question

I am currently writing a simple game in Codename One and I want the user to choose the nation.

I want the nations to be represented as images in a scrollable list.

I have a Container with BoxLayout over X axis, and Buttons with icons inside it.

The problem is that the list items that don't fit in the Container, are being cropped and are not drawn when the should be. Also, the container is not scrollable, when the finger is above undrawn items.

Here is the list

And here how it looks like after scroll

And here is the source:

    final Container cont_nations = new Container(new BoxLayout(BoxLayout.X_AXIS));

    int buttons_width = dim_nation_man.getWidth() * 5;
    cont_nations.setPreferredW(buttons_width + 50);
    cont_nations.setPreferredH(dim_nation_man.getHeight());
    cont_nations.setX(Main.screenWidthHalf - buttons_width / 2);
    cont_nations.setY(choiseImage.getY() + dim_choise.getHeight() + Main.cellSize * 0);
    cont_nations.setScrollSize(new Dimension(man_size * imgName_nations.length, man_size));
    cont_nations.setScrollable(true);
    //cont_nations.setScrollVisible(false);

    addComponent(cont_nations);

    for (int i = 0; i < img_nations.length; i++) {
        final Button btn_nation = new Button(img_nations[i][0].image);

        cont_nations.addComponent(btn_nation);
    }

I understand that I'm doing something wrong. Maybe I should not use Container, or I should fill it with children in another way or use another class for children. But I can't find any information what's wrong.

EDIT

I tried the Shai Almog's suggestion to use setScrollableX() only, but that didn't work as I need. The Container moved to left top corner and is not scrollable.

At first, I need this scroll to be at specific position and to have specific size, so I am using CoordinateLayout for the Container's parent. That's why I'm using setX(), setY(), and setPreferredW() with setPreferredH().

Answer 1

I've done some investigation into BorderLayout and CoordinateLayout source code, but I couldn't find any problems with it. Both of them were calling setWidth() and setHeight() methods for the children properly.

However, I've noticed, that if I place my Container into BorderLayout, the scroll works as needed, so I came to an idea to create a BorderLayout container with my Scrollable Container and place it where it should be.

I still think that there is a bug in CoordinateLayout and I'll try to find it one day.

Now the code looks like this and it works:

final Container borderContainer = new Container(new BorderLayout());
int buttons_width = dim_nation_man.getWidth() * 5;
borderContainer.setX(Main.screenWidthHalf - buttons_width / 2);
borderContainer.setY(choiseImage.getY() + dim_choise.getHeight() + Main.cellSize * 0);
borderContainer.setPreferredW(buttons_width);
borderContainer.setPreferredH(dim_nation_man.getHeight());

addComponent(borderContainer);

final Container cont_nations = new Container(new BoxLayout(BoxLayout.X_AXIS));

cont_nations.setScrollableX(true);
cont_nations.setScrollVisible(false);

borderContainer.addComponent(BorderLayout.CENTER, cont_nations);

for (int i = 0; i < img_nations.length; i++) {
    final Button btn_nation = new Button(img_nations[i][0].image);

    cont_nations.addComponent(btn_nation);
}

Answer 2

Do you want to scroll on the X axis only?

Remove all of this code:

int buttons_width = dim_nation_man.getWidth() * 5;
cont_nations.setPreferredW(buttons_width + 50);
cont_nations.setPreferredH(dim_nation_man.getHeight());
cont_nations.setX(Main.screenWidthHalf - buttons_width / 2);
cont_nations.setY(choiseImage.getY() + dim_choise.getHeight() + Main.cellSize * 0);
cont_nations.setScrollSize(new Dimension(man_size * imgName_nations.length, man_size));
cont_nations.setScrollable(true);

Buttons will be sized based on their icon size so you don't need to touch that. Setting positions won't work since the layout manager will determine that.

Just use:

cont_nations.setScrollableX(true);

Notice the X in the end...

For completeness due to your comments I added a full working example demonstrating this:

    Form hi = new Form("Side Scroll");
    hi.setLayout(new BoxLayout(BoxLayout.Y_AXIS));
    int[] colors = { 0xffff0000, 0xff00ff00, 0xff0000ff, 0xff000000 };
    Container side = new Container(new BoxLayout(BoxLayout.X_AXIS));
    side.setScrollableX(true);
    hi.addComponent(side);
    for(int iter = 0 ; iter < 30 ; iter++) {
        side.addComponent(new Button(Image.createImage(100, 50, colors[iter % colors.length])));
    }
    hi.show();