Adetunji Dahunsi

Composition over Inheritance; Adding a Material Speed Dial to a Floating Action Button

Material Floating Action Buttons

TJ Dahunsi

Nov 16 2019 · 9 min read

Material Design is an excellent design and visual language on Android, it is also very ambitious, which makes the actual implementation of its guidelines without dropping any of the visual flair a daunting exercise. To this end, the Android community relies on multiple 3rd party libraries and codes samples that provide implementations of these Material patterns, however most of them require inheritance on a customView class that makes it difficult to add more attributes to.

Take for instance, your UI/UX designer initially requests that the FloatingActionButton in your application have a speed dial behavior on a particular screen. To do this, you have a couple of fantastic libraries to choose from:

You pick either of those 2, and you get exactly what is promised; excellent feature rich libraries with well designed APIs. Things are going great till your UI / UX designer decides that under some arcane condition, the FloatingActionButton should first be expanded when the user first enters the screen, then collapse after 2 seconds and resume its speed dial behavior. Furthermore, if the FAB is extended when the user clicks it, it should collapse first, then show the speed dial.

This poses a challenge because these libraries require you to use their own custom Views that are more or less black boxes as far as their standard APIs are concerned. You’d need to peer into their internals to see what’s actually going on and see if you can work around whatever limitations you may have.

This is the classic argument against inheritance for adding extra functionality to a class. None of the elements in a speed dial actually require you to extend from the View whose click should trigger the speed dial. The speed dial rather should either be a function, or independent class which you can call on to get the desired behavior, completely independent of the View clicked.

That being said, let’s go about creating a FAB speed dial that is completely independent of the anchor View for the speed dial action. The requirements are:

  1. The speed dial should work independent of the View subclass of it’s anchor

  2. The anchor View needs to meet the requirement that it initially appears expanded, then collapses itself along with collapsing itself when clicked, and subsequently showing the speed dial.

Fortunately, the Material Components for Android provide an excellent base to build upon for sort of thing. In this case, the anchor View to provide the behavior shall be the [MaterialButton](https://github.com/material-components/material-components-android/blob/master/docs/components/MaterialButton.md). It may be tempting to go with the [ExtendedFloatingActionButton](https://github.com/material-components/material-components-android/blob/master/docs/components/ExtendedFloatingActionButton.md) as it gives expanding behavior out of the box, unfortunately it suffers the same inheritance problems outlined earlier. Expanding and collapsing behavior can be composed independent of the MaterialButton. The implementation of ExtendedFloatingActionButton actually subclasses MaterialButton internally to build upon, which makes the original [FloatingActionButton](https://github.com/material-components/material-components-android/blob/master/docs/components/FloatingActionButton.md) class rather duplicitous and redundant. We hope to achieve something close to the below:

The goal The goal

The crux for the speed dial behavior will be Android’s PopupWindow class which is amazing for displaying an arbitrary View in a window and having full control over its positioning. A Dialog is a bit clunky in this regard as it does a lot and wraps your custom View in other Views that inadvertently mess up the positioning you’d prefer. First, we define a method that lets you pop any View over any other View:

1/** 2 * Pops an orphaned [View] over the specified [anchor] using a [PopupWindow] 3 */ 4fun View.popOver( 5 anchor: View, 6 adjuster: () -> Point = { Point(0, 0) }, 7 options: PopupWindow.() -> Unit = {} 8) { 9 require(!this.isAttachedToWindow) { "The View being attached must be an orphan" } 10 PopupWindow(this.wrapAtAnchor(anchor, adjuster), MATCH_PARENT, MATCH_PARENT, true).run { 11 isOutsideTouchable = true 12 contentView.setOnTouchListener { _, _ -> dismiss(); true } 13 options(this) 14 showAtLocation(anchor, Gravity.START, 0, 0) 15 } 16} 17 18private fun View.wrapAtAnchor(anchor: View, adjuster: () -> Point): View? = FrameLayout(anchor.context).apply { 19 this@wrapAtAnchor.alignToAnchor(anchor, adjuster) 20 addView(this@wrapAtAnchor, ViewGroup.LayoutParams(WRAP_CONTENT, WRAP_CONTENT)) 21} 22 23private fun View.alignToAnchor(anchor: View, adjuster: () -> Point) = intArrayOf(0, 0).run { 24 anchor.getLocationInWindow(this) 25 doOnLayout { 26 val (offsetX, offsetY) = adjuster() 27 val x = this[0].toFloat() + offsetX 28 val y = this[1].toFloat() + offsetY 29 translationX = x; translationY = y 30 } 31}

This method creates a wrapper FrameLayout that fits the whole screen, and adds the View to be popped over the anchor relative to the anchor only after it has been measured. This is necessary because the speed dial can have an arbitrary height and width, and these values are needed for pixel perfect placement after layout.

With the above, we can define the pop up layout and show it relative to the anchor. Since the speed dial should not have more than 5 items, a LinearLayout with dynamically added views will suffice.

1private const val MIRROR = 180F 2private const val INITIAL_DELAY = 0.15F 3 4private val translucentBlack = Color.argb(50, 0, 0, 0) 5 6fun speedDial( 7 anchor: View, 8 @ColorInt tint: Int = anchor.context.themeColorAt(R.attr.colorPrimary), 9 @StyleRes animationStyle: Int = android.R.style.Animation_Dialog, 10 layoutAnimationController: LayoutAnimationController = LayoutAnimationController(speedDialAnimation, INITIAL_DELAY).apply { order = ORDER_NORMAL }, 11 items: List<Pair<CharSequence?, Drawable>>, 12 dismissListener: (Int?) -> Unit 13) = LinearLayout(anchor.context).run [email protected]{ 14 rotationY = MIRROR 15 rotationX = MIRROR 16 clipChildren = false 17 clipToPadding = false 18 orientation = VERTICAL 19 layoutAnimation = layoutAnimationController 20 21 popOver(anchor = anchor, adjuster = getOffset(anchor)) [email protected]{ 22 this.animationStyle = animationStyle 23 24 var dismissReason: Int? = null 25 setOnDismissListener { dismissListener(dismissReason) } 26 27 items.mapIndexed { index, pair -> speedDialLayout(pair, tint, View.OnClickListener { dismissReason = index; dismiss() }) } 28 .forEach(this@root::addView) 29 } 30} 31 32private fun LinearLayout.speedDialLayout(pair: Pair<CharSequence?, Drawable>, tint: Int, clickListener: View.OnClickListener) = LinearLayout(context).apply { 33 rotationY = MIRROR 34 rotationX = MIRROR 35 clipChildren = false 36 clipToPadding = false 37 layoutParams = LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT) 38 39 updatePadding(bottom = context.resources.getDimensionPixelSize(R.dimen.single_margin)) 40 setOnClickListener(clickListener) 41 42 addView(speedDialLabel(tint, pair.first, clickListener)) 43 addView(speedDialFab(tint, pair, clickListener)) 44} 45 46private fun LinearLayout.speedDialLabel(tint: Int, label: CharSequence?, clicker: View.OnClickListener) = AppCompatTextView(context).apply { 47 val dp4 = context.resources.getDimensionPixelSize(R.dimen.quarter_margin) 48 val dp8 = context.resources.getDimensionPixelSize(R.dimen.half_margin) 49 50 isClickable = true 51 background = context.ripple(tint) { setAllCornerSizes(dp8.toFloat()) } 52 53 isVisible = label != null 54 text = label 55 56 layoutParams = LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT).apply { 57 marginEnd = context.resources.getDimensionPixelSize(R.dimen.single_margin) 58 gravity = Gravity.CENTER_VERTICAL 59 } 60 61 updatePadding(left = dp8, top = dp4, right = dp8, bottom = dp4) 62 setOnClickListener(clicker) 63} 64 65private fun LinearLayout.speedDialFab(tint: Int, pair: Pair<CharSequence?, Drawable>, clicker: View.OnClickListener) = AppCompatImageButton(context).apply { 66 val dp40 = context.resources.getDimensionPixelSize(R.dimen.double_and_half_margin) 67 68 imageTintList = null 69 background = context.ripple(tint) { setAllCornerSizes(dp40.toFloat()) } 70 layoutParams = LinearLayout.LayoutParams(WRAP_CONTENT, WRAP_CONTENT).apply { 71 gravity = Gravity.CENTER_VERTICAL 72 height = dp40 73 width = dp40 74 } 75 76 setOnClickListener(clicker) 77 setImageDrawable(if (pair.second !is BitmapDrawable) BitmapDrawable(context.resources, pair.second.toBitmap()) else pair.second) 78} 79 80private fun View.getOffset(anchor: View): () -> Point = { 81 val dp40 = context.resources.getDimensionPixelSize(R.dimen.double_and_half_margin) 82 val halfAnchorWidth = (anchor.width / 2) 83 val halfMiniFabWidth = (dp40 / 2) 84 val xOffset = if (width > anchor.width) halfAnchorWidth + halfMiniFabWidth - width else halfAnchorWidth - halfMiniFabWidth 85 86 Point(xOffset, -(anchor.height / 2) - height) 87} 88 89private fun Context.ripple(tint: Int, shapeModifier: ShapeAppearanceModel.Builder.() -> Unit): RippleDrawable = RippleDrawable( 90 ColorStateList.valueOf(translucentBlack), 91 MaterialShapeDrawable(ShapeAppearanceModel.builder().run { 92 shapeModifier(this) 93 build() 94 }).apply { 95 tintList = ColorStateList.valueOf(tint) 96 setShadowColor(Color.DKGRAY) 97 initializeElevationOverlay(this@ripple) 98 }, 99 null

Notice that the parent LinearLayout mirrors itself around both the x and y axes. This is because the LinearLayout stacks children from top to bottom and left to right. For a speed dial however, the inverse is required, children items stack from bottom to top, and are right aligned. Rather than deal with LayoutParams and gravity for child views, it’s easier to just mirror the parent, and the children displayed within it.

On the animation front, there are two things going on:

  1. The pop up window fade in animation: defaults to the system provided android.R.style.*Animation_Dialog. *This can be overriden if desired.

  2. The speed lateral translation of each item in the speed dial which is set using the layoutAnnimation property of the parent LinearLayout, which is also user customizable. The LinearLayout will run this animation on each child that is added to it.

1private val speedDialAnimation: Animation 2 get() = AnimationSet(false).apply { 3 duration = 200L 4 addAnimation(alpha()) 5 addAnimation(scale()) 6 addAnimation(translate()) 7 } 8 9private fun alpha() = AlphaAnimation(0F, 1F).accelerateDecelerate() 10 11private fun translate(): Animation = TranslateAnimation( 12 RELATIVE_TO_PARENT, 13 0F, 14 RELATIVE_TO_PARENT, 15 0F, 16 RELATIVE_TO_PARENT, 17 SPEED_DIAL_TRANSLATION_Y, 18 RELATIVE_TO_PARENT, 19 0F 20).accelerateDecelerate() 21 22private fun scale(): Animation = ScaleAnimation( 23 SPEED_DIAL_SCALE, 24 1F, 25 SPEED_DIAL_SCALE, 26 1F, 27 RELATIVE_TO_SELF, 28 SPEED_DIAL_SCALE_PIVOT, 29 RELATIVE_TO_SELF, 30 SPEED_DIAL_SCALE_PIVOT 31).accelerateDecelerate() 32 33private const val SPEED_DIAL_TRANSLATION_Y = -0.2F 34private const val SPEED_DIAL_SCALE_PIVOT = 0.5F 35private const val SPEED_DIAL_SCALE = 0.5F 36 37private fun Animation.accelerateDecelerate() = apply { interpolator = AccelerateDecelerateInterpolator() }

At this point all that is left is to animate the rotation of the MaterialButton and to give a halo as it opens up the speed dial. This is the most involved part, and also the part that may need the most customization, and as such, is outside the core behavior to show a speed dial.

In the following implementation, the entry point is a View.OnClickListener that can be attached to any View. The moment the View is clicked, the instance verifies the View clicked is a MaterialButton and is in a state to run, then goes ahead to animate the, stroke, rotation and transparency to give the desired effect. It knows nothing of the expanding or collapsing behabior of the FAB. Externally, if the MaterialButton is an [ExtendedFloatingActionButton](https://github.com/material-components/material-components-android/blob/master/docs/components/ExtendedFloatingActionButton.md), a callback can be attached to it to call performClick on itself after it the collapse has finished animating. In my case, I do the same with a custom class I wrote called a [FabExtensionAnimator](https://github.com/tunjid/Android-Extensions/blob/develop/material/src/main/java/com/tunjid/androidx/material/animator/FabExtensionAnimator.kt).

1class SpeedDialClickListener( 2 @ColorInt private val tint: Int = Color.BLUE, 3 private val items: List<Pair<CharSequence?, Drawable>>, 4 private val runGuard: (View) -> Boolean, 5 private val dismissListener: (Int?) -> Unit 6) : View.OnClickListener { 7 8 override fun onClick(button: View?) { 9 if (button !is MaterialButton || !runGuard(button)) return 10 11 val rotationSpring = button.spring(DynamicAnimation.ROTATION) 12 if (rotationSpring.isRunning) return 13 14 val flipRange = 90F..180F 15 val context = button.context 16 val colorFrom = context.themeColorAt(R.attr.colorPrimary) 17 val colorTo = context.themeColorAt(R.attr.colorAccent).run { 18 Color.argb(20, Color.red(this), Color.green(this), Color.blue(this)) 19 } 20 21 button.strokeColor = ColorStateList.valueOf(context.themeColorAt(R.attr.colorAccent)) 22 23 rotationSpring.apply { 24 doInRange(flipRange) { button.icon = button.context.drawableAt(R.drawable.ic_unfold_less_24dp) } 25 animateToFinalPosition(225F) // re-targeting will be idempotent 26 } 27 28 val animators = button.haloEffects(colorFrom, colorTo, context) 29 30 speedDial(anchor = button, tint = tint, items = items, dismissListener = [email protected]{ index -> 31 animators.forEach(ValueAnimator::cancel) 32 33 rotationSpring.apply { 34 if (!isRunning) { 35 doInRange(flipRange) { button.icon = button.context.drawableAt(R.drawable.ic_unfold_more_24dp) } 36 withOneShotEndListener { dismissListener(index) } 37 } 38 39 animateToFinalPosition(0F) 40 } 41 42 if (index == null) button.haloEffects(colorFrom, colorTo, context) 43 }) 44 } 45 46 private fun MaterialButton.haloEffects(colorFrom: Int, colorTo: Int, context: Context) = listOf( 47 roundAbout(colorFrom, colorTo, ArgbEvaluator(), { backgroundTintList!!.defaultColor }) { backgroundTintList = ColorStateList.valueOf(it as Int) }, 48 roundAbout(0, context.resources.getDimensionPixelSize(R.dimen.quarter_margin), IntEvaluator(), this::getStrokeWidth, this::setStrokeWidth) 49 ) 50 51 private inline fun <reified T> roundAbout( 52 originalPosition: T, 53 nextPosition: T, 54 evaluator: TypeEvaluator<T>, 55 crossinline getter: () -> T, 56 crossinline setter: (T) -> Unit 57 ) = ValueAnimator.ofObject(evaluator, getter(), nextPosition).apply { 58 duration = 200L 59 addUpdateListener { setter(it.animatedValue as T) } 60 doOnEnd { 61 setObjectValues(getter(), originalPosition) 62 removeAllListeners() 63 start() 64 } 65 start() 66 } 67 68 private fun SpringAnimation.doInRange(range: ClosedRange<Float>, action: () -> Unit) = apply { 69 var flipped = false 70 withOneShotUpdateListener [email protected]{ value, _ -> 71 if (flipped || !range.contains(value)) return@update 72 action() 73 flipped = true 74 } 75 } 76}

With the above, the output looks like this:

Implementation of an expanding FAB collapsing to a speed dial Implementation of an expanding FAB collapsing to a speed dial

With the above, the speed dial is completely independent of whatever View is attached to. If a new Material Design spec came out, the behavior can be easily moved to any View with no overhead. In the case where both the extension of the FAB and the speed dial are both independent of the FAB, things are even better as there’s a much higher separation of concerns.

The implementation in the host fragment follows:

1class SpeedDialFragment : AppBaseFragment(R.layout.fragment_speed_dial) { 2 3 private val color 4 get() = if (requireContext().isDarkTheme) Color.BLACK else Color.WHITE 5 6 override fun onViewCreated(view: View, savedInstanceState: Bundle?) { 7 super.onViewCreated(view, savedInstanceState) 8 9 val context = view.context 10 11 uiState = uiState.copy( 12 toolbarTitle = this::class.java.routeName, 13 toolbarShows = true, 14 toolBarMenu = 0, 15 fabShows = true, 16 fabExtended = true, 17 fabText = getString(R.string.speed_dial), 18 fabIcon = R.drawable.ic_unfold_more_24dp, 19 showsBottomNav = false, 20 lightStatusBar = !context.isDarkTheme, 21 navBarColor = context.themeColorAt(R.attr.nav_bar_color), 22 fabClickListener = SpeedDialClickListener( 23 tint = context.themeColorAt(R.attr.colorAccent), 24 items = speedDialItems(), 25 runGuard = this@SpeedDialFragment::fabExtensionGuard, 26 dismissListener = this@SpeedDialFragment::onSpeedDialClicked 27 ) 28 ) 29 30 view.postDelayed(2000) { if (isResumed) uiState = uiState.copy(fabExtended = false) } 31 } 32 33 private fun speedDialItems(): List<Pair<CharSequence?, Drawable>> = requireActivity().run { 34 listOf( 35 getString(R.string.expand_fab).color(color) to drawableAt(R.drawable.ic_expand_24dp) 36 ?.withTint(color)!!, 37 getString(R.string.option_1).color(color) to drawableAt(R.drawable.ic_numeric_1_outline_24dp) 38 ?.withTint(color)!!, 39 getString(R.string.option_2).color(color) to drawableAt(R.drawable.ic_numeric_2_outline_24dp) 40 ?.withTint(color)!!) 41 } 42 43 private fun onSpeedDialClicked(it: Int?) = when (it) { 44 0 -> uiState = uiState.copy(fabExtended = true) 45 else -> Unit 46 } 47 48 private fun fabExtensionGuard(view: View): Boolean { 49 if (!uiState.fabExtended) return true 50 uiState = uiState.copy( 51 fabExtended = false, 52 fabTransitionOptions = { speedDialRecall(view) } 53 ) 54 return false 55 } 56 57 private fun Transition.speedDialRecall(view: View) = doOnEnd { 58 if (uiState.fabExtended) return@doOnEnd 59 uiState.fabClickListener?.onClick(view) 60 uiState = uiState.copy(fabTransitionOptions = null) 61 } 62 63 companion object { 64 fun newInstance(): SpeedDialFragment = SpeedDialFragment().apply { arguments = Bundle() } 65 } 66}

The adage rings true, whenever you can, favor composition over inheritance.

You can find the sample code for this post in it’s entirety here: