Android – Extended Floating Action Button
- agulevski10
- Jan 14, 2021
- 2 min read
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)
XHTML
implementation "com.google.android.material:material:1.2.1"
1
implementation "com.google.android.material:material:1.2.1"
Step 2: Adjust app theme in styles.xml to one of Theme.MaterialComponents
XHTML
<style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar">
1
<style name="AppTheme" parent="@style/Theme.MaterialComponents.Light.NoActionBar">
Step 3: Add EFAB in your layout.xml
XHTML
<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" />
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
Java
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(); }
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:
Comments