Floating Action Button Speed Dial
Android library providing an implementation of the Material Design Floating Action Button Speed Dial.
Features
- MinSdk 15
- Highly customizable (label, icon, ripple, fab and label background colors, themes support)
- Same animations as in Inbox by Gmail
- Option to have different icons for open/close state
- Optional overlay/touch guard layout
- Support for bottom, left and right menu expansion (left and right have no labels)
- Out-of-the box support for Snackbar behavior
- Optional support for
RecyclerView
andNestedScrollView
behavior - Support for VectorDrawable
- Easy to use
To Do
- Publish first alpha release
- Publish first beta release
- Publish first stable release
- Add label to main FAB (blocked by https://issuetracker.google.com/issues/77303906)
- Add FAB size option (blocked by https://issuetracker.google.com/issues/77303906)
- Clean up code
- Add Javadoc
- Write tests
How to use
Gradle setup
The library is available on Jcenter so no additonal repository is required.
Dependencies entry (latest version: ):
implementation "com.leinardi.android:speed-dial:<latest version>"
Basic use
Add the SpeedDialView
to your layout:
<com.leinardi.android.speeddial.SpeedDialView
android:id="@+id/speedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
app:srcCompat="@drawable/ic_add_white_24dp" />
Add the items to the SpeedDialView
:
SpeedDialView speedDialView = findViewById(R.id.speedDial);
speedDialView.addFabOptionItem(
new SpeedDialActionItem.Builder(R.id.fab_link, R.drawable.ic_link_white_24dp)
.create()
);
Add the click listeners:
speedDialView.setMainFabOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (speedDialView.isFabMenuOpen()) {
speedDialView.closeOptionsMenu();
}
}
});
speedDialView.setOptionFabSelectedListener(new SpeedDialView.OnOptionFabSelectedListener() {
@Override
public void onOptionFabSelected(SpeedDialActionItem speedDialActionItem) {
switch (speedDialActionItem.getId()) {
case R.id.fab_link:
showToast("Link action clicked!");
break;
default:
break;
}
}
});
Optional steps
Customizing the items
The SpeedDialActionItem.Builder
provides several setters to customize the aspect of one item:
mSpeedDialView.addFabOptionItem(
new SpeedDialActionItem.Builder(R.id.fab_custom_color, R.drawable.ic_custom_color)
.setFabBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.material_white_1000, getTheme()))
.setFabImageTintColor(ResourcesCompat.getColor(getResources(), R.color.inbox_primary, getTheme()))
.setLabel(getString(R.string.label_custom_color))
.setLabelColor(Color.WHITE)
.setLabelBackgroundColor(ResourcesCompat.getColor(getResources(), R.color.inbox_primary, getTheme()))
.setLabelClickable(false)
.create()
);
Is is also possible to specify a theme to easily change the FAB background and ripple effect color:
mSpeedDialView.addFabOptionItem(
new SpeedDialActionItem.Builder(R.id.fab_custom_theme, R.drawable.ic_theme_white_24dp)
.setLabel(getString(R.string.label_custom_theme))
.setTheme(R.style.AppTheme_Purple)
.create());
<style name="AppTheme.Purple" parent="AppTheme">
<item name="colorPrimary">@color/material_purple_500</item>
<item name="colorPrimaryDark">@color/material_purple_700</item>
<item name="colorAccent">@color/material_purple_a700</item>
<item name="colorControlHighlight">@color/material_purple_200</item>
</style>
Adding an overlay/touch guard when the menu is open (like Inbox by Gmail)
You simply need to add the SpeedDialOverlayLayout
to your layout:
<com.leinardi.android.speeddial.SpeedDialOverlayLayout
android:id="@+id/overlay"
android:layout_width="match_parent"
android:layout_height="match_parent" />
and then provide the instance of that layout to the SpeedDialView
:
SpeedDialOverlayLayout speedDialOverlayLayout = findViewById(R.id.overlay);
mSpeedDialView.setSpeedDialOverlayLayout(speedDialOverlayLayout);
RecyclerView
or a NestedScrollView
Hiding the FAB when scrolling a Just apply the ScrollingViewSnackbarBehavior
to the SpeedDialView
. This can be done via XML using
the convenience string resource @string/speeddial_scrolling_view_snackbar_behavior
:
<com.leinardi.android.speeddial.SpeedDialView
android:id="@+id/speedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_behavior="@string/speeddial_scrolling_view_snackbar_behavior" />
Or programmatically:
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) speedDialView.getLayoutParams();
params.setBehavior(new SpeedDialView.ScrollingViewSnackbarBehavior());
speedDialView.requestLayout();
NB: for the behaviors to work, SpeedDialView
needs to be a direct child of CoordinatorLayout
SnackbarBehavior
Disabling Since the SnackbarBehavior
is enabled by default and, afaik, it is not possible to remove a Behavior, simply use apply the SpeedDialView.NoBehavior
instead:
CoordinatorLayout.LayoutParams params = (CoordinatorLayout.LayoutParams) speedDialView.getLayoutParams();
params.setBehavior(new SpeedDialView.NoBehavior());
speedDialView.requestLayout();
Sample project
A fully working example is available here.
Demo
Video
https://www.youtube.com/watch?v=tWowiF5ElAg
Sample app
Screenshots
API 27 and 16
Bottom and left expansion
Changelog
See the CHANGELOG.md
Credits
This project is based on floating-action-menu by ArthurGhazaryan.
Licenses
Copyright 2018 Roberto Leinardi.
Licensed to the Apache Software Foundation (ASF) under one or more contributor
license agreements. See the NOTICE file distributed with this work for
additional information regarding copyright ownership. The ASF licenses this
file to you under the Apache License, Version 2.0 (the "License"); you may not
use this file except in compliance with the License. You may obtain a copy of
the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations under
the License.