Import
View-based framework
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
Usage
Basic usage
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
android:text="Add Item" />
Advanced usage
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_margin="16dp"
android:text="Create New Task"
android:enabled="true"
app:icon="@drawable/ic_add"
app:iconTint="@color/white"
app:backgroundTint="@color/primary_color"
app:iconPadding="8dp" />
Configuration
The Extended Floating Action Button uses Material Design's ExtendedFloatingActionButton component with Backbase styling applied through the theme attribute extendedFloatingActionButtonStyle.
Default style attributes
|
Attribute |
Value |
Description |
|---|---|---|
|
android:minHeight |
0dp |
Minimum height |
|
android:minWidth |
0dp |
Minimum width |
|
android:textAppearance |
?textAppearanceBody2Medium |
Text appearance |
|
android:textColor |
@color/backbase_extended_fab_text |
Text color |
|
app:backgroundTint |
@color/backbase_extended_fab_background |
Background color |
|
app:icon |
?iconAdd |
Default icon |
|
app:iconPadding |
4dp |
Padding between icon and text |
|
app:iconTint |
@color/backbase_extended_fab_text |
Icon color |
XML attributes
The Extended Floating Action Button supports all standard Material Design ExtendedFloatingActionButton attributes. See the official Google Material documentation for all available attributes.
Methods
|
Method |
Description |
|---|---|
|
extend() |
Extends the button to show both icon and text |
|
shrink() |
Shrinks the button to show only the icon |
extend
Extends the button to show both icon and text.
extendedFab.extend()
shrink
Shrinks the button to show only the icon.
extendedFab.shrink()
Learn more about these methods in the Google reference documentation).
Styling
Theme attribute
The Extended Floating Action Button is styled using the theme attribute:
<item name="extendedFloatingActionButtonStyle">
@style/Widget.Backbase.ExtendedFloatingActionButton.Icon
</item>
Default style
<style name="Widget.Backbase.ExtendedFloatingActionButton.Icon" parent="Widget.MaterialComponents.ExtendedFloatingActionButton.Icon">
<item name="icon">?iconAdd</item>
<item name="iconPadding">4dp</item>
<item name="iconTint">@color/backbase_extended_fab_text</item>
<item name="android:textColor">@color/backbase_extended_fab_text</item>
<item name="backgroundTint">@color/backbase_extended_fab_background</item>
<item name="android:minWidth">0dp</item>
<item name="android:minHeight">0dp</item>
<item name="android:textAppearance">?textAppearanceBody2Medium</item>
</style>
Custom styling
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Custom FAB"
app:icon="@drawable/custom_icon"
app:iconTint="@color/custom_icon_color"
app:backgroundTint="@color/custom_background"
android:textColor="@color/custom_text_color"
app:iconPadding="8dp" />
States
Enabled
The default state where the button is interactive.
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="true"
android:text="Enabled FAB" />
Disabled
The button becomes non-interactive with reduced opacity.
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:enabled="false"
android:text="Disabled FAB" />
Extended
The button shows both icon and text (default state).
extendedFab.extend()
Shrunk
The button shows only the icon.
extendedFab.shrink()
Events
|
Event |
Type |
Description |
|---|---|---|
|
setOnClickListener |
View.OnClickListener |
Called when the floating action button is clicked |
extendedFab.setOnClickListener {
// Handle click event
performAction()
}
Accessibility
Accessibility configuration
The Extended Floating Action Button automatically provides accessibility support through Material Design's built-in features.
Best practices
- Always provide meaningful text content using android:text
- Use android:contentDescription for additional context when needed
- The component automatically handles TalkBack announcements
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Add new item"
android:contentDescription="Add a new item to the list" />
Design tokens
Extended Floating Action Button 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 style resources.