Import
View-based framework
Before you can use components from the Backbase Design System SDK, make sure you've installed the package.
Kotlin
If you need to reference the AvatarView component in your Kotlin code, import it at the top of your file.
import com.backbase.android.design.avatar.AvatarView
XML
Components work automatically in XML files if the component path matches the installed package.
<com.backbase.android.design.avatar.AvatarView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
... />
Usage
Basic usage
Use AvatarView in XML layouts with predefined styling. The component extends MaterialCardView providing circular avatar display.
<!-- Basic avatar with initials -->
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:initials="JD" />
Advanced usage
<!-- Avatar with custom configuration -->
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:initials="AB"
app:initialsColor="?colorOnBrand"
app:emptyIcon="@drawable/ic_custom_person"
app:emptyIconColor="?colorBrand"
app:emptyIconPadding="8dp" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
emptyIcon |
Drawable? |
?iconPermIdentity |
|
emptyIconColor |
Int |
0 |
|
emptyIconPadding |
Int |
0 |
|
icon |
Drawable? |
null |
|
iconColor |
Int |
0 |
|
initials |
String |
"" |
|
initialsColor |
Int |
Default text color |
emptyIcon
The emptyIcon property sets the fallback icon displayed when no initials or image are provided.
// Set empty icon in Kotlin
val avatarView: AvatarView = findViewById(R.id.avatar)
avatarView.emptyIcon = ContextCompat.getDrawable(this, R.drawable.ic_person)
<!-- Set empty icon in XML -->
<com.backbase.android.design.avatar.AvatarView
app:emptyIcon="@drawable/ic_custom_person" />
emptyIconColor
The emptyIconColor property sets the tint color for the empty icon.
// Set empty icon color in Kotlin
avatarView.emptyIconColor = ContextCompat.getColor(this, R.color.brand_primary)
<!-- Set empty icon color in XML -->
<com.backbase.android.design.avatar.AvatarView
app:emptyIconColor="?colorBrand" />
emptyIconPadding
The emptyIconPadding property adds padding around the empty icon for better visual balance.
// Set empty icon padding in Kotlin
avatarView.emptyIconPadding = resources.getDimensionPixelSize(R.dimen.spacing_small)
<!-- Set empty icon padding in XML -->
<com.backbase.android.design.avatar.AvatarView
app:emptyIconPadding="8dp" />
icon
The icon property sets the main drawable to display. Takes priority over initials and empty icon.
// Set icon in Kotlin
avatarView.icon = ContextCompat.getDrawable(this, R.drawable.user_profile)
iconColor
The iconColor property sets the tint color for the main icon.
// Set icon color in Kotlin
avatarView.iconColor = ContextCompat.getColor(this, R.color.foreground_primary)
initials
The initials property sets the text to display when no icon is provided.
// Set initials in Kotlin
avatarView.initials = "JD"
<!-- Set initials in XML -->
<com.backbase.android.design.avatar.AvatarView
app:initials="AB" />
initialsColor
The initialsColor property sets the text color for the initials display.
// Set initials color in Kotlin
avatarView.initialsColor = ContextCompat.getColor(this, R.color.text_on_brand)
<!-- Set initials color in XML -->
<com.backbase.android.design.avatar.AvatarView
app:initialsColor="?colorOnBrand" />
Styling
Predefined styles
The AvatarView provides predefined styling using the style attribute. Always use predefined styles to ensure consistency.
<!-- Avatar with default style -->
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyle"
app:initials="JD" />
Size variants
Control avatar size using standard Android dimension attributes or style variants.
<!-- Different avatar sizes -->
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyleSmall"
android:layout_width="32dp"
android:layout_height="32dp"
app:initials="S" />
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyle"
android:layout_width="48dp"
android:layout_height="48dp"
app:initials="M" />
<com.backbase.android.design.avatar.AvatarView
style="?avatarStyleLarge"
android:layout_width="64dp"
android:layout_height="64dp"
app:initials="L" />
States
Content priority
The AvatarView displays content based on the last property set and visibility rules.
// Content priority example
val avatarView: AvatarView = findViewById(R.id.avatar)
// Shows empty icon when both icon and initials are null/empty
// Default state
// Setting initials shows text and hides any drawable
avatarView.initials = "AB"
// Setting icon shows the drawable and hides initials text
avatarView.icon = ContextCompat.getDrawable(this, R.drawable.profile_image)
Empty state handling
// Handle empty state
avatarView.initials = "" // Automatically shows empty icon
Events
AvatarView uses standard Android click listeners for handling user interactions.
// Set click listener
val avatarView: AvatarView = findViewById(R.id.avatar)
avatarView.setOnClickListener {
// Handle avatar click
openProfileEditor()
}
Accessibility
Best practices
- AvatarView extends MaterialCardView which provides standard Android accessibility behavior
- Content description can be set for screen reader support
// Configure accessibility
avatarView.contentDescription = "User profile picture"
Design tokens
The AvatarView uses Material Design theming through styled attributes and can be customized via the global theme.
Theming elements:
- Style: ?avatarStyle attribute for default styling
- Colors: Configurable through emptyIconColor, iconColor, initialsColor properties
- Layout: Material Design circular container with proper elevation
- Typography: Material Design text styling for initials