Skip to content

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

Open
Vinnih-1 wants to merge 10 commits intodeveloperchunk:mainfrom
Vinnih-1:feature/animated-fab-component
Open

feat(fab): add Floating Action Button feature with Stack, Radial and Morph variants#17
Vinnih-1 wants to merge 10 commits intodeveloperchunk:mainfrom
Vinnih-1:feature/animated-fab-component

Conversation

@Vinnih-1
Copy link
Contributor

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
Copy link
Owner

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
Copy link
Owner

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
Copy link
Contributor Author

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!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants