Import
View-based framework
Add the IconView to your layout file or create it programmatically in your Activity or Fragment.
<!-- Add to your layout file -->
<com.backbase.android.design.icon.IconView
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
Usage
Basic usage
<!-- Basic icon view with drawable -->
<com.backbase.android.design.icon.IconView
android:layout_width="48dp"
android:layout_height="48dp"
app:icon="@drawable/ic_star"
android:backgroundTint="@color/colorPrimary"
app:backgroundRadius="@dimen/radiusMedium" />
Advanced usage
<!-- Icon view with custom styling and padding -->
<com.backbase.android.design.icon.IconView
android:layout_width="64dp"
android:layout_height="64dp"
app:icon="@drawable/ic_heart"
app:iconColor="@color/white"
android:backgroundTint="@color/colorSecondary"
app:backgroundRadius="@dimen/radiusLarge"
android:padding="@dimen/sizerMedium"
app:bitmapPadding="@dimen/sizerSmall" />
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
app:backgroundRadius |
Dimension |
0dp |
|
app:bitmapBackgroundTint |
Color |
null |
|
app:bitmapPadding |
Dimension |
0dp |
|
app:icon |
Drawable |
Required |
|
app:iconColor |
Color |
null |
|
app:vectorTintingEnabled |
Boolean |
true |
app:backgroundRadius
Sets the corner radius for the background container.
<!-- Different corner radius options -->
<com.backbase.android.design.icon.IconView
app:backgroundRadius="@dimen/radiusSmall"
app:icon="@drawable/ic_star" />
app:bitmapBackgroundTint
Background tint color specifically applied to bitmap (non-vector) drawables when bitmapPadding is used.
<!-- Bitmap-specific background tint -->
<com.backbase.android.design.icon.IconView
app:bitmapBackgroundTint="@color/colorAccent"
app:icon="@drawable/bitmap_icon" />
app:bitmapPadding
The bitmapPadding is only applied if the icon Drawable is a non-VectorDrawable. Because a non-VectorDrawable is less precise a 0dp padding with rounded corners would still show a few pixels of backgroundTint. For this reason when it's recommended to set backgroundTint to null if bitmapPadding = 0.
<!-- Extra padding for bitmap icons -->
<com.backbase.android.design.icon.IconView
app:bitmapPadding="@dimen/sizerSmall"
app:icon="@drawable/bitmap_icon" />
app:icon
Sets the icon Drawable and invokes setPadding with the original given padding. For vector based drawables, the icon color (setTint) is invoked and the backgroundtintlist is set to its original value. For non-vector based drawables, the icon color is not set or else the bitmap would get fully coloured, and the explicit bitmapBackgroundTint will be used as backgroundTintList.
<!-- Vector drawable -->
<com.backbase.android.design.icon.IconView
app:icon="@drawable/ic_vector_icon" />
<!-- Bitmap drawable -->
<com.backbase.android.design.icon.IconView
app:icon="@drawable/bitmap_icon" />
app:iconColor
Sets the icon color for vector based drawables, in case icon is not a VectorDrawable the icon color is not set or else the bitmap would get fully coloured.
<!-- Tint color for vector icons -->
<com.backbase.android.design.icon.IconView
app:iconColor="@color/white"
app:icon="@drawable/ic_vector_star" />
app:vectorTintingEnabled
This flag control if the [iconColor] is applied or not to the [VectorDrawable] icon. By default is true.
<!-- Disable vector tinting -->
<com.backbase.android.design.icon.IconView
app:vectorTintingEnabled="false"
app:icon="@drawable/ic_vector_star" />
Programmatic usage
Kotlin configuration
// Create and configure IconView programmatically
val iconView = IconView(context).apply {
icon = ContextCompat.getDrawable(context, R.drawable.ic_star)
iconColor = ContextCompat.getColor(context, R.color.white)
backgroundTintList = ContextCompat.getColorStateList(context, R.color.colorPrimary)
bitmapPadding = resources.getDimensionPixelSize(R.dimen.sizerSmall)
isVectorTintingEnabled = true
}
Accessibility
Accessibility configuration
Configure accessibility properties for screen reader support.
<!-- Accessibility attributes -->
<com.backbase.android.design.icon.IconView
app:icon="@drawable/ic_favorite"
android:contentDescription="@string/favorite_icon_description"
android:importantForAccessibility="yes" />
Best practices
- Always provide meaningful contentDescription values
- Use appropriate semantic descriptions for icon meanings
- Consider the context when describing icon functionality
- Test with TalkBack screen reader for accessibility compliance
Design tokens
The component uses Backbase design tokens for consistent theming:
Token group iconView:
- backgroundRadius: Container corner radius options
- backgroundTint: Container background color
- iconColor: Icon tint color for vector drawables
- padding: Internal spacing around the image
- sizerMedium: Standard padding dimension
- sizerSmall: Small padding dimension for bitmaps