How to implement Steps progress bar in Codenameone?

Viewed 17
1 Answers

You can just use toggle buttons to represent every step in either box or flow layout. Roughly something like this (didn't test it):

public Container createSteps(String[] labels, ActionListener[] actions) {
    Container cnt = new Container(BoxLayout.x();
    CheckBox[] steps = new CheckBox[labels.length];
    for(int iter = 0 ; iter < steps.length ; iter++) {
        steps[iter] = CheckBox.createToggle(labels[iter]);
        steps[iter].setTextPosition(BOTTOM);
        steps[iter].setMaterialIcon(FontImage.MATERIAL_CHECK_CIRCLE);
        steps[iter].addActionListener(actions[iter]);
        steps[iter].addActionListener(e -> {
           for(int x = 0 ; x < steps.length ; x++) {
               if(x != iter) {
                   steps[x].setSelected(x < iter);
               }
           }
        });
        if(iter > 0 && iter < steps.length - 1) {
           cnt.add(new Label("---"));
        }
        cnt.add(steps[iter]);
    }
    return cnt;
}

You can determine the color via styling on the pressed and default styling. You can also have the loop above customize things like different icons for every stage.

Related