Skip to content

Commit 404aa2b

Browse files
authored
Create README.md
1 parent 26047ca commit 404aa2b

File tree

1 file changed

+143
-0
lines changed

1 file changed

+143
-0
lines changed

README.md

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
# 🌀 CircularMenuCompose
2+
3+
🚀 CircularMenuCompose is a beautiful and interactive Jetpack Compose library for creating elegant circular menus with smooth animations.
4+
5+
---
6+
7+
## ✨ Features
8+
9+
- 🎨 **Customizable UI** – Easily modify colors to match your app’s theme.
10+
11+
- ⚡ Smooth Animations – Expand, rotate, and select menu items with seamless transitions.
12+
13+
- 🔄 Dynamic Menu – Clean, intuitive design with menu items arranged in a circular fashion.
14+
15+
- 🎯 **State Management** – Seamless handling of menu selection and expansion.
16+
17+
-**Lightweight & Fast** – Optimized for performance and smooth user experience.
18+
19+
- 🔧 **Easy to Use** – Simple setup with minimal configuration required.
20+
21+
22+
23+
---
24+
25+
## 📸 Preview
26+
![output](https://github.com/user-attachments/assets/0a8789f5-f54a-4134-8472-2dc7a9e58ce7)
27+
![image](https://github.com/user-attachments/assets/9609ae4a-9c96-46e8-bc6f-fefc7fa0df8b)
28+
29+
30+
---
31+
32+
## 🛠 Usage
33+
34+
### **Step 1: Create a Menu State**
35+
36+
```kotlin
37+
38+
val circularMenus = listOf(
39+
CircularMenuItem(
40+
title = "Home",
41+
icon = CircularMenuIcon.Vector(image = Icons.Default.Home)
42+
),
43+
CircularMenuItem(
44+
title = "AccountCircle",
45+
icon = CircularMenuIcon.Vector(image = Icons.Default.AccountCircle)
46+
),
47+
CircularMenuItem(
48+
title = "Favorite",
49+
icon = CircularMenuIcon.Vector(image = Icons.Default.Favorite)
50+
),
51+
CircularMenuItem(
52+
title = "Build",
53+
icon = CircularMenuIcon.Vector(image = Icons.Default.Build)
54+
),
55+
CircularMenuItem(
56+
title = "Delete",
57+
icon = CircularMenuIcon.Vector(image = Icons.Default.Delete)
58+
)
59+
)
60+
val state = rememberCircularMenuState(
61+
menus = circularMenus,
62+
colors = CircularMenuDefaults.colors(
63+
selectedIconColor = Color(0xFFFFFFFF),
64+
unselectedIconColor = Color(0xFFD97069),
65+
controllerButtonContainerColor = Color(0xFFE31F11),
66+
controllerButtonIconColor = Color(0xFFF5F5F5),
67+
overlayContainerBorderColor = Color(0xFF4A4A4A).copy(alpha = 0.4f)
68+
),
69+
brushes = CircularMenuDefaults.brushes(
70+
overlayContainerBrush = Brush.radialGradient(
71+
listOf(
72+
Color(0xFFFF5722),
73+
Color(0xFF9D2920)
74+
)
75+
),
76+
indicatorBrush = Brush.linearGradient(
77+
listOf(
78+
Color(0xFFD7382E),
79+
Color(0xFFE88D87)
80+
)
81+
),
82+
83+
)
84+
)
85+
```
86+
87+
### **Step 2: Implement the Circular Menu**
88+
89+
```kotlin
90+
CircularMenu(
91+
state = state,
92+
onMenuSelected = { index ->
93+
println("Selected item: $index")
94+
}
95+
)
96+
```
97+
98+
---
99+
100+
## 🎨 Customization
101+
102+
You can change the **colors and brushes** to fit your design:
103+
104+
```kotlin
105+
colors = CircularMenuDefaults.colors(
106+
selectedIconColor = Color(0xFFFFFFFF),
107+
unselectedIconColor = Color(0xFFD97069),
108+
controllerButtonContainerColor = Color(0xFFE31F11),
109+
controllerButtonIconColor = Color(0xFFF5F5F5),
110+
overlayContainerBorderColor = Color(0xFF4A4A4A).copy(alpha = 0.4f)
111+
)
112+
```
113+
114+
```kotlin
115+
brushes = CircularMenuDefaults.brushes(
116+
overlayContainerBrush = Brush.radialGradient(
117+
listOf(
118+
Color(0xFFFF5722),
119+
Color(0xFF9D2920)
120+
)
121+
),
122+
indicatorBrush = Brush.linearGradient(
123+
listOf(
124+
Color(0xFFD7382E),
125+
Color(0xFFE88D87)
126+
)
127+
)
128+
)
129+
```
130+
131+
## 📦 Installation
132+
133+
Clone this repository:
134+
```bash
135+
git clone https://github.com/CoderBDK/CircularMenuCompose.git
136+
```
137+
138+
## License
139+
140+
141+
This project is licensed under the MIT License. See the [LICENSE](LICENSE) file for details.
142+
143+

0 commit comments

Comments
 (0)