android fab菜单,FAB按钮菜单 – FABsMenu

FloatingActionButtons Menu (FABsMenu)

Just a simple library to use a menu ofFloatingActionButtons from Design Support Library that follows Material Design guidelines

Long story

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.

Preview

Usage

Add jitpack dependency to your rootbuild.gradle:

allprojects {

repositories {

maven { url 'https://jitpack.io' }

}

}

Next, add the dependency to yourbuild.gradle:

dependencies {

compile 'me.jahirfiquitiva:FABsMenu:1.0.3'

}

Then sync the gradle files.

Finally, use it in your layout, just like this:

xmlns:fab="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

fab:fabs_menu_overlayColor="#4d000000"

fab:fabs_menu_cickableOverlay="true">

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">

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"/>

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"/>

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"/>

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"/>

And call the methods in java code:

final FABsMenu menu = findViewById(R.id.fabs_menu);

menu.setMenuUpdateListener(new FABsMenu.OnFABsMenuUpdateListener() {

@Override

public void onMenuClicked() {

showToast("You pressed the menu!");

menu.toggle(); // Expands or collapses the menu depending on its state

}

@Override

public void onMenuExpanded() {

showToast("The menu has been expanded!");

}

@Override

public void onMenuCollapsed() {

showToast("The menu has been collapsed!");

}

});

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);

Attributes explanation

FABsMenuLayout attributes:

fabs_menu_overlayColor–> Set the menu overlay color (Defaults to#4d000000)

fabs_menu_cickableOverlay–> Specify whether the overlay is clickable or not (Defaults totrue)

FABsMenu attributes

fab_menuMargins–> The margins of the menu (Defaults to16dp)

fab_menuTopMargin–> The top margin of the menu (Defaults tofab_menuMargins)

fab_menuBottomMargin–> The bottom margin of the menu (Defaults tofab_menuMargins)

fab_menuRightMargin–> The right margin of the menu (Defaults tofab_menuMargins)

fab_menuLeftMargin–> The left margin of the menu (Defaults tofab_menuMargins)

fab_moreButtonRippleColor–> The menu fab ripples color

fab_moreButtonBackgroundColor–> The menu fab background color

fab_moreButtonSize–> Specify the size. Choose betweenminiandnormal(Defaults tonormal)

fab_moreButtonPlusIcon–> The reference to the plus icon drawable (Defaults tonull)

fab_labelsPosition–> Where to show the labels. Choose betweenleftandright(Defaults toleft)

fab_expandDirection–> The direction the menu should expand to. Choose betweenup,down,leftandright. (Defaults toup)

TitleFAB attributes:

fab_title–> A string that will be shown as the fab label (Defaults tonull)

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 to2dp)

fab_title_textPadding–> The dimension of the text padding (Defaults to8dp)

fab_enableTitleClick–> Specify whether the label click should fire the fab click too (Defaults tofalse)

Important notes

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, usefab_menuMarginsinstead of the normalandroid:layout_marginattribute. 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 anIllegalArgumentException. 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).