Skip to main content
Version: 7.0.0

MaterialTextBox

API Reference: UI.MaterialTextBox

Material text field with consistent behavior on iOS and Android.

info

For ease of usage and overcome Platform quirks, an utility of MaterialTextbox is created and added as default to the projects. Link can be found below:

MaterialTextBox Utility

Features

  • Material design guidelines compliance
  • Consistent look and feel on iOS and Android
  • Animated state transitions (normal & error)
  • Customizable font size and colors

Example

There is an example down below showing a login scenario.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics
import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin, styleableContainerComponentMixin } from '@smartface/styling-context';
import Color from "@smartface/native/ui/color";
import Application from "@smartface/native/application";
import FlexLayout from "@smartface/native/ui/flexlayout";
import ImageView from "@smartface/native/ui/imageview";
import Button from "@smartface/native/ui/button";
import MaterialTextBox from "@smartface/native/ui/materialtextbox";
import System from "@smartface/native/device/system";
import KeyboardType from "@smartface/native/ui/keyboardtype";


class StyleableButton extends styleableComponentMixin(Button) {}
class StyleableMaterialTextBox extends styleableComponentMixin(MaterialTextBox) {}
class StyleableImageView extends styleableComponentMixin(ImageView) {}
class StyleableFlexLayout extends styleableContainerComponentMixin(FlexLayout) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
flWrapper: StyleableFlexLayout;
imgShow: StyleableImageView;
mtbPassword: StyleableMaterialTextBox;
mtbUsername: StyleableMaterialTextBox;
btnLogin: StyleableButton;
NORMAL_FONT: any = {
font: {
size: 16,
bold: false,
italic: false,
family: "SFProText",
style: "Semibold"
}
};
TB_HEIGHT_ANDROID: number = 85;
isIOS = System.OS === System.OSType.IOS

constructor(private router?: Router, private route?: Route) {
super({});
}

// The page design has been made from the code for better
// showcase purposes. As a best practice, remove this and
// use WYSIWYG editor to style your pages.
centerizeTheChildrenLayout() {
this.dispatch({
type: "updateUserStyle",
userStyle: {
flexProps: {
flexDirection: 'ROW',
justifyContent: 'CENTER',
alignItems: 'CENTER'
}
}
})
}

onShow() {
super.onShow();
Application.statusBar.visible = false;
this.headerBar.visible = false;
}

onLoad() {
super.onLoad();
this.centerizeTheChildrenLayout();

const { TB_HEIGHT_ANDROID, isIOS, NORMAL_FONT } = this;

this.flWrapper = new StyleableFlexLayout();
this.imgShow = new StyleableImageView({
height: 20,
image: "images://smartface.png",
imageFillType: ImageView.FillType.ASPECTFIT
});

this.mtbUsername = new StyleableMaterialTextBox({
hint: "Username",
onActionButtonPress: e => this.mtbPassword.requestFocus()
});

this.mtbUsername.onTextChanged = e => {
// Reset error message
this.mtbUsername.errorMessage = "";
};

this.mtbPassword = new StyleableMaterialTextBox({
hint: "Password",
onActionButtonPress: e => this.mtbPassword.removeFocus()
});
this.mtbPassword.isPassword = true;
this.mtbPassword.onTextChanged = e => {
// Reset error message
this.mtbPassword.errorMessage = "";
};
this.mtbPassword.android.rippleEnabled = true;
this.mtbPassword.android.rippleColor = Color.RED;
this.mtbPassword.rightLayout = { view: this.imgShow, width: 30 };

this.btnLogin = new StyleableButton({
text: "Login",
onPress: (): void => {
// If username or password doesn't exist, show error message
let usernameExists = !!this.mtbUsername.text;
let passwordExists = !!this.mtbPassword.text;
!usernameExists && (this.mtbUsername.errorMessage = "Invalid username");
!passwordExists && (this.mtbPassword.errorMessage = "Invalid password");
}
});

this.mtbUsername.ios.clearButtonEnabled = true;
this.mtbUsername.keyboardType = KeyboardType.android.TEXTSHORTMESSAGE;
this.mtbPassword.ios.clearButtonEnabled = true;


this.addChild(this.flWrapper, "flWrapper", ".sf-flexLayout", {
flexProps: {
alignItems: "CENTER"
},
height: 300
});

let materialtextboxOptions = Object.assign({
width: 200,
font: NORMAL_FONT,
labelsFont: NORMAL_FONT,
borderWidth: 0,
}, isIOS ? {} : { height: TB_HEIGHT_ANDROID });

this.flWrapper.addChild(this.mtbUsername, "mtbUsername", ".sf-textBox", materialtextboxOptions);

this.flWrapper.addChild(this.mtbPassword, "mtbPassword", ".sf-textBox", materialtextboxOptions);

this.flWrapper.addChild(this.btnLogin, "btnLogin", ".sf-button", {
top: 20,
height: 60,
width: 200,
backgroundColor: "#00A1F1"
});
}
}
Height & Width difference
  • If height isn't specified in iOS, it is considered as the minimum height required. Android always requires height.
  • If width isn't specified, looks tight than required in Android and iOS matches it parent width.
  • Recall that you can define OS specific styles using rules with UI Editor.

Adjusting Text Size

There are three labels of the size that can be modified.

Unselected Hint Text

mtbUsername.labelsFont = Font.create(Font.DEFAULT, 22, Font.NORMAL);
//Font size >> 22dpi

The font size used in the Material Textboxes can be set to a specific value through the style.xml file. These changes can be observed in the published app, not on emulator.

<resources>
<style name="SFMaterialTextBoxHintAppearance" parent="TextAppearance.Design.Hint" >
<item name="android:textSize">40dp</item>
</style>
<style name="SFMaterialTextBoxErrorTextAppearance" parent="TextAppearance.Design.Error" >
<item name="android:textSize">10dp</item>
</style>
</resources>

Selected Hint Text Size

  • Modify style.xml file below SFMaterialTextBoxHintAppearance.

Error Text Size

  • Modify style.xml file below SFMaterialTextBoxErrorTextAppearance.

Colors

There are total of 4 main colors of MaterialTextBox

  • Color of text shown in default
  • Color of line under the text where user is able to edit
  • Color of hint which appears at the top
  • Color of the cursor (not changeable for both platforms)

Also 3 different states of MaterialTextBox

  • Default state, when user didn't interact with MaterialTextBox
  • Selected state, when is focused on MaterialTextBox
  • Error state, when errorMessage is shown

Changing Colors

Currently some colors are not changeable on both platforms. Here is what you may change:

Tips & Tricks

  • The Android only property, enableErrorMessage is not mandatory to use, but recommended. Not assigning it may cause unexpected results. Enabling error and counter in initialization time that will draw space for those views. By default disabling error messages causes a little bit bounce, in order to handle must be set enable out of the gate then assign.
  • It is not recommended to use flexGrow on both Android and iOS.
  • To change the keyboard appearance when it is touched on MaterialTextBox, refer here.
Known Issue

Currently there is no way to change font size on Android while using labelsFont property. Any given font size parameter will be ignored.