Customization¶
Overview¶
RadialMenu provides extensive customization options for every visual and behavioral aspect of the component. Whether you call it a radial menu, pie menu, or circular menu, you have full control over colors, radii, icons, item count, and animations.
Colors & Theming¶
You can easily adapt RadialMenu to light and dark modes or to match your brand colors.
Compose Multiplatform¶
Colors are controlled via the RadialMenuColors class. The library provides convenient dark, light, and auto-theme factories.
import io.github.gawwr4v.radialmenu.RadialMenuColors
// Auto-theme follows the system dark mode setting
RadialMenuWrapper(
items = items,
onItemSelected = { /* ... */ },
colors = RadialMenuColors.autoTheme()
) {
// Content...
}
If you need a completely custom palette:
RadialMenuWrapper(
colors = RadialMenuColors(
itemBackground = Color(0xFF424242),
itemBackgroundSelected = Color.White,
iconTint = Color.White,
iconTintSelected = Color.Black,
overlayColor = Color.Black.copy(alpha = 0.5f),
centerIndicatorColor = Color.White.copy(alpha = 0.3f),
badgeColor = Color(0xFFFF4444),
badgeTextColor = Color.White
)
) { ... }
Icons and Labels¶
Icons are defined per RadialMenuItem. We recommend using vector drawables (SVG/XML) for sharp rendering. The id is an integer, and the icon must be converted to a Compose Painter.
val items = listOf(
RadialMenuItem(
id = 1,
icon = painterResource(R.drawable.ic_copy),
label = "Copy" // Label is used for accessibility descriptions
),
RadialMenuItem(
id = 2,
icon = painterResource(R.drawable.ic_paste),
label = "Paste"
)
)
Item Count & Angles¶
The menu automatically divides 360 degrees evenly among the items you provide with a default 45° spacing. There is no hard limit to the number of items, but for usability on mobile touchscreens, we recommend 3 to 8 items. The library will emit a Logcat warning if you exceed 8 items, so you will see a W/RadialMenu message in your console if this threshold is crossed.
Animation¶
The open and close animations are highly customizable. You can use a preset (default, snappy, bouncy, slow) or provide your own physics.
import io.github.gawwr4v.radialmenu.RadialMenuAnimationConfig
// Example: using the bouncy physics preset
RadialMenuWrapper(
animationConfig = RadialMenuAnimationConfig.bouncy()
) { ... }
Customizing everything, including turning on Spring physics overrides:
RadialMenuAnimationConfig(
openDurationMs = 250,
closeDurationMs = 150,
itemScaleDurationMs = 80,
selectedItemScale = 1.6f,
enableSpringAnimation = true,
springDampingRatio = Spring.DampingRatioMediumBouncy,
springStiffness = Spring.StiffnessMedium
)
Full XML Attribute Reference (Android Views)¶
If you are using RadialMenuView inside a traditional Android XML layout, these are the exposed custom attributes you can define dynamically in your layout file:
| XML Attribute | Format | Default Value | Description |
|---|---|---|---|
app:rm_accentColor | color | White | The background color of the currently selected/hovered item. |
app:rm_overlayColor | color | Black 50% | Background dimming scrim color drawn behind the menu. |
app:rm_badgeColor | color | #FF4444 | The color of notification badges attached to items. |
app:rm_menuRadius | dimension | 90dp | The distance from the center touch point to the outer radial items. |
app:rm_iconSize | dimension | 32dp | The width and height of the drawables inside the slices. |
app:rm_animationDurationMs | integer | 100 | Duration in milliseconds for the scale "pop" animation when you hover an item. |