Android fab speed dial

fab-speed-dial

General

Additional

Promotion

• Description
• Package
• APK
• Discussion
• Q&A
• Resources

fab-speed-dial

Gettting started

Add the dependency to gradle.build

Define a menu resource

Add FabSpeedDial to your layout xml

Result

In order to save the menu open/closed state, you must define an id to the FabSpeedDial, otherwise if you rotate the device the state won’t be persisted.

Events

As with all menus, you have a callback just before the list of actionable items are presented. The callback allows you to update your menu items, or not show the menu altogether.

Similarly, in order to be notified about a selection:

Customisation

Multi-colored fabs

Define an integer-array resource that contains the colors you want to use in the order of the items you want colored:

Make sure you also assign android:orderInCategory to each menu item in your menu.xml in the same 0-based order.

To provide the color array to the menu items use the following attributes: miniFabTitleTextColorList and miniFabBackgroundTintList . Note — if you’ve used miniFabTitleTextColor and miniFabBackgroundTint they will be overriden by the color arrays.

Result

Position

In order to change the position of the view, use the standard android APIs to position FabSpeedDial within your ViewGroup and be sure to assign fabGravity a relevant value.

Basic styling

As a rule of thumb, attributes prepended with fab, i.e. fabDrawable , refer to the normsal-sized FAB view; attribtues prepended with miniFab refer to the mini-sized FAB views in the list.

The following attribtues are supported:

FabSpeedDial	Android	Desscription
app:fabDrawable	android:src	Sets the icon drawable of the main FAB
app:fabDrawableTint	android:tint	Tints the icon drawable of the main FAB
app:fabBackgroundTint	android:backgroundTint	Tints the background colour of the main FAB
app:miniFabDrawableTint	android:tint	Tints the icon drawable of the mini FAB(s)
app:miniFabBackgroundTint	android:backgroundTint	Tints the background colour of the mini FAB(s)
app:miniFabBackgroundTintList	An array containing the background colors for each of the mini FABs.
app:miniFabTitleTextColor	[android:textColor] (https://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor)	Sets the color of the title of the mini FAB.
app:miniFabTitleTextColorList	An array containing the colors for each of the titles of the mini FABs.
app:miniFabTitleBackgroundTint	android:backgroundTint	Tints the background colour of the title(s) of the mini FAB(s)
app:miniFabTitlesEnabled	Convinience for hiding the tilte(s) of the mini FAB(s)
app:touchGuard	Hide FAB when touching out of its bounds
app:touchGuardDrawable	android:background	Sets background to the container of FAB

Caveats

If you have used FloatingActionButton, CoordinatorLayout, and both combined, you are most probably aware that:

• Internally, FAB has two main implementations: one for SDK >= 21, one for earlier versions; the one for older versions uses extra padding in order to draw shadows; you don’t need to account for the extra padding as the library takes care of it however do check your layouts/dimensions to avoid mis-positioned views.
• When used in a CoordinatorLayout, FAB is known to have its margin values ignored / misused under certain circumstances; as a workaround the library always adds left or right margin values (depending on gravity), taking into account the SDK version too.

Источник

A Floating Action Button Speed Dial implementation for Android

Floating Action Button Speed Dial

Android library providing an implementation of the Material Design Floating Action Button Speed Dial.

Features

• [x] MinSdk 14
• [x] Highly customizable (label, icon, ripple, fab and label background colors, themes support)
• [x] Same animations as in Inbox by Gmail
• [x] Option to have different icons for open/close state
• [x] Optional overlay/touch guard layout
• [x] Support for bottom, left and right menu expansion (left and right have no labels)
• [x] Out-of-the box support for Snackbar behavior
• [x] Optional support for RecyclerView and NestedScrollView behavior
• [x] Support for VectorDrawable
• [x] Easy to use

Development status

Check the Waffle.io board.

How to use

Gradle setup

Official releases

The library is available on Jcenter so no additonal repository is required.

Dependencies entry (latest version on Jcenter ):

Snapshots (development branch)

You can use JitPack to test the latest master (remember that master is the development branch and can be unstable or completely broken).

Add the JitPack repository to your build file:

Add the dependency

Basic use

SpeedDialView

Add the SpeedDialView to your layout:

Action items

Add the items to the SpeedDialView :

If the color customization is not requested, it is also possible to inflate the Action items
form a Menu Resource:

Only the attributes android:id , android:icon and android:title are supported.

Click listeners

Add the click listeners:

Optional steps

Add the main action click listener

Customizing the items

The SpeedDialActionItem.Builder provides several setters to customize the aspect of one item:

Is is also possible to specify a theme to easily change the FAB background and ripple effect color:

Adding an overlay/touch guard when the menu is open (like Inbox by Gmail)

You simply need to add the SpeedDialOverlayLayout to your layout:

and then provide the instance of that layout to the SpeedDialView :

Hiding the FAB when scrolling a RecyclerView or a NestedScrollView

Just apply the ScrollingViewSnackbarBehavior to the SpeedDialView . This can be done via XML using
the convenience string resource @string/speeddial_scrolling_view_snackbar_behavior :

NB: for the behaviors to work, SpeedDialView needs to be a direct child of CoordinatorLayout

Источник

Android fab speed dial

FAB flinging out actionable menu items using the Speed dial metaphor

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Add the dependency to gradle.build

Define a menu resource

Add FabSpeedDial to your layout xml

In order to save the menu open/closed state, you must define an id to the FabSpeedDial, otherwise if you rotate the device the state won’t be persisted.

As with all menus, you have a callback just before the list of actionable items are presented. The callback allows you to update your menu items, or not show the menu altogether.

Similarly, in order to be notified about a selection:

Define an integer-array resource that contains the colors you want to use in the order of the items you want colored:

Make sure you also assign android:orderInCategory to each menu item in your menu.xml in the same 0-based order.

To provide the color array to the menu items use the following attributes: miniFabTitleTextColorList and miniFabBackgroundTintList . Note — if you’ve used miniFabTitleTextColor and miniFabBackgroundTint they will be overriden by the color arrays.

In order to change the position of the view, use the standard android APIs to position FabSpeedDial within your ViewGroup and be sure to assign fabGravity a relevant value.

As a rule of thumb, attributes prepended with fab, i.e. fabDrawable , refer to the normsal-sized FAB view; attribtues prepended with miniFab refer to the mini-sized FAB views in the list.

The following attribtues are supported:

FabSpeedDial	Android	Desscription
app:fabDrawable	android:src	Sets the icon drawable of the main FAB
app:fabDrawableTint	android:tint	Tints the icon drawable of the main FAB
app:fabBackgroundTint	android:backgroundTint	Tints the background colour of the main FAB
app:miniFabDrawableTint	android:tint	Tints the icon drawable of the mini FAB(s)
app:miniFabBackgroundTint	android:backgroundTint	Tints the background colour of the mini FAB(s)
app:miniFabBackgroundTintList	An array containing the background colors for each of the mini FABs.
app:miniFabTitleTextColor	[android:textColor] (https://developer.android.com/reference/android/widget/TextView.html#attr_android:textColor)	Sets the color of the title of the mini FAB.
app:miniFabTitleTextColorList	An array containing the colors for each of the titles of the mini FABs.
app:miniFabTitleBackgroundTint	android:backgroundTint	Tints the background colour of the title(s) of the mini FAB(s)
app:miniFabTitlesEnabled	Convinience for hiding the tilte(s) of the mini FAB(s)
app:touchGuard	Hide FAB when touching out of its bounds
app:touchGuardDrawable	android:background	Sets background to the container of FAB

If you have used FloatingActionButton, CoordinatorLayout, and both combined, you are most probably aware that:

• Internally, FAB has two main implementations: one for SDK >= 21, one for earlier versions; the one for older versions uses extra padding in order to draw shadows; you don’t need to account for the extra padding as the library takes care of it however do check your layouts/dimensions to avoid mis-positioned views.
• When used in a CoordinatorLayout, FAB is known to have its margin values ignored / misused under certain circumstances; as a workaround the library always adds left or right margin values (depending on gravity), taking into account the SDK version too.

Источник

Android fab speed dial

Floating Action Button with Speed-Dial Menu

This library provides a clickable floating action button (FAB) with an optional speed-dial menu. The FAB can trigger a standard click listener or a open the speed-dial menu with further options. All aspects of the FAB and speed-dial menu are customisable.

You can try the demo in one of two ways:

Clone this repository and install the demo app from the app/ folder (you can do this with Gradle, using gradle clean installDebug ).

Download the sample app from the Google Play Store: Floating Action Button Demo.

Note: depending on your app’s configuration, you may need to add the following to your ProGuard rules:

Note: all of the instructions below assume that the FAB is referenced by the variable fab , i.e.

Placing the FAB in Your Layout

The FloatingActionButton view must be placed at the root of your layout, above all other views, and with maximum width and height. This allows the semi-transparent layer to expand and cover the entire layout when the speed-dial menu is opened.

The FAB can be positioned in any of the four corners of the activity via XML or with fab.setButtonPosition(. ) . The default position is the bottom-end corner.

The FAB is aware of text-direction (right-to-left or left-to-right) and adjusts the meaning of «start» and «end» positions accordingly. This functionality can be overridden using the named constants for left and right.

The FAB can be offset from any of the four edges to precisely control its location, although this is not needed in most applications. The offset can be added to the top, bottom, start, end, left or right of the view. Where left and/or right offsets are specified they will both take precedence over start/end offsets.

Note: any offset is applied in addition to the default spacing around the FAB. If you need to counter this, subtract the default spacing ( fab.getOriginalInternalOffset() in Java or fab.originalInternalOffset in Kotlin) from the value you want to use.

The icon displayed in the centre of the FAB can be set via XML using a Drawable reference or with fab.setButtonIconResource(. ) using a Drawable resource ID. The icon will be centred in a 24dp x 24dp view group, as per the Android Material Design specs.

FAB Background Colour

The background colour of the FAB can be set via XML using a colour reference or programmatically with fab.setButtonBackgroundColour(. ) using an aRGB colour value (e.g. 0xffff9900 for dark orange). Note that the second method does not take a colour resource ID, so passing in R.color.some_colour_name will not work.

FAB Click Listener

A click listener can be added to the FAB in the same way as any other button. The view passed to the listener can be safely cast to a FloatingActionButton .

The speed-dial menu is enabled by creating a class that extends SpeedDialMenuAdapter and passing it to fab.setSpeedDialMenuAdapter(. ) . The adapter class methods are documented in-situ.

Speed-Dial Menu Content Cover

The content cover expands from the FAB when the speed-dial menu is opened to obscure the rest of the app content and emphasise the menu. It also prevents controls in the rest of the app from being clicked on while the speed-dial menu is open; tapping outside the menu while it is open and the cover is displayed will cause the menu to close.

The colour of the content cover can be set programmatically with fab.setContentCoverColour(. ) using an aRGB colour value (e.g. 0x99ff9900 for a semi-transparent dark orange). Note that this method does not take a colour resource ID, so passing in R.color.some_colour_name will not work.

The cover can be enabled/disabled programmatically with fab.setContentCoverEnabled(. ) .

Speed-Dial Menu State Change Listeners

State change events are fired when the speed-dial menu opens or closes, which can be received with fab.setOnSpeedDialMenuOpenListener(. ) and fab.setOnSpeedDialMenuCloseListener(. ) .

The FAB can be hidden and shown with the fab.hide() and fab.show() methods, and the method fab.isShown() will return a boolean indicating the current state. These methods animate the FAB in and out of visibility and set the entire view container’s visibility to GONE . If the speed-dial menu is open when .hide() is called it will be closed.

If the FAB is hidden in the XML layout (i.e. with android:visibility=»gone» ) when initialise the FAB will start in the correct hidden state and can still be shown/hidden with the fab.hide() and fab.show() methods.

The speed-dial menu can be manually opened and closed with fab.openSpeedDialMenu() and fab.closeSpeedDialMenu() . These methods will do nothing if no speed-dial menu adapter is set, if an adapter is set but disabled, if the FAB is hidden, or if they are called when the menu is already in the indicated state (i.e. fab.openSpeedDialMenu() will do nothing if the menu is already open).

Access to Underlying Views

The FAB’s key underlying views can be accessed using the three properties/methods detailed below:

The card view is implemented as a CardView on SDK 21+ and a LinearLayout on SDK 20 and below.

The content cover view and icon wrapper are implemented as a View and LinearLayout respectively on all SDKs.

Note: Known Compatibility Issues

In Android 4.x there is an issue with Vector Drawable icons. If you want to use Vector Drawables as icons (e.g app:buttonIcon=»@drawable/ic_add» ) you will need to add the following snippet in your Activity classes.

Note: Click Action Priority

As per Material Design specs, the FAB functions as a regular button or a trigger for the speed-dial menu, but not both. For this reason, the click listener and the speed-dial menu are never invoked at the same time.

The speed-dial menu is given priority: when the FAB is clicked the speed-dial menu will be shown if the speed-dial menu adapter is non-null, the adapter’s isEnabled() function returns true and the adapter’s getCount() returns a number greater than zero. Otherwise, the FAB’s click listener will be called (if it has been set).

Setting a speed-dial menu adapter does not remove the click listener, and setting a click listener does not remove the speed-dial menu adapter. For an example of how the two operation modes interact, check the demo app’s source code.

To receive state change updates when the speed-dial menu is opened or closed, use the open/close listeners described above.

Note: State Preservation

The following properties are preserved when a configuration change (like a screen orientation change) happens:

• FAB hidden/shown
• FAB position
• FAB background colour
• FAB icon
• Speed-dial menu content cover colour
• Speed-dial menu content cover enabled/disabled

The following properties are not preserved and will need to be restored by the parent activity/fragment:

• FAB click listener
• Speed-dial menu adapter
• Speed-dial menu open/close listeners

About

Floating action button (FAB) for Android with speed-dial menu functionality

Источник