feat(fab): add Floating Action Button feature with Stack, Radial and Morph variants

[Vinnih-1]

Hey! It's me again.

Since my last pull request, I've been putting some efforts to create a Floating Action Button feature for JetCo. This pull request introduces three variants of FAB. For now I've created this feature only for the Android platform. I would like your review. Once reviewed, I can extend this component for KMP and do the next steps.

You can check FloatingActionButtonPreview.kt for the implementation details.

What's included

Three fully animated FAB variants built on a shared config system:

• StackFloatingActionButton: expands sub-items linearly in three directions: TOP, START or END. Supports text + icon combinations on the main button.

• RadialFloatingActionButton: spreads sub-items in a configurable arc.

• MorphFloatingActionButton: morphs the FAB into an expandable card grid with a title header, close button.

Variants

Radial	Morph	Stack
Sub-items spread in a configurable arc.	FAB morphs into an expandable card grid with a title header.	Sub-items expand linearly — TOP, START, or END.

[developerchunk]

Hey @Vinnih-1 👋

Thank you so much for putting your efforts into adding a new component, I know it takes a lot of effort to do that!

Please spare me some time, so that I can review it!

Thanks

[developerchunk]

Hey @Vinnih-1 👋

Thank you so much for the PR, the custom Floating Action Buttons look really great! 🙌 We truly appreciate the effort and thought you’ve put into this.

I had a chance to review it and wanted to share a few suggestions that could help us take this even further:

1. Composability & Flexibility
   Currently, BaseFloatingActionButton.kt provides a solid base with basic animations and the FabMainConfig for styling (color, shape, etc.).
   That said, we’d love to move towards a fully customizable composable approach, where developers can pass their own UI content instead of being limited to predefined structure/configs. This would make the component much more flexible.
   It would be great if the passed composable content could also participate in the animations.

2. Animation Capabilities
   The current animation setup in FabMainConfig is a good start, but feels a bit limited. We’d recommend expanding this by supporting more Material motion and transitions.
   This guide might be helpful:
   https://developer.android.com/develop/ui/compose/animation/introduction

3. Modern Interaction Design
   If possible, it would be great to explore more modern and expressive animations with higher customizability.
   You can take inspiration from designs like this:
   https://dribbble.com/shots/23275617-Floating-action-button

These improvements will help us maintain a high standard for the library and make it more powerful for developers.

Thanks again for your contribution, we genuinely value it a lot and are looking forward to your thoughts and updates!

[Vinnih-1]

Hey @developerchunk

I really appreciate your feedback. It's helpful and gives me a clear direction to move forward.

I'll start working on these improvements shortly and update the PR as I make progress. Feel free to share any other references or ideas in the meantime. I'm open to feedback throughout the process!

Thanks again for taking the time to review this so carefully!

[Vinnih-1]

Hey @developerchunk ! It's me again.

After reviewing your suggestions, I decided to overhaul the implementation to ensure this feature is as flexible and useful as possible for developers, giving them full control over how to use it.

Here are the key changes:

Animations

The initial version was quite limited. It used a single class for all animations, and the main FAB was locked into a hardcoded rotation. All items also animated simultaneously. I have now introduced new attributes to allow for deep customization:

val enterOrder: StaggerOrder = StaggerOrder.FIFO,
val exitOrder: StaggerOrder = StaggerOrder.FILO

These attributes in the FabMainConfig animation class allow developers to define the sequence in which items appear or disappear (staggered animations).

We now have two specialized transition classes:

FabItemTransition

This class is responsible for handling item animations during expansion and collapse. It allows developers to combine transitions intuitively using the + operator:

// Combine animations with custom specs using the + operator
enterTransition = FabItemTransition.Scale() + FabItemTransition.Fade() + FabItemTransition.Rotate(-360f),
exitTransition  = FabItemTransition.Scale() + FabItemTransition.Fade() + FabItemTransition.Rotate(0f),

FabButtonTransition

This works similarly to FabItemTransition but offers more granularity for the main button, such as setting specific offsets for expanded and collapsed states:

// Mixing multiple transitions for the main button
buttonEnterTransition = FabButtonTransition.Rotate(135f) + FabButtonTransition.Scale(0.9f) + FabButtonTransition.SlideTo(y = (-8).dp),
buttonExitTransition  = FabButtonTransition.Rotate(0f) + FabButtonTransition.Scale(1f) + FabButtonTransition.SlideTo(y = 0.dp)

Flexibility & Architecture

To better align with JetCo's patterns, I refactored the FAB variants:

• Custom Main FAB: Developers are no longer locked into BaseFloatingActionButton.kt. They can pass their own composable. If none is provided, it defaults to the renamed DefaultFloatingActionButton.
• Item Renaming & Customization: FabSubItem was renamed to FabItem. Developers can now choose between using a pre-built FabItem or creating a fully custom composable using StackFabItem.kt, RadialFabItem.kt, or MorphFabItem.kt.

Modern Interaction

Regarding the implementation of screen interactions: I realized this is most effective with the Stack variant, as other variants occupy more screen real estate. I've implemented a callback that returns an offset. This allows developers to "push" the screen content up or react to the FAB's expansion, leaving the specific screen animation logic in the developer's hands for maximum flexibility.

Variants Visual Guide

Modern/Custom	Radial	Morph	Radial

[developerchunk]

Love the changes @Vinnih-1 ✨

This looks amazing, really appreciate the level of customizability you’ve added. Thank you so much for the effort here, it truly shows 🙌

Just one small suggestion: the animation currently feels a bit sudden. You might want to explore using spring or keyframesWithSplines instead of tween/keyframes. These provide a smoother start and end with a more natural motion in between, which aligns well with modern animation standards.

You can refer to this for more details:
https://developer.android.com/develop/ui/compose/animation/customize

Everything else looks great! I’ll be happy to merge this once the animation is updated.