Codename one TextComponent - codenameone

Question

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);

Answer 1

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: