Extended floating action buttons are used for a special type of promoted action. They are distinguished by an icon and a text floating above the UI and have special motion behaviors related to morphing, launching, and the transferring anchor point.
Extended floating action buttons may have icon and text, but may also hold just an icon or text.
As this class descends from MaterialButton , you can control the icon which is displayed via setIcon(android.graphics.drawable.Drawable) , and the text via setText(CharSequence) .
The background color of this view defaults to the your theme’s colorSecondary . If you wish to change this at runtime then you can do so via setBackgroundTintList(android.content.res.ColorStateList) .
Step 1: Add dependency in build.gradle to material (latest version)
|
1 |
implementation "com.google.android.material:material:1.2.1" |
Step 2: Adjust app theme in styles.xml to one of Theme.MaterialComponents
|
1 |
<style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar"> |
Step 3: Add EFAB in your layout.xml
|
1 2 3 4 5 6 7 8 9 10 |
<com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton android:id="@+id/my_extended_floating_action_button" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginBottom="16dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:icon="@drawable/ic_my_icon" tools:text="My Action" /> |
Step 4: Java implementation
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
private ActivityMainBinding binding; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); binding = ActivityMainBinding.inflate(getLayoutInflater()); setContentView(binding.getRoot()); binding.myExtendedFloatingActionButton.setText("extended"); binding.myExtendedFloatingActionButton.shrink(); binding.manualExtend.setOnClickListener(v -> extend(false)); binding.timerExtend.setOnClickListener(v -> extend(true)); } private void extend(boolean isTimed) { if (!binding.myExtendedFloatingActionButton.isExtended()) { if (!isTimed) { extendFab(); } else { new Handler(Looper.getMainLooper()).postDelayed(this::extendFab, 3000); } } else { binding.myExtendedFloatingActionButton.shrink(); } } private void extendFab() { binding.myExtendedFloatingActionButton.extend(); } |
Result:
Documentation:
https://developer.android.com/reference/com/google/android/material/floatingactionbutton/ExtendedFloatingActionButton