An Extended Floating Action Button displays the primary action in an application.
The Extended FAB is wider than the regular FloadtingActionButton, and it includes a text label.
Extended floating action buttons adjust their position and visibility in response to other UI elements on the screen.
The ExtendedFloatingActionButton widget provides a complete implementation of Material Design’s extended FAB component
Note: ExtendedFloatingActionButton is a child class of Material Button, rather than FloatingActionButton. This means that several attributes which are applicable to FloatingActionButton have different naming in ExtendedFloatingActionButton.
You just need to follow few steps to add ExtendedFloatingActionButton in your app ->
Compile your app with Android P
In order to use Material Components for Android, and the latest versions of the Support Libraries, you will have to update your app’s complieSdkVersion to 28
Dependency –
|
1 |
implementation 'com.google.android.material:material:1.1.0-alpha07' |
You also need to migrate your project with AndroidX.
For AndroidX migration, you can refer this link -> AndroidX
In XML –
|
1 2 3 4 5 6 7 8 9 |
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/exFb" style="@style/Widget.MaterialComponents.ExtendedFloatingActionButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_margin="20dp" android:text="Add" android:contentDescription="@string/appbar_scrolling_view_behavior" app:icon="@android:drawable/ic_input_add"/> |
In Style File –
You need to change your app theme to inherit from a Material Components theme.
|
1 |
<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar"> |
Note: You can use any child of “Theme.MaterialComponents” as a parent theme of your application.
Now, if you want to expand or shrink your button at any point, you need to call only two methods ->
- shrink() -> to shrink your fab button
- extend() -> to extend your fab button
To learn more about material extend floating action button, you can refer this link – Material Extended Floating Action Button
Hope, this blog is helpful for you to add Extended Floating Action Button in android app.
Be the first to comment.