Import
View-based framework
import com.backbase.android.design.icon.IconButtonLayout
Usage
Basic usage
Add an IconButtonLayout to your XML layout with a FloatingActionButton inside.
<com.backbase.android.design.icon.IconButtonLayout
android:id="@+id/icon_button_layout"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Favorite">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/icon_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_heart" />
</com.backbase.android.design.icon.IconButtonLayout>
Advanced usage
<com.backbase.android.design.icon.IconButtonLayout
android:id="@+id/custom_icon_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Delete"
app:textPosition="above_icon"
app:loading="false"
app:error="false">
<com.google.android.material.floatingactionbutton.FloatingActionButton
android:id="@+id/delete_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_delete"
app:backgroundTint="?colorBackgroundDanger"
app:tint="?colorOnBackgroundDanger" />
</com.backbase.android.design.icon.IconButtonLayout>
// Programmatic configuration
val iconButtonLayout = findViewById<IconButtonLayout>(R.id.icon_button_layout)
iconButtonLayout.label = "Save"
iconButtonLayout.labelPosition = IconButtonLayout.LabelPosition.AboveIcon
iconButtonLayout.loading = false
iconButtonLayout.error = false
Configuration
XML attributes
|
Attribute |
Type |
Default |
|---|---|---|
|
android:enabled |
boolean |
true |
|
android:text |
string |
null |
|
app:error |
boolean |
false |
|
app:loading |
boolean |
false |
|
app:textPosition |
enum |
bellow_icon |
android:enabled
Enable or disable the button.
<com.backbase.android.design.icon.IconButtonLayout
android:enabled="false" />
android:text
The string of the label that is displayed.
<com.backbase.android.design.icon.IconButtonLayout
android:text="Save" />
app:error
Display the button in error state.
<com.backbase.android.design.icon.IconButtonLayout
app:error="true" />
app:loading
Display the button in loading state with a progress indicator.
<com.backbase.android.design.icon.IconButtonLayout
app:loading="true" />
app:textPosition
The position of the label relative to the icon button.
<com.backbase.android.design.icon.IconButtonLayout
app:textPosition="above_icon" />
Properties
|
Property |
Type |
Default |
|---|---|---|
|
error |
Boolean |
false |
|
label |
String? |
null |
|
labelPosition |
LabelPosition |
BellowIcon |
|
loading |
Boolean |
false |
|
stateDescription |
StateDescription |
Default instance |
error
Display the button in error state.
iconButtonLayout.error = true
label
The string of the label that is displayed.
iconButtonLayout.label = "Add to cart"
labelPosition
The position of the label relative to the icon button.
iconButtonLayout.labelPosition = IconButtonLayout.LabelPosition.AboveIcon
loading
Display the button in loading state with a progress indicator.
iconButtonLayout.loading = true
stateDescription
Content descriptions for different states of the button.
iconButtonLayout.stateDescription = IconButtonLayout.StateDescription(
context = context,
errorStateDescription = "Error occurred",
inProgressStateDescription = "Loading"
)
States
Loading
// Start loading state
iconButtonLayout.loading = true
// Stop loading state
iconButtonLayout.loading = false
Error
// Show error state
iconButtonLayout.error = true
// Clear error state
iconButtonLayout.error = false
Disabled
<com.backbase.android.design.icon.IconButtonLayout
android:enabled="false" />
iconButtonLayout.isEnabled = false
Label position
The IconButtonLayout supports different label positions using the LabelPosition sealed class.
|
Position |
Description |
|---|---|
|
AboveIcon |
Label is placed above the icon |
|
BellowIcon |
Label is placed below the icon |
|
Gone |
Label is hidden |
// Label above icon
iconButtonLayout.labelPosition = IconButtonLayout.LabelPosition.AboveIcon
// Label below icon (default)
iconButtonLayout.labelPosition = IconButtonLayout.LabelPosition.BellowIcon
// No label
iconButtonLayout.labelPosition = IconButtonLayout.LabelPosition.Gone
Events
|
Event |
Type |
Description |
|---|---|---|
|
setOnClickListener |
View.OnClickListener |
Handle button click events |
iconButtonLayout.setOnClickListener { view ->
// Handle click event
Toast.makeText(context, "Button clicked", Toast.LENGTH_SHORT).show()
}
Accessibility
The IconButtonLayout automatically supports accessibility features.
Best practices
- The component returns ImageButton::class.java.name as accessibility class name
- Label text is automatically used as content description
- State descriptions are updated automatically for loading and error states
- Ensure FloatingActionButton has proper content description for icon-only buttons
// Accessibility configuration example
iconButtonLayout.label = "Add to favorites"
iconButtonLayout.contentDescription = "Add item to favorites list"
iconButtonLayout.stateDescription = IconButtonLayout.StateDescription(
context = context,
errorStateDescription = "Failed to add to favorites",
inProgressStateDescription = "Adding to favorites"
)
Design tokens
This component uses design tokens for consistent theming:
Typography tokens:
- Label text appearance: ?textAppearanceBody2Medium
Color tokens:
- Button background: @color/bds_icon_button_background
- Button foreground: @color/bds_icon_button_foreground
- Label text: @color/bds_icon_button_text
- Loading indicator: @color/bds_icon_button_foreground
Spacing tokens:
- Label max width: @dimen/bds_icon_button_text_max_width