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

• Modify labelsFont size proeperty.

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:

• On Both Platforms
• LineColor
  Note that, this property takes objects of UI.Color and when error message appears, errorColor will be set for lineColor and it won't be changed until the enableErrorMessage is set to false on Android.
• ErrorColor
• TextColor
• characterRestrictionColor
  Note that, in order to use this property, you need to set characterRestriction to true, in constructor.
• iOS Only
• To change the background color of selection, use the selectedHintTextColor property.

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.