Import
View-based framework
Add the InputAmountView to your layout file or create it programmatically in your Activity or Fragment.
<!-- Add to your layout file -->
<com.backbase.android.design.amount.input.InputAmountView
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Usage
Basic usage
<!-- Basic input amount with currency -->
<com.backbase.android.design.amount.input.InputAmountView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="0.00"
app:currencyCode="USD"
app:currencyDisplay="symbol" />
Advanced usage
<!-- Input amount with custom configuration -->
<com.backbase.android.design.amount.input.InputAmountView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Enter amount"
app:amount="123.45"
app:currencyCode="EUR"
app:currencyDisplay="iso_code"
app:enableCustomFractions="true"
app:fractionDigits="3"
app:languageTag="en-US"
app:currencyTextAppearance="@style/TextAppearance.Backbase.H4"
app:errorTextColor="@color/error_color" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
app:amount |
String |
null |
|
app:currencyCode |
String |
System default |
|
app:currencyDisplay |
Enum |
symbol |
|
app:currencyFormatter |
String |
CurrencyFormatter.Symbol |
|
app:currencyTextAppearance |
Reference |
@style/TextAppearance_Backbase_H4 |
|
app:enableCustomFractions |
Boolean |
false |
|
app:errorTextColor |
Color |
Theme default |
|
app:fractionDigits |
Integer |
2 |
|
app:languageTag |
String |
System default |
app:amount
The amount that is currently being displayed on the screen. If the entered text cannot be
cast to a BigDecimal it returns null.
<!-- Set initial amount -->
<com.backbase.android.design.amount.input.InputAmountView
app:amount="123.45" />
app:currencyCode
Defines the current Currency. The currency text, and the fraction separator depend on this value.
<!-- Set currency code -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyCode="USD" />
app:currencyDisplay
Currency display mode that controls how the currency is shown.
<!-- Show currency as ISO code -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyDisplay="iso_code" />
<!-- Show currency as symbol -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyDisplay="symbol" />
app:currencyFormatter
Specify a CurrencyFormatter for this view. The currency formatter is in charge of
providing the string that represents the selected currency to the view.
view will try to create the formatter calling a parameterless constructor or treating it
as a Kotlin object.
Use @string/bds_currency_formatter_iso to specify the CurrencyFormatter.Iso by XML
attribute or @string/bds_currency_formatter_symbol for CurrencyFormatter.Symbol.
If no currencyFormatter is specified, the CurrencyFormatter.Symbol will be used as default.
<!-- Use ISO currency formatter -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyFormatter="@string/bds_currency_formatter_iso" />
<!-- Use symbol currency formatter -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyFormatter="@string/bds_currency_formatter_symbol" />
app:currencyTextAppearance
Text appearance for the currency prefix and suffix text.
<!-- Custom currency text appearance -->
<com.backbase.android.design.amount.input.InputAmountView
app:currencyTextAppearance="@style/TextAppearance.Backbase.H3" />
app:enableCustomFractions
Flag that determines if the consumer has allowed using custom digit fractions in the view. If this flag is true, the digit fractions will be equal to digitFractions.
<!-- Enable custom fractions -->
<com.backbase.android.design.amount.input.InputAmountView
app:enableCustomFractions="true" />
app:errorTextColor
Color for error text when validation fails.
<!-- Custom error text color -->
<com.backbase.android.design.amount.input.InputAmountView
app:errorTextColor="@color/custom_error_color" />
app:fractionDigits
Holds the allowed digit fractions for the view. If isCustomDigitFractionsEnabled is true, it returns the value assigned by the consumer or DIGIT_FRACTIONS_DEFAULT if no value was assigned. If isCustomDigitFractionsEnabled is false, it returns the digit fractions based on the selected currency or locale.
<!-- Custom fraction digits -->
<com.backbase.android.design.amount.input.InputAmountView
app:enableCustomFractions="true"
app:fractionDigits="3" />
app:languageTag
Defines the current locale. The supported keys in the keyboard, the currency relative position (if it is a prefix or suffix of the amount), and the fraction separator depend on this value.
<!-- Set specific locale -->
<com.backbase.android.design.amount.input.InputAmountView
app:languageTag="en-US" />
Programmatic usage
Kotlin configuration
// Create and configure InputAmountView programmatically
val inputAmountView = InputAmountView(context).apply {
value = AmountFieldValue(
amount = BigDecimal("123.45"),
currency = Currency.getInstance("USD"),
currencyDisplay = CurrencyDisplay.Symbol,
locale = Locale.getDefault()
)
digitFractions = 2
isCustomDigitFractionsEnabled = false
}
// Add amount change listener
inputAmountView.addOnAmountChangedListener { amount ->
println("Amount changed: $amount")
}
// Set error message
inputAmountView.error = "Invalid amount entered"
// Clear error
inputAmountView.error = null
AmountFieldValue
// Create amount field value
val amountValue = AmountFieldValue(
amount = BigDecimal("99.99"),
currency = Currency.getInstance("EUR"),
currencyDisplay = CurrencyDisplay.IsoCode,
locale = Locale.forLanguageTag("en-GB")
)
inputAmountView.value = amountValue
Events
|
Event |
Type |
Description |
|---|---|---|
|
addOnAmountChangedListener |
(BigDecimal?) -> Unit |
Add a new InputAmountViewListener to the view |
|
removeOnAmountChangedListener |
(BigDecimal?) -> Unit |
Remove the InputAmountViewListener from the list |
// Amount change listener
val amountListener: InputAmountViewListener = { amount ->
println("New amount: $amount")
}
// Add listener
inputAmountView.addOnAmountChangedListener(amountListener)
// Remove listener
inputAmountView.removeOnAmountChangedListener(amountListener)
Accessibility
Accessibility configuration
The component automatically handles accessibility for screen readers with proper amount formatting.
<!-- Accessibility attributes -->
<com.backbase.android.design.amount.input.InputAmountView
android:contentDescription="@string/amount_input_description"
android:importantForAccessibility="yes" />
Best practices
- The component automatically formats amounts for accessibility announcements
- Currency information is included in accessibility descriptions
- Error messages are automatically announced when validation fails
- Use meaningful content descriptions for the overall input purpose
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group inputAmountView:
- currencyTextAppearance: Text appearance for currency display
- errorTextColor: Color for error states
- fractionDigits: Default decimal places for amounts
- textAppearance: Input text styling
- textColor: Default input text color