This repository contains a comprehensive practice of Floating Action Buttons (FABs) using Material 3 Expressive in Jetpack Compose. The project demonstrates various FAB types, interactions, and animations to explore their behavior in real-world UI.
I started by implementing all standard FAB types available in Material 3:
- FAB
- Extended FAB
- Small FAB
- Small Extended FAB
- Medium FAB
- Medium Extended FAB
- Large FAB
- Large Extended FAB
Each FAB was styled with different container and content colors, icons, and shapes.
I then learned how to detect long clicks on FABs using InteractionSource and collectIsPressedAsState() to add more interactivity. This lets you trigger custom logic when users long-press a FAB.
Next, I explored the ToggleFloatingActionButton from Material 3. This FAB reacts to toggle state changes by:
- Animating between icons
- Changing shape and color
- Providing a more intuitive and dynamic user experience
Finally, I implemented a fully Expandable FAB Menu using:
FloatingActionButtonMenuToggleFloatingActionButtonFloatingActionButtonMenuItem
This expandable FAB acts as a container for multiple FAB actions and displays/hides items on toggle, enabling compact UI with multiple quick actions.
#Expandable FAB
expandable_fab.mp4
- Language: Kotlin
- Framework: Jetpack Compose
- UI Kit: Material 3 Expressive
- Tools: Android Studio, Compose Preview, InteractionSource
Understanding different FAB types and interactions is essential for building modern Android UIs. This project helped me explore how to:
- Use Material 3 expressive components
- Work with advanced FAB states and interactions
- Build responsive and interactive FAB menus