Just a simple library to use a menu of FloatingActionButtons from Design Support Library that follows Material Design guidelines
Android Support/Design libraries still doesn't include a FloatingActionButtons menu, and the libraries found here and there are either too cluttered or filled with unnecessary stuff or using custom views that simply don't follow guidelines, which made me avoid them.
I was looking for a new library, and the ones I knew of, have been deprecated/abandoned because the simple FABs are included in the design support library, so I felt the urge of having something that could suffice my needs, and couldn't help but create a library, although is mostly based on one of those abandoned libraries.
This library uses the design library FABs but wraps them inside a ViewGroup to make them look like the FloatingActionButtons menu suggested in Material Design guidelines.
Unfortunately, due to my limited time between work+University, I don't really find the way to provide proper support for this library. I really appreciate everyone that has been using it and that might continue using it, but, at least for now, this library is deprecated.
If you want to use a similar and more frequently updated library, please refer to @leinardi 's FloatingActionSpeedDial
Thanks again for the amazing support. :raised_hands:
:radio_button: You can find it in the Releases page
FABsMenu is available via JitPack, so getting it as simple as adding it as a dependency, like this:
build.gradle file
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}build.gradle file
dependencies {
implementation 'me.jahirfiquitiva:FABsMenu:{latest version}'
}where {latest version} corresponds to published version in
You can use it in your layout, just like this:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fab="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent">
<!-- Menu Layout is needed for the overlay to work -->
<jahirfiquitiva.libs.fabsmenu.FABsMenuLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
fab:fabs_menu_overlayColor="#4d000000"
fab:fabs_menu_clickableOverlay="true"
tools:layout_behavior="@string/fabs_menu_layout_behavior">
<!-- FABs Menu is the main view. It will contain all the items FABs and it create the menu fab itself -->
<jahirfiquitiva.libs.fabsmenu.FABsMenu
android:id="@+id/fabs_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:clipChildren="false"
fab:fab_menuMargins="16dp"
fab:fab_moreButtonPlusIcon="@drawable/ic_plus"
fab:fab_moreButtonBackgroundColor="@color/pink"
fab:fab_moreButtonRippleColor="@color/pink_pressed"
fab:fab_moreButtonSize="normal"
fab:fab_labelsPosition="left"
fab:fab_expandDirection="up">
<!-- This is the item that appears at the top of the menu -->
<jahirfiquitiva.libs.fabsmenu.TitleFAB
android:id="@+id/to_remove"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:srcCompat="@drawable/ic_share"
fab:fabSize="mini"
fab:backgroundTint="@color/colorAccent"
fab:rippleColor="@color/colorAccent"
fab:fab_title="This is a custom title"
fab:fab_title_backgroundColor="@color/colorAccent"
fab:fab_title_textColor="@android:color/white"/>
<jahirfiquitiva.libs.fabsmenu.TitleFAB
android:id="@+id/clickable_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:srcCompat="@drawable/ic_pencil"
fab:fab_title="Clickable title"
fab:fab_enableTitleClick="true"
fab:fab_title_textColor="@color/colorAccent"
fab:fabSize="mini"
fab:backgroundTint="@color/colorAccent"
fab:rippleColor="@color/colorAccent"/>
<jahirfiquitiva.libs.fabsmenu.TitleFAB
android:id="@+id/mini_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:srcCompat="@drawable/ic_heart"
fab:fab_title="Mini fab with long text"
fab:fabSize="mini"
fab:backgroundTint="@color/blue_semi"
fab:rippleColor="@color/blue_semi_pressed"/>
<!-- This item will appear just above the menu FAB -->
<jahirfiquitiva.libs.fabsmenu.TitleFAB
android:id="@+id/green_fab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
fab:srcCompat="@drawable/ic_person"
fab:fab_title="Fab with even longer text that might not even fit in all the screens"
fab:fabSize="normal"
fab:backgroundTint="@color/green"
fab:rippleColor="@color/green_pressed"/>
</jahirfiquitiva.libs.fabsmenu.FABsMenu>
</jahirfiquitiva.libs.fabsmenu.FABsMenuLayout>
</RelativeLayout>And call the methods in java code:
final FABsMenu menu = findViewById(R.id.fabs_menu);
menu.setMenuUpdateListener(new FABsMenuListener() {
// You don't need to override all methods. Just the ones you want.
@Override
public void onMenuClicked(FABsMenu fabsMenu) {
super.onMenuClicked(fabsMenu); // Default implementation opens the menu on click
showToast("You pressed the menu!");
}
@Override
public void onMenuCollapsed(FABsMenu fabsMenu) {
super.onMenuCollapsed(fabsMenu);
showToast("The menu has been collapsed!");
}
@Override
public void onMenuExpanded(FABsMenu fabsMenu) {
super.onMenuExpanded(fabsMenu);
showToast("The menu has been expanded!");
}
});You can also add or remove buttons programmatically:
// Removes a button
TitleFAB toRemove = findViewById(R.id.to_remove);
menu.removeButton(toRemove);
// Adds a button to the bottom
TitleFAB toAdd = new TitleFAB(this);
toAdd.setTitle("A new added fab");
toAdd.setBackgroundColor(Color.parseColor("#ff5722"));
menu.addButton(toAdd);And you can also attach the FABsMenu to a RecyclerView so it gets hidden on scroll, like this:
RecyclerView rv = findViewById(R.id.rv);
FABsMenu menu = findViewById(R.id.fabs_menu);
menu.attachToRecyclerView(rv);FABsMenuLayout attributes:
fabs_menu_overlayColor --> Set the menu overlay color (Defaults to #4d000000)fabs_menu_clickableOverlay --> Specify whether the overlay is clickable or not (Defaults to true)FABsMenu attributes
fab_menuMargins --> The margins of the menu (Defaults to 16dp)fab_menuTopMargin --> The top margin of the menu (Defaults to fab_menuMargins)fab_menuBottomMargin --> The bottom margin of the menu (Defaults to fab_menuMargins)fab_menuRightMargin --> The right margin of the menu (Defaults to fab_menuMargins)fab_menuLeftMargin --> The left margin of the menu (Defaults to fab_menuMargins)fab_moreButtonRippleColor --> The menu fab ripples colorfab_moreButtonBackgroundColor --> The menu fab background colorfab_moreButtonSize --> Specify the size. Choose between mini and normal (Defaults to normal)fab_moreButtonPlusIcon --> The reference to the plus icon drawable (Defaults to null)fab_labelsPosition --> Where to show the labels. Choose between left and right (Defaults to left)fab_expandDirection --> The direction the menu should expand to. Choose between up, down, left and right. (Defaults to up)TitleFAB attributes:
fab_title --> A string that will be shown as the fab label (Defaults to null)fab_title_backgroundColor --> The color of the label background (Defaults to #fff)fab_title_textColor --> The color of the label text (Defaults to #000)fab_title_cornerRadius --> The dimension of the label corners radius (Defaults to 2dp)fab_title_textPadding --> The dimension of the text padding (Defaults to 8dp)fab_enableTitleClick --> Specify whether the label click should fire the fab click too (Defaults to false)The FABs are based on the ones from Design Support libraries, so you can use these customization attributes:
fab:fabSize="mini"
fab:backgroundTint="@color/blue_semi"
fab:rippleColor="@color/blue_semi_pressed"For the FABsMenu, the previous attributes will not work.
For the FABsMenu, use fab_menuMargins instead of the normal android:layout_margin attribute. This will prevent FABs elevation being cropped.
As stated in guidelines, a FABsMenu should not have more than 6 items. If you use more than 6, you will get an IllegalArgumentException. Also, remember FABs menu should have at least 3 items too.
For now, the icon you set for FABsMenu will always rotate, so be sure you set an icon that looks good in both states (normal and rotated).
If you found this app/library helpful and want to thank me, you can:
Thanks in advance! :pray:
This project is based on Future Simple's android-floating-action-button project, which is also based on FloatingActionButton library by Oleksandr Melnykov.
Copyright (c) 2018 Jahir Fiquitiva
Licensed 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.Copyright (c) 2014 Jerzy Chalupski
Licensed 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.