PSD TO APP REVISITED (Material PSD)

Question

I am trying to make a login screen on my app that looks like the city guide login screen (2) here:

I have used the following code for my form that I took from Materiall Design Demo and the blog on PSD To App Revisited blog:

        f = new Form(new BorderLayout());
    f.setUIID("loginForm");
    f.getTitleArea().setUIID("Container");
    f.getToolbar().hideToolbar();
    Label logo = new Label();
    logo.setIcon(theme.getImage("logoHolder.png"));
    Container titleContainer = Container.encloseIn(
            new BorderLayout(BorderLayout.CENTER_BEHAVIOR_CENTER),
            logo, BorderLayout.CENTER);
    titleContainer.setUIID("loginTitleContainer");

    TextField login = new TextField("", "Your email address", 40, TextField.EMAILADDR);
    TextField password = new TextField("", "Your password", 40, TextField.PASSWORD);
    login.getAllStyles().setMargin(LEFT, 0);
    password.getAllStyles().setMargin(LEFT, 0);
    Label loginIcon = new Label("", "TextField");
    Label passwordIcon = new Label("", "TextField");
    loginIcon.getAllStyles().setMargin(RIGHT, 0);
    passwordIcon.getAllStyles().setMargin(RIGHT, 0);
    FontImage.setMaterialIcon(loginIcon, FontImage.MATERIAL_MAIL_OUTLINE, 3);
    FontImage.setMaterialIcon(passwordIcon, FontImage.MATERIAL_LOCK_OUTLINE, 3);

    Button loginButton = new Button();
    loginButton.setIcon(theme.getImage("login_login.png"));
    loginButton.setUIID("removePadding");
    Button exitButton = new Button();
    exitButton.setIcon(theme.getImage("login_exit.png"));
    exitButton.setUIID("removePadding");
    Button forgotButton = new Button("Forgot password?");
    forgotButton.setUIID("forgotPass");

    Label vSpacer = new Label();
    vSpacer.setUIID("longVSpacer");
    Label vSpacer1 = new Label();
    vSpacer1.setUIID("longVSpacer");
    Label vSpacer2 = new Label();
    vSpacer2.setUIID("vSpacer");
    Label vSpacer3 = new Label();
    vSpacer3.setUIID("vSpacer");

    Container loginCon = BoxLayout.encloseY(
            vSpacer1,
            BorderLayout.center(login).
                    add(BorderLayout.WEST, loginIcon),
            BorderLayout.center(password).
                    add(BorderLayout.WEST, passwordIcon),
            vSpacer,
            loginButton,
            vSpacer2,
            exitButton,
            vSpacer3,
            forgotButton
    );

    f.add(BorderLayout.NORTH, titleContainer);
    f.add(BorderLayout.CENTER, loginCon);
    f.show();

Now for the UIIDs "removePadding" has all paddings set to zero and left margin set to 3.

vSpacer(s) have top and bottom margins set in order to allow sensible spaces vertically.

When I don't add the text fields to the box layout, everything works ok but once I add any text field to the box layout the north container shrinks from left and right and it doesn't cover the full width.

But when remove the text fields from the box layout and add a button instead for example the north container covers the full width.

I tried playing with the button UIID "removePadding" paddings and margins but no luck at all.

Here is what my screen looks like when adding the text fields within the border layout along with the icons:

And here is what my screen looks like when I take off the text fields from the box layout and only leave the buttons:

Also, the text fields both have the underline image on the unselected UIID. But the email field doesn't get the underline look when it is unselected and only the password field is underlined when it is unselected. This looks like a bug!!

Dear Shai thank you for your prompt reply. Actually I am not using the variable tf in my layout. I an using login, loginIcon, password and passwordIcon, loginButton, exitButton and forgotButton in my box layout. This box layout ic centered within the form border layout. The problem is when i use the text fields : login and password in the box layout then the centered box layout gets shifted to the right and the north title container gets shrinked from left and right. Please help this is really important for my application!!! Even textfield with no size set will cause same issue when added — salah Alhaddabi
Use the component inspector tool in the simulator to see what is taking up that space. It's not the text fields since they clearly don't stretch there. Since the title area is in the NORTH it should be completely separate from the area related to the text field so it means that something is changing the entire content of the form. From a brief review I suspect this line f.setUIID("loginForm"); — Shai Almog
Happy to help. BTW instead of thanks these would help: codenameone.com/blog/how-you-can-help-spread-codenameone.html also accepting the answers and upvoting would be nice ;-) — Shai Almog

Shai Almog Shai Almog · Accepted Answer · 2017-01-11T04:58:15

Replace:

TextField tf = new TextField("Hello");
tf.setWidth(300);

With:

TextField tf = new TextField("Hello", "", 5, TextField.ANY);

Calling setWidth is always a mistake, the layout manager will resize the UI based on preferred size which is determined at runtime. 300 pixels will be too small on a high DPI phone and too big on a low DPI device. The second form of the constructor accepts a value for the columns property that determines the width of the text field based on character widths (e.g. width of the letter W * 5).

PSD TO APP REVISITED (Material PSD)

1 Answers