Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package and import it at the top of your file.
import com.backbase.android.design.product_number.ProductNumberTextView
import com.backbase.android.design.product_number.ProductNumberTextView.ProductNumberAttribute
Usage
Basic usage
Create a ProductNumberTextView to format product numbers with automatic chunking based on the specified product type.
val productNumberView = ProductNumberTextView(context)
productNumberView.productNumberAttribute = ProductNumberAttribute.IBAN
productNumberView.setFormattedText("GB33BUKB20201555555555")
XML usage
Use ProductNumberTextView in XML layouts with custom attributes for product number formatting configuration.
<com.backbase.android.design.product_number.ProductNumberTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:productNumberAttribute="iban"
app:defaultChunkSize="4"
app:chunkedNumberSeparator=" " />
Configuration
|
Parameter |
Type |
Default |
|---|---|---|
|
chunkedNumberSeparator |
String |
Theme default |
|
defaultChunkSize |
Int |
Theme default |
|
productNumberAttribute |
ProductNumberAttribute? |
null |
|
productNumberFormatter |
ProductNumberFormatter |
ThemedProductNumberFormatter |
chunkedNumberSeparator
The chunkedNumberSeparator parameter defines the string used to separate chunks in the formatted product number.
productNumberView.chunkedNumberSeparator = " "
defaultChunkSize
The defaultChunkSize parameter sets the default chunk size when no specific product attribute is configured.
productNumberView.defaultChunkSize = 4
productNumberAttribute
The productNumberAttribute parameter specifies the type of financial product number to determine appropriate formatting rules.
productNumberView.productNumberAttribute = ProductNumberAttribute.CARD_NUMBER
productNumberFormatter
The productNumberFormatter parameter allows custom formatting logic to be applied to product numbers.
val customFormatter = object : ProductNumberTextView.ProductNumberFormatter {
override fun format(attribute: ProductNumberAttribute, number: CharSequence): CharSequence {
return when (attribute) {
ProductNumberAttribute.IBAN -> formatIban(number)
else -> number
}
}
}
productNumberView.productNumberFormatter = customFormatter
Methods
setFormattedText
The setFormattedText method formats and displays the provided text according to the current product number attribute and formatting rules.
productNumberView.setFormattedText("4111111111111111")
Product number attributes
ProductNumberAttribute enum
The ProductNumberAttribute enum defines the supported financial product types:
- IBAN: International Bank Account Number formatting
- BBAN: Basic Bank Account Number formatting
- ACCOUNT_NUMBER: Generic account number formatting
- CARD_NUMBER: Payment card number formatting
// Different product types
productNumberView.productNumberAttribute = ProductNumberAttribute.IBAN
productNumberView.productNumberAttribute = ProductNumberAttribute.BBAN
productNumberView.productNumberAttribute = ProductNumberAttribute.ACCOUNT_NUMBER
productNumberView.productNumberAttribute = ProductNumberAttribute.CARD_NUMBER
Formatting behavior
When a product number attribute is set, the component uses specific formatting rules for that product type. When no attribute is set, it uses the default chunk size and separator.
// Without attribute - uses default chunking
productNumberView.productNumberAttribute = null
productNumberView.setFormattedText("1234567890123456") // Uses defaultChunkSize
// With attribute - uses specific formatting rules
productNumberView.productNumberAttribute = ProductNumberAttribute.IBAN
productNumberView.setFormattedText("GB33BUKB20201555555555") // Uses IBAN-specific formatting
Styling
Theme integration
The component integrates with the design system theme through ThemedProductNumberFormatter:
<com.backbase.android.design.product_number.ProductNumberTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?productNumberTextViewStyle" />
Custom chunk sizes
Different chunk sizes can be configured for different product types through XML attributes:
<com.backbase.android.design.product_number.ProductNumberTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:ibanChunkSize="4"
app:cardNumberChunkSize="4"
app:accountNumberChunkSize="3" />
Design tokens
The ProductNumberTextView component uses design tokens for consistent styling:
- Typography: Inherits MaterialTextView text styling and appearance
- Spacing: Chunk separators follow design system spacing guidelines
- Formatting: Product-specific formatting rules from theme configuration
- Colors: Uses standard text color tokens from the design system
// Component automatically applies design system styling
productNumberView.setTextAppearance(R.style.TextAppearance_Backbase_Body1)