https://github.com/coderbdk/circularmenucompose
Jetpack Compose Circular Menu is a versatile and interactive UI component library for Android applications.
https://github.com/coderbdk/circularmenucompose
android circular circular-menu compose jetpack-compose kotin menu naviagtion
Last synced: 11 months ago
JSON representation
Jetpack Compose Circular Menu is a versatile and interactive UI component library for Android applications.
- Host: GitHub
- URL: https://github.com/coderbdk/circularmenucompose
- Owner: CoderBDK
- Created: 2025-02-21T17:26:36.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2025-02-22T13:37:06.000Z (over 1 year ago)
- Last Synced: 2025-03-18T02:49:13.525Z (about 1 year ago)
- Topics: android, circular, circular-menu, compose, jetpack-compose, kotin, menu, naviagtion
- Language: Kotlin
- Homepage:
- Size: 106 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🌀 CircularMenuCompose
🚀 CircularMenuCompose is a beautiful and interactive Jetpack Compose library for creating elegant circular menus with smooth animations.
---
## ✨ Features
- 🎨 **Customizable UI** – Easily modify colors to match your app’s theme.
- ⚡ Smooth Animations – Expand, rotate, and select menu items with seamless transitions.
- 🔄 Dynamic Menu – Clean, intuitive design with menu items arranged in a circular fashion.
- 🎯 **State Management** – Seamless handling of menu selection and expansion.
- ✅ **Lightweight & Fast** – Optimized for performance and smooth user experience.
- 🔧 **Easy to Use** – Simple setup with minimal configuration required.
---
## 📸 Preview
---
## 🛠Usage
### **Step 1: Create a Menu State**
```kotlin
val circularMenus = listOf(
CircularMenuItem(
title = "Home",
icon = CircularMenuIcon.Vector(image = Icons.Default.Home)
),
CircularMenuItem(
title = "AccountCircle",
icon = CircularMenuIcon.Vector(image = Icons.Default.AccountCircle)
),
CircularMenuItem(
title = "Favorite",
icon = CircularMenuIcon.Vector(image = Icons.Default.Favorite)
),
CircularMenuItem(
title = "Build",
icon = CircularMenuIcon.Vector(image = Icons.Default.Build)
),
CircularMenuItem(
title = "Delete",
icon = CircularMenuIcon.Vector(image = Icons.Default.Delete)
)
)
val state = rememberCircularMenuState(
menus = circularMenus,
colors = CircularMenuDefaults.colors(
selectedIconColor = Color(0xFFFFFFFF),
unselectedIconColor = Color(0xFFD97069),
controllerButtonContainerColor = Color(0xFFE31F11),
controllerButtonIconColor = Color(0xFFF5F5F5),
overlayContainerBorderColor = Color(0xFF4A4A4A).copy(alpha = 0.4f)
),
brushes = CircularMenuDefaults.brushes(
overlayContainerBrush = Brush.radialGradient(
listOf(
Color(0xFFFF5722),
Color(0xFF9D2920)
)
),
indicatorBrush = Brush.linearGradient(
listOf(
Color(0xFFD7382E),
Color(0xFFE88D87)
)
),
)
)
```
### **Step 2: Implement the Circular Menu**
```kotlin
CircularMenu(
state = state,
onMenuSelected = { index ->
println("Selected item: $index")
}
)
```
---
## 🎨 Customization
You can change the **colors and brushes** to fit your design:
```kotlin
colors = CircularMenuDefaults.colors(
selectedIconColor = Color(0xFFFFFFFF),
unselectedIconColor = Color(0xFFD97069),
controllerButtonContainerColor = Color(0xFFE31F11),
controllerButtonIconColor = Color(0xFFF5F5F5),
overlayContainerBorderColor = Color(0xFF4A4A4A).copy(alpha = 0.4f)
)
```
```kotlin
brushes = CircularMenuDefaults.brushes(
overlayContainerBrush = Brush.radialGradient(
listOf(
Color(0xFFFF5722),
Color(0xFF9D2920)
)
),
indicatorBrush = Brush.linearGradient(
listOf(
Color(0xFFD7382E),
Color(0xFFE88D87)
)
)
)
```
## 📦 Installation
Clone this repository:
```bash
git clone https://github.com/CoderBDK/CircularMenuCompose.git
```
## License
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.