Import
Kotlin
If you need to reference the AddressPreview component in your Kotlin code, make sure to properly import it on top of your file using the path below.
import com.backbase.android.design.address_preview.AddressPreview
XML
As long as you've properly installed and set up Backbase Design System in your project, you don't need to import components from those packages in your XML files anymore—they'll work automatically if the component path matches the installed package.
<com.backbase.android.design.address_preview.AddressPreview
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Usage
Basic usage
Create an AddressPreview instance with default configuration.
|
|
<!-- Basic address preview with default styling -->
<com.backbase.android.design.address_preview.AddressPreview
android:id="@+id/addressPreview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:previewTitle="Bank address"
app:previewHint="(Optional)" />
Advanced usage
<!-- Address preview with custom styling and error handling -->
<com.backbase.android.design.address_preview.AddressPreview
android:id="@+id/addressPreview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:previewTitle="Bank address"
app:previewHint="(Optional)"
app:leadingIcon="@drawable/backbase_ic_location_city"
app:trailingIcon="@drawable/backbase_ic_add"
app:errorMessage="Bank address is required"
app:enabled="true" />
Configuration
XML attributes
|
Attribute |
Type |
Default |
|---|---|---|
|
addressTextAppearance |
reference |
R.style.Widget_Backbase_AddressPreview_Address |
|
enabled |
boolean |
true |
|
errorMessage |
string |
"" |
|
errorTextAppearance |
reference |
R.style.Widget_Backbase_AddressPreview_Error |
|
hintTextAppearance |
reference |
R.style.TextAppearance_Backbase_AddressPreview_Hint |
|
leadingIcon |
reference |
R.attr.iconLocationCity |
|
previewHint |
string |
"" |
|
previewTitle |
string |
"" |
|
titleTextAppearance |
reference |
R.style.TextAppearance_Backbase_AddressPreview_Title |
|
trailingIcon |
reference |
R.attr.iconAdd |
Kotlin properties
|
Property |
Type |
Default |
|---|---|---|
|
address |
String |
EMPTY_STRING |
|
addressTextAppearance |
Int |
R.style.Widget_Backbase_AddressPreview_Address |
|
errorMessage |
String |
EMPTY_STRING |
|
errorTextAppearance |
Int |
R.style.Widget_Backbase_AddressPreview_Error |
|
hint |
String |
EMPTY_STRING |
|
hintTextAppearance |
Int |
R.style.TextAppearance_Backbase_AddressPreview_Hint |
|
leadingIcon |
Drawable? |
null |
|
onClick |
(() -> Unit) |
{ } |
|
title |
String |
EMPTY_STRING |
|
titleTextAppearance |
Int |
R.style.TextAppearance_Backbase_AddressPreview_Title |
|
trailingIcon |
Drawable? |
null |
address
The address property displays the address text in the AddressPreview component.
// Set address text
addressPreview.address = "10 10th St Ne, Atlanta, GA 30309, United States"
addressTextAppearance
The addressTextAppearance property sets the text appearance for the address text.
// Set address text appearance
addressPreview.addressTextAppearance = R.style.Widget_Backbase_AddressPreview_Address
errorMessage
The errorMessage property sets the error message that appears below the AddressPreview component.
// Set error message
addressPreview.errorMessage = "Bank address is required"
errorTextAppearance
The errorTextAppearance property sets the text appearance for the error message.
// Set error text appearance
addressPreview.errorTextAppearance = R.style.Widget_Backbase_AddressPreview_Error
hint
The hint property sets the hint text that appears next to the title.
// Set hint text
addressPreview.hint = "(Optional)"
hintTextAppearance
The hintTextAppearance property sets the text appearance for the hint text.
// Set hint text appearance
addressPreview.hintTextAppearance = R.style.TextAppearance_Backbase_AddressPreview_Hint
leadingIcon
The leadingIcon property sets the leading icon drawable for the AddressPreview component.
// Set leading icon
addressPreview.leadingIcon = DeferredDrawable.Resource(R.drawable.backbase_ic_location_city).resolve(requireContext())
onClick
The onClick property sets the click listener for the AddressPreview component.
// Set click listener
addressPreview.onClick = {
println("Address preview clicked!")
}
title
The title property sets the title text for the AddressPreview component.
// Set title
addressPreview.title = "Bank address"
titleTextAppearance
The titleTextAppearance property sets the text appearance for the title text.
// Set title text appearance
addressPreview.titleTextAppearance = R.style.TextAppearance_Backbase_AddressPreview_Title
trailingIcon
The trailingIcon property sets the trailing icon drawable for the AddressPreview component.
// Set trailing icon
addressPreview.trailingIcon = DeferredDrawable.Resource(R.drawable.backbase_ic_add).resolve(requireContext())
Styling
Predefined styles
The AddressPreview component provides several predefined styles that can be applied through XML attributes.
<!-- Apply predefined style -->
<com.backbase.android.design.address_preview.AddressPreview
style="?addressPreviewStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
Custom styling
You can customize the appearance using text appearance attributes and drawable resources.
<!-- Custom styled address preview -->
<com.backbase.android.design.address_preview.AddressPreview
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:previewTitle="Bank address"
app:previewHint="(Optional)"
app:titleTextAppearance="@style/CustomTitleStyle"
app:hintTextAppearance="@style/CustomHintStyle"
app:addressTextAppearance="@style/CustomAddressStyle"
app:errorTextAppearance="@style/CustomErrorStyle" />
States
Error state
Display error messages and apply error styling.
// Set error state
addressPreview.errorMessage = "Bank address is required"
Clear error
Remove error state and return to normal styling.
// Clear error state
addressPreview.clearError()
Disabled state
Disable user interaction and reduce alpha.
// Disable address preview
addressPreview.isEnabled = false
Filled state
Display address content with custom trailing icon.
// Filled state with edit icon
addressPreview.address = "10 10th St Ne, Atlanta, GA 30309, United States"
addressPreview.trailingIcon = DeferredDrawable.Resource(R.drawable.backbase_ic_edit).resolve(requireContext())
Events
|
Method |
Description |
|---|---|
|
clearError() |
Clears the error message and returns to normal styling |
Click events
The onClick property is triggered whenever the user taps on an AddressPreview instance.
// Handle click events
addressPreview.onClick = {
println("Address preview clicked!")
// Navigate to address selection
}
clearError
The clearError() method removes the error state and returns the AddressPreview to normal styling.
// Clear error state
addressPreview.clearError()
Accessibility
Best practices
- AddressPreview automatically provides accessibility behavior through its click listener
- The component includes proper accessibility identifiers for all subviews
- Error states are communicated to screen readers via the error message
// Configure accessibility
addressPreview.contentDescription = "Bank address selection"
addressPreview.accessibilityHint = "Tap to select or edit address"
Design tokens
Component styling is applied automatically through the design system's theming infrastructure using style resources and design tokens.
Token integration:
- Icons: R.attr.iconLocationCity and R.attr.iconAdd for default icons
- Text appearances: Predefined text appearance styles for title, hint, address, and error text
- Colors: Integrated through theme attributes and style resources
- Spacing: Integrated through layout resources and styling constants