Codenameone: Alert Dialog message

Question

we want dialog message in this format and look and fill

Can you please let me know how to resolve it. My application needs to be supported on all platforms (Android, iOS, Windows) and I don't want to write native code for all platforms separately.

Answer 1

Actually customizing the look is easier in Codename One as everything is written in Java you can customize literally everything about the look of anything.

For simplicity sake I used code rather than styles which would be better, you can customize the Dialog UIID and other UIID's in the theme designer to get more flexibility and have this easier. However, this would require many screenshots and explanations so I did the customization in code:

Form f = new Form("Test");
Button b = new Button("Show Dialog");
f.add(b);
b.addActionListener(e -> {
    Dialog dlg = new Dialog("Authentication");
    Style dlgStyle = dlg.getDialogStyle();
    dlgStyle.setBorder(Border.createEmpty());
    dlgStyle.setBgTransparency(255);
    dlgStyle.setBgColor(0xffffff);

    Label title = dlg.getTitleComponent();
    title.setIcon(finalDuke.scaledHeight(title.getPreferredH()));
    title.getUnselectedStyle().setFgColor(0xff);
    title.getUnselectedStyle().setAlignment(Component.LEFT);

    dlg.setLayout(BoxLayout.y());
    Label blueLabel = new Label();
    blueLabel.setShowEvenIfBlank(true);
    blueLabel.getUnselectedStyle().setBgColor(0xff);
    blueLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
    blueLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
    dlg.add(blueLabel);
    TextArea ta = new TextArea("This is the text you want to appear in the dialog, this might line break if the text is too long...");
    ta.setEditable(false);
    ta.setUIID("DialogBody");
    ta.getAllStyles().setFgColor(0);
    dlg.add(ta);

    Label grayLabel = new Label();
    grayLabel.setShowEvenIfBlank(true);
    grayLabel.getUnselectedStyle().setBgColor(0xcccccc);
    grayLabel.getUnselectedStyle().setPadding(1, 1, 1, 1);
    grayLabel.getUnselectedStyle().setPaddingUnit(Style.UNIT_TYPE_PIXELS);
    dlg.add(grayLabel);

    Button ok = new Button(new Command("OK"));
    ok.getAllStyles().setBorder(Border.createEmpty());
    ok.getAllStyles().setFgColor(0);
    dlg.add(ok);
    dlg.showDialog();
});
f.show();     

I would recommend doing the dialog customization in the theme designer and using a 9-piece image border which is better looking.