Import
View-based Framework
import com.backbase.android.design.phone.PhoneInputView
Usage
Basic usage
Create a PhoneInputView with default configuration.
val phoneInputView = PhoneInputView(context)
XML usage
<com.backbase.android.design.phone.PhoneInputView
android:id="@+id/phone_input"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Advanced usage
Configure PhoneInputView with custom countries, formatters, and localized text.
val phoneInputView = PhoneInputView(context).apply {
// Set custom countries
countries = hashSetOf("US", "CA", "GB", "AU")
// Configure country selection screen text
countriesScreenTitle = "Select Your Country"
countriesScreenSelectedCountryHeader = "Current Selection"
countriesScreenAllCountriesHeader = "All Available Countries"
// Set phone number constraints
subscriberNumberMaxDigits = 15
phoneNumberInputHint = "Enter your phone number"
// Configure error handling
error = null // Clear any errors
}
XML advanced configuration
<com.backbase.android.design.phone.PhoneInputView
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:countries="@array/supported_countries"
app:countriesScreenTitle="Choose Country"
app:countriesScreenSelectedCountryHeader="Selected"
app:countriesScreenAllCountriesHeader="All Countries"
app:subscriberNumberMaxDigits="15"
app:phoneNumberInputHint="Phone number"
app:countrySelected="US" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
codeDropDownContentDescription |
String |
Localized dropdown description |
|
countries |
HashSet<String> |
WorldCountries |
|
countriesScreenAllCountriesHeader |
String |
Localized "All countries" text |
|
countriesScreenSelectedCountryHeader |
String |
Localized "Selected country" text |
|
countriesScreenTitle |
String |
Localized "Select country" text |
|
countryCode |
String |
"US" or first available country |
|
countryCodeFlagContentDescription |
String |
Localized flag description |
|
countryCodeNumber |
String |
Selected country phone code |
|
countryFlagProvider |
CountryFlagProvider |
Default empty provider |
|
countryNoFoundedMessage |
String |
Localized "No results" message |
|
countryNoFoundedTitle |
String |
Localized "No results" title |
|
dropDownIcon |
Drawable? |
Default dropdown arrow |
|
error |
String? |
null |
|
phoneNumberInputHint |
String |
Localized phone input hint |
|
subscriberNumber |
String |
Empty string |
|
subscriberNumberFormatter |
PhoneFormatter? |
null |
|
subscriberNumberMaxDigits |
Int |
Default max length from resources |
codeDropDownContentDescription
The codeDropDownContentDescription property sets the content description for the country code dropdown icon for accessibility.
phoneInputView.codeDropDownContentDescription = "Select country code"
countries
The countries property defines the supported countries using ISO-3166 alpha-2 codes. Supports list operations for adding and removing countries.
// Set specific countries
phoneInputView.countries = hashSetOf("US", "CA", "MX")
// Add countries
phoneInputView.countries += "GB"
phoneInputView.countries += listOf("DE", "FR", "ES")
// Remove countries
phoneInputView.countries -= "NL"
phoneInputView.countries -= listOf("IT", "PT")
countriesScreenAllCountriesHeader
The countriesScreenAllCountriesHeader property sets the header text for all available countries in the country selection screen.
phoneInputView.countriesScreenAllCountriesHeader = "All Available Countries"
countriesScreenSelectedCountryHeader
The countriesScreenSelectedCountryHeader property sets the header text for the selected country section in the country selection screen.
phoneInputView.countriesScreenSelectedCountryHeader = "Currently Selected"
countriesScreenTitle
The countriesScreenTitle property sets the title text for the country selection screen.
phoneInputView.countriesScreenTitle = "Choose Your Country"
countryCode
The countryCode property gets or sets the currently selected country using ISO-3166 alpha-2 format. Defaults to "US" if available, otherwise the first country in the list.
// Set specific country
phoneInputView.countryCode = "GB"
// Get current country code
val currentCode = phoneInputView.countryCode
countryCodeFlagContentDescription
The countryCodeFlagContentDescription property sets the content description for the country flag image for accessibility.
phoneInputView.countryCodeFlagContentDescription = "Country flag"
countryCodeNumber
The countryCodeNumber property returns the phone code for the currently selected country (e.g., "+1", "+44").
// Get current country phone code
val phoneCode = phoneInputView.countryCodeNumber
countryFlagProvider
The countryFlagProvider property provides flag images for different countries. Set to a custom provider to display country flags.
// Set custom flag provider
phoneInputView.countryFlagProvider = CustomFlagProvider()
// Update specific country flag
phoneInputView.countryFlagProvider["NL"] = DeferredDrawable.Resource(R.drawable.flag_netherlands)
countryNoFoundedMessage
The countryNoFoundedMessage property sets the message text displayed when no countries are found during search.
phoneInputView.countryNoFoundedMessage = "No countries match your search. Please try again."
countryNoFoundedTitle
The countryNoFoundedTitle property sets the title text displayed when no countries are found during search.
phoneInputView.countryNoFoundedTitle = "No Results Found"
dropDownIcon
The dropDownIcon property sets the drawable displayed as the dropdown icon in the country code selection area.
phoneInputView.dropDownIcon = ContextCompat.getDrawable(context, R.drawable.custom_dropdown_icon)
error
The error property sets or clears error messages displayed below the phone number input. Setting to null or blank clears the error.
// Show error message
phoneInputView.error = "Please enter a valid phone number"
// Clear error
phoneInputView.error = null
phoneNumberInputHint
The phoneNumberInputHint property sets the hint text displayed in the phone number input field.
phoneInputView.phoneNumberInputHint = "Enter your mobile number"
subscriberNumber
The subscriberNumber property gets or sets the phone number entered by the user.
// Set phone number
phoneInputView.subscriberNumber = "5551234567"
// Get entered phone number
val phoneNumber = phoneInputView.subscriberNumber
subscriberNumberFormatter
The subscriberNumberFormatter property sets the formatter used to format the entered phone number. Set to null to disable formatting.
// Use Android phone formatter
phoneInputView.subscriberNumberFormatter = AndroidPhoneFormatter
// Use custom formatter
phoneInputView.subscriberNumberFormatter = CustomPhoneFormatter()
// Disable formatting
phoneInputView.subscriberNumberFormatter = null
subscriberNumberMaxDigits
The subscriberNumberMaxDigits property sets the maximum number of digits allowed in the phone number input field.
// Allow up to 15 digits
phoneInputView.subscriberNumberMaxDigits = 15
// Restrict to 10 digits
phoneInputView.subscriberNumberMaxDigits = 10
Styling
XML attributes
The PhoneInputView supports extensive XML configuration through custom attributes.
|
Attribute |
Type |
Description |
|---|---|---|
|
app:codeDropDownContentDescription |
string |
Dropdown icon content description |
|
app:countries |
reference |
String array of country codes |
|
app:countriesFlagProvider |
string |
Flag provider class name |
|
app:countriesScreenAllCountriesHeader |
string |
All countries header text |
|
app:countriesScreenSelectedCountryHeader |
string |
Selected country header text |
|
app:countriesScreenTitle |
string |
Country selection screen title |
|
app:countryCodeFlagContentDescription |
string |
Flag image content description |
|
app:countryNoFoundedMessage |
string |
No results found message |
|
app:countryNoFoundedTitle |
string |
No results found title |
|
app:countrySelected |
string |
Initially selected country code |
|
app:countrySelectedDropDownIcon |
reference |
Custom dropdown icon drawable |
|
app:phoneFormatter |
string |
Phone formatter class name |
|
app:phoneNumberInputHint |
string |
Phone input hint text |
|
app:subscriberNumberMaxDigits |
integer |
Maximum phone number digits |
Custom styling
<com.backbase.android.design.phone.PhoneInputView
android:layout_width="match_parent"
android:layout_height="wrap_content"
style="?attr/phoneInputViewStyle"
app:countries="@array/european_countries"
app:countriesScreenTitle="@string/select_country"
app:countrySelected="DE"
app:subscriberNumberMaxDigits="12"
app:phoneFormatter="@string/custom_phone_formatter"
app:countriesFlagProvider="com.example.CustomFlagProvider" />
States
Normal
The default state where users can select countries and enter phone numbers.
// Component is in normal state by default
phoneInputView.isEnabled = true
phoneInputView.error = null
Error
Applied when validation errors occur and error messages are displayed.
// Show error state
phoneInputView.error = "Invalid phone number format"
Disabled
Applied when the component is disabled and non-interactive.
// Disable the component
phoneInputView.isEnabled = false
Accessibility
Accessibility configuration
|
Property |
Description |
Type |
|---|---|---|
|
codeDropDownContentDescription |
Content description for dropdown icon |
String |
|
countryCodeFlagContentDescription |
Content description for country flag |
String |
Best practices
- Set descriptive content descriptions for flag images and dropdown icons
- Ensure error messages are properly announced to screen readers
- Use appropriate hint text for the phone number input field
- Configure meaningful labels for country selection elements
// Configure accessibility
phoneInputView.countryCodeFlagContentDescription = "Selected country flag"
phoneInputView.codeDropDownContentDescription = "Tap to select country"
phoneInputView.phoneNumberInputHint = "Enter your phone number"
// Error messages are automatically accessible
phoneInputView.error = "Please enter a valid 10-digit phone number"
Design tokens
This component uses design system tokens for consistent theming:
- Color tokens for text, borders, and backgrounds
- Typography tokens for text styling
- Spacing tokens for internal padding and margins
- Shape tokens for input field corner radius
- Elevation tokens for dropdown and modal presentations