Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package.
Kotlin
If you need to reference the TextInputView component in your Kotlin code, import it at the top of your file.
import com.backbase.android.design.input.TextInputView
XML
Components work automatically in XML files if the component path matches the installed package.
<com.backbase.android.design.input.TextInputView
android:layout_width="match_parent"
android:layout_height="wrap_content"
... />
Usage
Basic usage
Use TextInputView in XML layouts with a TextInputEditText child view.
<!-- Basic text input with label -->
<com.backbase.android.design.input.TextInputView
android:id="@+id/textInput"
style="@style/Widget.Backbase.TextInputLayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelEnabled="true"
app:labelText="Email Address">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter your email" />
</com.backbase.android.design.input.TextInputView>
Advanced usage
<!-- Text input with custom styling and error handling -->
<com.backbase.android.design.input.TextInputView
android:id="@+id/passwordInput"
style="@style/Widget.Backbase.TextInputLayout.Password"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:labelEnabled="true"
app:labelText="Password"
app:errorEnabled="true"
app:errorIconDrawable="?iconError">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter password"
android:inputType="textPassword" />
</com.backbase.android.design.input.TextInputView>
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
isLabelVisible |
Boolean |
false |
|
labelText |
String? |
null |
isLabelVisible
The isLabelVisible property controls the visibility of the optional label above the text input.
// Show or hide the label
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.isLabelVisible = true
<!-- Show label in XML -->
<com.backbase.android.design.input.TextInputView
app:labelEnabled="true" />
labelText
The labelText property sets the text content of the optional label.
// Set label text in Kotlin
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.labelText = "Email Address"
<!-- Set label text in XML -->
<com.backbase.android.design.input.TextInputView
app:labelText="Email Address" />
Styling
Predefined styles
The TextInputView provides several predefined styles for different use cases.
|
Style |
Description |
Usage |
|---|---|---|
|
Widget.Backbase.TextInputLayout |
Default text input style |
Standard text inputs |
|
Widget.Backbase.TextInputLayout.Password |
Password input style |
Password fields |
|
Widget.Backbase.TextInputLayout.ReadOnly |
Read-only text input style |
Display-only fields |
|
Widget.Backbase.TextInputLayout.TextArea |
Multi-line text input style |
Text areas |
<!-- Different text input styles -->
<com.backbase.android.design.input.TextInputView
style="@style/Widget.Backbase.TextInputLayout.Password"
app:labelText="Password" />
<com.backbase.android.design.input.TextInputView
style="@style/Widget.Backbase.TextInputLayout.ReadOnly"
app:labelText="Account Number" />
<com.backbase.android.design.input.TextInputView
style="@style/Widget.Backbase.TextInputLayout.TextArea"
app:labelText="Comments" />
Custom styling
You can create custom styles by extending the base TextInputLayout styles.
<!-- Custom text input style -->
<style name="Widget.Custom.TextInputLayout" parent="Widget.Backbase.TextInputLayout">
<item name="boxBackgroundColor">?colorInputBackground</item>
<item name="boxCornerRadiusTopStart">?radiusLarge</item>
<item name="boxCornerRadiusTopEnd">?radiusLarge</item>
<item name="boxCornerRadiusBottomStart">?radiusLarge</item>
<item name="boxCornerRadiusBottomEnd">?radiusLarge</item>
<item name="boxStrokeColor">?colorBrand</item>
<item name="boxStrokeWidth">2dp</item>
</style>
States
Error state
Display error messages using the error functionality inherited from TextInputLayout.
// Set error state
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.error = "This field is required"
<!-- Enable error display -->
<com.backbase.android.design.input.TextInputView
app:errorEnabled="true"
app:errorIconDrawable="?iconError" />
Disabled state
Disable the text input using the enabled property.
// Disable text input
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.isEnabled = false
<!-- Disable text input in XML -->
<com.backbase.android.design.input.TextInputView
android:enabled="false" />
Helper text
Display helper text below the text input.
// Set helper text
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.helperText = "Enter your full email address"
<!-- Helper text in XML -->
<com.backbase.android.design.input.TextInputView
app:helperText="Enter your full email address" />
Events
Text changes
Handle text changes through the TextInputEditText child view.
// Handle text changes
val editText = findViewById<TextInputEditText>(R.id.textInputEditText)
editText.addTextChangedListener(object : TextWatcher {
override fun beforeTextChanged(s: CharSequence?, start: Int, count: Int, after: Int) {}
override fun onTextChanged(s: CharSequence?, start: Int, before: Int, count: Int) {
// Handle text change
validateInput(s.toString())
}
override fun afterTextChanged(s: Editable?) {}
})
Focus changes
Handle focus changes using focus listeners.
// Handle focus changes
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.setOnFocusChangeListener { _, hasFocus ->
if (hasFocus) {
// Handle focus gained
clearError()
} else {
// Handle focus lost
validateInput()
}
}
Accessibility
Best practices
- TextInputView extends TextInputLayout which provides standard Android accessibility behavior
- The optional label is properly associated with the text input for screen readers
- Error states are communicated to assistive technologies
// Configure accessibility
val textInputView: TextInputView = findViewById(R.id.textInput)
textInputView.contentDescription = "Email address input field"
Label association
The component automatically associates the label with the text input for accessibility.
Design tokens
The TextInputView uses Material Design theming through styled attributes and can be customized via the global theme.
Theming elements:
- Colors: ?colorInputBackground, ?colorInputBorder, ?colorDanger for styling
- Spacing: ?spacerSmall, ?sizerMedium for padding and margins
- Typography: ?textAppearanceBody1 for text styling
- Layout: Material Design outlined box with configurable corner radius