Import
View-based framework
import android.content.Context
import com.backbase.android.design.countries.CountrySelector
import com.backbase.android.design.countries.CountrySelectorConfiguration
import com.backbase.android.design.countries.CountrySelectorMode
import com.backbase.android.design.country.provider.CountryFlagProvider
import com.backbase.android.design.country.provider.CountryNameProvider
import com.backbase.android.design.country.provider.CountryPhoneCodeProvider
Basic usage
|
|
// Create flag provider
val flagProvider = BackbaseCountryFlagProvider()
// Create mode
val mode = CountrySelectorMode.PhoneCode(flagProvider)
// Create configuration
val configuration = CountrySelectorConfiguration {
countries = hashSetOf("US", "GB", "DE", "FR")
initialSelection = "US"
}
// Create and show country selector
val countrySelector = CountrySelector(
context = this,
clickListener = { selectedCountryCode ->
// Handle country selection
println("Selected country: $selectedCountryCode")
},
configuration = configuration,
mode = mode
)
countrySelector.show()
Advanced usage
// Create flag provider
val flagProvider = BackbaseCountryFlagProvider()
// Create mode for country code selection
val mode = CountrySelectorMode.CountryCode(flagProvider)
// Create configuration with custom strings
val configuration = CountrySelectorConfiguration {
countries = hashSetOf("US", "GB", "DE", "FR", "ES", "IT")
initialSelection = "US"
countriesScreenTitle = DeferredText.Constant("Choose Your Country")
countriesScreenAllCountriesHeader = DeferredText.Constant("All Countries")
countriesScreenSelectedCountryHeader = DeferredText.Constant("Current Selection")
countryNotFoundTitle = DeferredText.Constant("No Results")
countryNotFoundMessage = DeferredText.Constant("No countries match your search criteria")
}
// Create country selector with custom theme
val countrySelector = CountrySelector(
context = this,
themeResId = R.style.CustomCountrySelectorTheme,
clickListener = { selectedCountryCode ->
// Handle country selection
updateSelectedCountry(selectedCountryCode)
},
configuration = configuration,
mode = mode
)
countrySelector.show()
Configuration
CountrySelector
|
Parameter |
Type |
Default |
|---|---|---|
|
clickListener |
OnCountrySelected |
Required |
|
configuration |
CountrySelectorConfiguration |
CountrySelectorConfiguration { } |
|
context |
Context |
Required |
|
mode |
CountrySelectorMode |
Required |
|
themeResId |
Int |
R.style.Widget_Backbase_PhoneInputView |
clickListener
The clickListener parameter defines the callback function that is invoked when a country is selected. Type alias for (String) -> Unit.
configuration
The configuration parameter provides the configuration object for customizing the Country Selector behavior and appearance.
context
The context parameter provides the Android context required for creating the dialog.
mode
The mode parameter defines how countries are displayed and what information is shown for each country.
themeResId
The themeResId parameter specifies the theme resource ID to apply to the dialog.
CountrySelectorConfiguration
Configuration object for customizing the Country Selector behavior and appearance.
Properties
|
Property |
Type |
Default |
|---|---|---|
|
countries |
HashSet<String> |
WorldCountries |
|
countriesScreenAllCountriesHeader |
DeferredText |
System default |
|
countriesScreenSelectedCountryHeader |
DeferredText |
System default |
|
countriesScreenTitle |
DeferredText |
System default |
|
countryNotFoundMessage |
DeferredText |
System default |
|
countryNotFoundTitle |
DeferredText |
System default |
|
initialSelection |
String |
Empty string |
countries
The set of supported country codes. Uses ISO 3166-1 alpha-2 format.
countriesScreenAllCountriesHeader
The section header for all available countries in the countries list screen.
countriesScreenSelectedCountryHeader
The section header for the selected country in the countries list screen.
countriesScreenTitle
The title for the country selection screen.
countryNotFoundMessage
The message displayed when no countries match the search criteria.
countryNotFoundTitle
The title displayed when no countries match the search criteria.
initialSelection
The initially selected country code.
val configuration = CountrySelectorConfiguration {
countries = hashSetOf("US", "GB", "DE")
initialSelection = "US"
countriesScreenTitle = DeferredText.Constant("Select Country")
}
CountrySelectorMode
Sealed class defining different display modes for the Country Selector.
CountrySelectorMode.PhoneCode
Displays countries with flag, phone code, and country name.
|
|
|
Parameter |
Type |
Default |
|---|---|---|
|
codeProvider |
CountryProvider<String> |
CountryPhoneCodeProvider() |
|
flagProvider |
CountryFlagProvider |
Required |
|
nameProvider |
CountryNameProvider |
CountryNameProvider() |
CountrySelectorMode.CountryCode
Displays countries with flag, country name, and country code.
|
|
|
Parameter |
Type |
Default |
|---|---|---|
|
flagProvider |
CountryFlagProvider |
Required |
|
nameProvider |
CountryNameProvider |
CountryNameProvider() |
// Phone code mode
val phoneCodeMode = CountrySelectorMode.PhoneCode(
flagProvider = flagProvider,
nameProvider = CountryNameProvider(),
codeProvider = CountryPhoneCodeProvider()
)
// Country code mode
val countryCodeMode = CountrySelectorMode.CountryCode(
flagProvider = flagProvider,
nameProvider = CountryNameProvider()
)
Events
|
Event |
Type |
Description |
|---|---|---|
|
clickListener |
OnCountrySelected |
Called when a country is selected from the list |
val countrySelector = CountrySelector(
context = this,
clickListener = { selectedCountryCode ->
// Handle country selection
println("User selected: $selectedCountryCode")
// Update UI or perform other actions
updateSelectedCountry(selectedCountryCode)
},
configuration = configuration,
mode = mode
)
Styling
The Country Selector can be customized using Android themes and styles:
// Apply custom theme
val countrySelector = CountrySelector(
context = this,
themeResId = R.style.Widget_Backbase_PhoneInputView, // Default theme
clickListener = clickListener,
configuration = configuration,
mode = mode
)
The component supports standard Dialog theming attributes for customizing appearance, colors, and typography.
Accessibility
Accessibility configuration
The Country Selector automatically handles accessibility features and does not expose additional accessibility configuration properties. It includes built-in accessibility support:
- Search functionality is accessible via TalkBack
- Country list items are properly labeled with country names
- Navigation elements support accessibility actions
- Content descriptions are automatically provided
Design tokens
Country Selector uses design tokens for consistent theming across the application. The component automatically applies the current theme's color scheme and typography settings through the provided theme resource ID.