Skip to content
This repository has been archived by the owner on Dec 17, 2021. It is now read-only.

Speed Dial Button

Ryan Bishop Mayobre edited this page Jun 24, 2020 · 2 revisions

Speed Dial Button

A FAB that expands into a series of mini FABs with different options per button. The main FAB in this button is to display all the mini FABs as the multiple options for a user to select from.

Kotlin Functions

Hide and Show SpeedDial button

  • show(): Unit - If SpeedDial is hidden, this will reveal it.

  • hide(): Unit - Hide the SpeedDial button.

  • setShowAnimation(animation: Animation, listener: Animation.AnimationListener? = null) - Set a custom animation for revealing a hidden SpeedDial button.

  • setHideAnimation(animation: Animation, listener: Animation.AnimationListener? = null) - Set a custom animation for hiding a SpeedDial button.

Registering SpeedDialActions to SpeedDial

  • addAction(action: SpeedDialAction): Boolean - Register a SpeedDialAction to the SpeedDial button.

  • removeAction(action: SpeedDialAction): Boolean - Remove a SpeedDialAction from the SpeedDial button.

Setting an Icon

Setting an icon is very flexible. You can set one Icon to always appear, or you can set two icons; one that appears when the SpeedDial is expanded, and another when the SpeedDial is collapsed. You can also animate the collapse and expansion.

fun setIcon(
    @DrawableRes collapseIconRes: Int,
    @DrawableRes expandIconRes: Int? = null,
    @AnimRes collapseAnimRes: Int? = null,
    @AnimRes expandAnimRes: Int? = null
)

Function above will set icons and animations by resource IDs.

fun setIcon(
    collapseIconDrawable: Drawable,
    expandIconDrawable: Drawable? = null,
    collapseAnim: Animation? = null,
    expandAnim: Animation? = null
)

Function above will set icons and animations by Drawable and Animation objects.

Other Functions

  • setScaleType(type: ImageView.ScaleType) - Set the ImageView ScaleType for the main button of the SpeedDial.

  • setFabColor(@ColorRes color: Int) - Set the color of the main button.

  • setOverlayColor(@ColorRes color: Int) - Set the overlay color (works best if color has a transparency).

XML Attributes

  • app:fabColor - Set the color for the SpeedDial button.

  • app:overlayColor - Set the color for the overlay when the SpeedDial expands.

  • app:fabMargin - Set the margin for the button.

  • app:fabMarginTop - Set the top margin for the button.

  • app:fabMarginBottom - Set the bottom margin for the button.

  • app:fabMarginStart - Set the starting margin for the button.

  • app:fabMarginEnd - Set the ending margin for the button.

  • app:collapsedIcon - Set the icon for the collapsed button.

  • app:expandedIcon - Set the icon for the expanded button.

  • app:collapseAnim - Set the collapsing animation.

  • app:expandAnim - Set the Expanding animation.

  • app:showAnim - Set the show animation.

  • app:hideAnim - Set the hide animation.

  • app:scaleType - Set the scale type: matrix, fitXY, fitStart, fitCenter, fitEnd, center, centerCrop, ceneterInside.

Example

SpeedDial.gif

XML Layout

<?xml version="1.0" encoding="utf-8"?>
<androidx.coordinatorlayout.widget.CoordinatorLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <com.google.android.material.appbar.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <androidx.appcompat.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

        </com.google.android.material.appbar.AppBarLayout>

        <androidx.recyclerview.widget.RecyclerView
            android:id="@+id/recyclerView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp"
            android:layout_marginBottom="3dp"/>

    </LinearLayout>

    <com.multibutton.library.SpeedDial
        android:id="@+id/speedDialButton"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.multibutton.library.HideOnScrollBehavior"
        app:collapsedIcon="@drawable/ic_add_white"
        app:expandedIcon="@drawable/ic_add_white"
        app:collapseAnim="@anim/fab_rotate_backward"
        app:expandAnim="@anim/fab_rotate_forward"
        app:showAnim="@anim/fab_slide_up"
        app:hideAnim="@anim/fab_slide_down"
        app:fabColor="@color/colorPrimary"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

Speed Dial Actions

These are the mini FABs within a Speed Dial button. They are the multiple options to select from within a speed dial. Each action can optionally have a label next them to describe the button's purpose.

Construction

Construction for a SpeedDialAction follows a builder design. To construct an action, called SpeedDialAction.Builder(context: Context) and then call the build() function to construct a SpeedDialAction.

Builder Functions

  • setId(@IdRes id: Int) - Set an id for your action.

  • setImage(@DrawableRes imageId: Int) - Set a drawable resource as the icon.

  • setBackgroundColor(@ColorRes color: Int) - Set the background color of the action's button.

  • setTextColor(@ColorRes color: Int) - Set text for an action's label.

  • setTextBackgroundColor(@ColorRes color: Int) - Set the label's background color.

  • setLabel(label: String) - Set a label for the action.

  • setOnClickListener(listener: OnClickListener) - Set the listener for click events on the button.

  • setShowAnimation(@AnimRes id: Int) - Set the show animation for the action.

  • setShowAnimation(animation: Animation) - Set the show animation for the action.

  • setHideAnimation(@AnimRes id: Int) - Set the hide animation for the action.

  • setHideAnimation(animation: Animation) - Set the hide animation for the action.

  • setLabelShowAnimation(@AnimRes id: Int) - Set the show animation for the action's label.

  • setLabelShowAnimation(animation: Animation) - Set the show animation for the action's label.

  • setLabelHideAnimation(@AnimRes id: Int) - Set the hide animation for the action's label.

  • setLabelHideAnimation(animation: Animation) - Set the hide animation for the action's label.

Example

val action: SpeedDialAction = SpeedDialAction.Builder(context)
    .setId(R.id.button1)
    .setImage(R.drawable.ic_android_white)
    .setLabel("button 1")
    .setShowAnimation(R.anim.fab_fade_in)
    .setHideAnimation(R.anim.fab_fade_out)
    .build())