circle-menu-android
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Top Related Projects
Android Floating Action Button based on Material Design specification
Floating Action Button for Android based on Material Design specification
an animated circular menu for Android
A Floating Action Button Speed Dial implementation for Android that follows the Material Design specification (https://material.io/components/buttons-floating-action-button#types-of-transitions)
A multi-functional FAB component with customizable options
Quick Overview
Circle Menu for Android is a simple, elegant UI component that provides a circular menu with smooth animations. It's designed to offer a unique and visually appealing way to present menu options in Android applications, enhancing user experience with its interactive and customizable interface.
Pros
- Visually appealing and unique menu design
- Smooth and customizable animations
- Easy integration into existing Android projects
- Supports both Java and Kotlin
Cons
- Limited to circular layout, which may not fit all app designs
- Potential learning curve for users unfamiliar with circular menus
- May consume more screen space compared to traditional menu options
Code Examples
- Basic implementation:
val circleMenu = findViewById<CircleMenuView>(R.id.circle_menu)
circleMenu.eventListener = object : CircleMenuView.EventListener() {
override fun onMenuOpenAnimationStart(view: CircleMenuView) {
Log.d("CircleMenuView", "onMenuOpenAnimationStart")
}
override fun onMenuOpenAnimationEnd(view: CircleMenuView) {
Log.d("CircleMenuView", "onMenuOpenAnimationEnd")
}
override fun onMenuCloseAnimationStart(view: CircleMenuView) {
Log.d("CircleMenuView", "onMenuCloseAnimationStart")
}
override fun onMenuCloseAnimationEnd(view: CircleMenuView) {
Log.d("CircleMenuView", "onMenuCloseAnimationEnd")
}
override fun onButtonClickAnimationStart(view: CircleMenuView, index: Int) {
Log.d("CircleMenuView", "onButtonClickAnimationStart| index: $index")
}
override fun onButtonClickAnimationEnd(view: CircleMenuView, index: Int) {
Log.d("CircleMenuView", "onButtonClickAnimationEnd| index: $index")
}
}
- Customizing menu items:
<com.ramotion.circlemenu.CircleMenuView
android:id="@+id/circle_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:button_colors="@array/colors"
app:button_icons="@array/icons"
app:icon_color="@android:color/white" />
- Programmatically opening/closing the menu:
circleMenu.open(true) // Open with animation
circleMenu.close(true) // Close with animation
Getting Started
- Add the dependency to your
build.gradle
file:
dependencies {
implementation 'com.ramotion.circlemenu:circle-menu:0.3.2'
}
- Add the
CircleMenuView
to your layout XML:
<com.ramotion.circlemenu.CircleMenuView
android:id="@+id/circle_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
- Initialize and customize the menu in your Activity or Fragment:
val circleMenu = findViewById<CircleMenuView>(R.id.circle_menu)
circleMenu.eventListener = object : CircleMenuView.EventListener() {
// Implement event callbacks as needed
}
Competitor Comparisons
Android Floating Action Button based on Material Design specification
Pros of FloatingActionButton
- Simpler implementation for basic floating action button functionality
- More customization options for button appearance (shadow, colors, etc.)
- Better support for older Android versions
Cons of FloatingActionButton
- Limited to a single button, lacks the circular menu functionality
- Less visually appealing animations compared to circle-menu-android
Code Comparison
circle-menu-android:
val circleMenu = CircleMenuView(this)
circleMenu.setEventListener(object : CircleMenuView.EventListener() {
override fun onMenuOpenAnimationStart(view: CircleMenuView) {
Log.d("CircleMenuView", "onMenuOpenAnimationStart")
}
})
FloatingActionButton:
FloatingActionButton fab = new FloatingActionButton(this);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// Handle click event
}
});
The code comparison shows that circle-menu-android requires more setup for its advanced functionality, while FloatingActionButton offers a simpler implementation for basic button functionality. circle-menu-android provides more complex animations and menu options, whereas FloatingActionButton focuses on a single, customizable button with straightforward click handling.
Floating Action Button for Android based on Material Design specification
Pros of android-floating-action-button
- Simpler implementation focused on a single floating action button
- Easier to integrate into existing projects due to its lightweight nature
- More customization options for the button appearance and behavior
Cons of android-floating-action-button
- Limited to a single button, lacking the circular menu functionality
- Less visually appealing compared to the animated circle menu
- Fewer built-in animation options for button interactions
Code Comparison
circle-menu-android:
val circleMenu = CircleMenuView(this)
circleMenu.setEventListener(object : CircleMenuView.EventListener() {
override fun onMenuOpenAnimationStart(view: CircleMenuView) {
// Handle menu open animation start
}
})
android-floating-action-button:
FloatingActionButton fab = new FloatingActionButton(this);
fab.setIcon(R.drawable.ic_action_add);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// Handle button click
}
});
The code comparison shows that circle-menu-android offers more complex functionality with its circular menu and animation events, while android-floating-action-button provides a simpler implementation focused on a single button with basic click handling.
an animated circular menu for Android
Pros of CircularFloatingActionMenu
- More customizable with options for button size, colors, and animations
- Supports both image and text for menu items
- Allows for dynamic addition/removal of menu items
Cons of CircularFloatingActionMenu
- Less modern design compared to circle-menu-android
- Not actively maintained (last update was several years ago)
- Limited documentation and examples
Code Comparison
CircularFloatingActionMenu:
SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);
ImageView itemIcon = new ImageView(this);
itemIcon.setImageDrawable(getResources().getDrawable(R.drawable.ic_action_chat));
SubActionButton button1 = itemBuilder.setContentView(itemIcon).build();
FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)
.addSubActionView(button1)
.attachTo(actionButton)
.build();
circle-menu-android:
CircleMenuView circleMenuView = findViewById(R.id.circle_menu);
circleMenuView.setEventListener(new CircleMenuView.EventListener() {
@Override
public void onMenuOpenAnimationStart(@NonNull CircleMenuView view) {
Log.d("D", "onMenuOpenAnimationStart");
}
});
Both libraries offer easy-to-use APIs for creating circular menus, but CircularFloatingActionMenu provides more granular control over individual menu items, while circle-menu-android focuses on a more streamlined, modern approach with built-in animations and event listeners.
A Floating Action Button Speed Dial implementation for Android that follows the Material Design specification (https://material.io/components/buttons-floating-action-button#types-of-transitions)
Pros of FloatingActionButtonSpeedDial
- More customizable with options for label positioning, orientation, and animation styles
- Better integration with Material Design guidelines and components
- Supports both vector drawables and icon fonts for menu items
Cons of FloatingActionButtonSpeedDial
- Less visually striking compared to the circular layout of circle-menu-android
- May require more setup code to achieve complex layouts
- Limited to a semi-circular or linear layout, unlike the full circular menu of circle-menu-android
Code Comparison
FloatingActionButtonSpeedDial:
<com.leinardi.android.speeddial.SpeedDialView
android:id="@+id/speedDial"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:sdMainFabClosedSrc="@drawable/ic_add" />
circle-menu-android:
<com.ramotion.circlemenu.CircleMenuView
android:id="@+id/circle_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:button_colors="@array/colors"
app:button_icons="@array/icons" />
Both libraries offer easy-to-use XML implementations, but FloatingActionButtonSpeedDial provides more flexibility in terms of customization through XML attributes. circle-menu-android focuses on a simpler, more visually appealing circular layout with predefined colors and icons.
FloatingActionButtonSpeedDial is better suited for applications requiring a traditional speed dial menu with Material Design integration, while circle-menu-android excels in creating visually striking circular menus with a unique animation style.
A multi-functional FAB component with customizable options
Pros of faboptions
- Simpler implementation with a more straightforward API
- Easier to integrate into existing layouts
- Supports both text and icon options
Cons of faboptions
- Less visually striking compared to the circular animation of circle-menu-android
- Limited customization options for appearance and animations
- Fewer stars and less active development
Code Comparison
faboptions:
<com.joaquimley.faboptions.FabOptions
android:id="@+id/fab_options"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:button_menu="@menu/menu_fab_options" />
circle-menu-android:
<com.ramotion.circlemenu.CircleMenuView
android:id="@+id/circle_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:button_colors="@array/colors"
app:button_icons="@array/icons" />
Both libraries offer easy-to-use XML implementations, but circle-menu-android requires separate arrays for colors and icons, while faboptions uses a standard menu resource.
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual CopilotREADME
CIRCLE MENU [JAVA]
A simple, elegant UI menu with a circular layout and material design animations
We specialize in the designing and coding of custom UI for Mobile Apps and Websites.
Stay tuned for the latest updates:
Requirements
â
- Android 4.1 Jelly Bean (API lvl 16) or greater
- Your favorite IDE
Installation
â Just download the package from here and add it to your project classpath, or just use the maven repo:
Gradle:
implementation 'com.ramotion.circlemenu:circle-menu:0.3.2'
SBT:
libraryDependencies += "com.ramotion.circlemenu" % "circle-menu" % "0.3.2"
Maven:
<dependency>
<groupId>com.ramotion.circlemenu</groupId>
<artifactId>circle-menu</artifactId>
<version>0.3.2</version>
</dependency>
â
Basic usage
Place the CircleMenuView
in your layout and set the icons and colors of the buttons, as shown below.
app:button_colors="@array/colors"
app:button_icons="@array/icons"
Example of arrays colors
and icons
in res\values\buttons.xml
:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="icons">
<item>@drawable/ic_home_white_24dp</item>
<item>@drawable/ic_search_white_24dp</item>
<item>@drawable/ic_notifications_white_24dp</item>
<item>@drawable/ic_settings_white_24dp</item>
<item>@drawable/ic_place_white_24dp</item>
</array>
<array name="colors">
<item>@android:color/holo_blue_light</item>
<item>@android:color/holo_green_dark</item>
<item>@android:color/holo_red_light</item>
<item>@android:color/holo_purple</item>
<item>@android:color/holo_orange_light</item>
</array>
</resources>
Or use the constructor
CircleMenuView(@NonNull Context context, @NonNull List<Integer> icons, @NonNull List<Integer> colors)
to add CircleMenuView
and configure the buttons programmatically (in the code).
Next, connect the event handler CircleMenuView.EventListener
as shown below,
and override the methods you need.
final CircleMenuView menu = (CircleMenuView) findViewById(R.id.circle_menu);
menu.setEventListener(new CircleMenuView.EventListener() {
@Override
public void onMenuOpenAnimationStart(@NonNull CircleMenuView view) {
Log.d("D", "onMenuOpenAnimationStart");
}
@Override
public void onMenuOpenAnimationEnd(@NonNull CircleMenuView view) {
Log.d("D", "onMenuOpenAnimationEnd");
}
@Override
public void onMenuCloseAnimationStart(@NonNull CircleMenuView view) {
Log.d("D", "onMenuCloseAnimationStart");
}
@Override
public void onMenuCloseAnimationEnd(@NonNull CircleMenuView view) {
Log.d("D", "onMenuCloseAnimationEnd");
}
@Override
public void onButtonClickAnimationStart(@NonNull CircleMenuView view, int index) {
Log.d("D", "onButtonClickAnimationStart| index: " + index);
}
@Override
public void onButtonClickAnimationEnd(@NonNull CircleMenuView view, int index) {
Log.d("D", "onButtonClickAnimationEnd| index: " + index);
}
});
You can use open(boolean animate)
and close(boolean animate)
methods,
to open and close menu programmatically
Here are the attributes you can specify through XML or related setters:
button_icons
- Array of buttons icons.button_colors
- Array of buttons colors.icon_menu
- Menu default icon.icon_close
- Menu closed icon.icon_color
- Menu icon color.duration_ring
- Ring effect duration.duration_open
- Menu opening animation duration.duration_close
- Menu closing animation duration.distance
- Distance between center button and buttons
ð Check this library on other language:
ð License
Circle Menu Android is released under the MIT license. See LICENSE for details.
This library is a part of a selection of our best UI open-source projects
If you use the open-source library in your project, please make sure to credit and backlink to www.ramotion.com
ð± Get the Showroom App for Android to give it a try
Try this UI component and more like this in our Android app. Contact us if interested.
Top Related Projects
Android Floating Action Button based on Material Design specification
Floating Action Button for Android based on Material Design specification
an animated circular menu for Android
A Floating Action Button Speed Dial implementation for Android that follows the Material Design specification (https://material.io/components/buttons-floating-action-button#types-of-transitions)
A multi-functional FAB component with customizable options
Convert designs to code with AI
Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.
Try Visual Copilot