CODEWITHSUNDEEP
codenameone
Code with Benji
Code with Benji

Reputation: 715

Codename one TextComponent

trying to use the TextComponent but I failed to style it as shown in the image below;

TextComponent username = new TextComponent().labelAndHint("UserNmae").constraint(TextField.ANY); FontImage.setMaterialIcon(username.getField().getHintLabel(), FontImage.MATERIAL_PERSON);

screenshot

Upvotes: 1

Views: 81

Answers (1)

Shai Almog
Shai Almog

Reputation: 52760

The TextComponent doesn't allow for that particular design at the time. The round border is pretty easy:

TextField {
    border: 1pt solid blue;
    border-radius: 0.5mm;
    padding: 2mm;
}

But the text overlay that sits on the border itself is problematic with the current API. This is probably something that can be enhanced by adding another on-top mode to the TextComponent that would use CENTER_BEHAVIOR_TOTAL_BELOW for the BorderLayout there.

However, at this time we recommend using a slightly different design e.g.:

    TextComponent login = new TextComponent().
            label("Login").
            descriptionMessage("Enter your email").
            constraint(TextArea.EMAILADDR).
            action(MATERIAL_ARROW_FORWARD).
            actionClick(e ->
                    SigninStep2Form.create().show());

The CSS is:

#Constants {
    includeNativeBool: true; 
    scrollVisibleBool: false;
    labelGap: 2;
    textComponentOnTopBool: true;
    textComponentAnimBool: false;
    textCmpVAlignInt: 0;
    textComponentFieldUIID: TextComponentField;
}

Form {
    background: white;
}

TextComponentField {
    background: #EDEDED;
    padding-left: 1mm;
    padding-bottom: 1.5mm;
    padding-top: 0.5mm;
    padding-left: 3mm;
    margin: 0px;
    font-family:  "native:MainRegular";
    font-size: 3mm;
    color: black;
    border: none;
    border-bottom: 0.25mm solid #9a9a9a;
}

InputComponentAction {
    padding: 1mm;
    background: transparent;
    border: none;
}

FloatingHint {
    font-family:  "native:MainRegular";
    font-size: 2mm;
    color: #5e5e5e;
    margin: 0px;
    padding-top: 1.5mm;
    padding-right: 1mm;
    padding-bottom: 0px;
    padding-left: 3mm;
    background: #EDEDED;
    border-top-left-radius: 1mm;
    border-top-right-radius: 1mm;
}

TextComponent {
    background: white;
    border: none;
    padding: 1mm;
    margin: 0px;
}

ErrorLabel {
    padding-top: 0.5mm;
    background: transparent;
    padding-left: 3mm;
}

DescriptionLabel {
    padding-top: 0.5mm;
    padding-left: 3mm;
    background: transparent;
}

The resulting text components look like this:

enter image description here

Upvotes: 1

Related Questions