Top Related Projects
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Android Floating Action Button based on Material Design specification
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Quick Overview
The CircularFloatingActionMenu
is an Android library that provides a customizable circular floating action menu. It allows users to display a main floating action button (FAB) that, when clicked, expands to reveal a circular menu with additional action buttons.
Pros
- Customizable Appearance: The library offers a wide range of customization options, allowing developers to adjust the size, color, and animation of the circular menu and its buttons.
- Smooth Animations: The circular menu and its buttons are animated smoothly, providing a visually appealing user experience.
- Easy Integration: The library is easy to integrate into existing Android projects, with clear documentation and sample code provided.
- Flexible Layout: The circular menu can be positioned in various locations on the screen, making it suitable for different app designs.
Cons
- Limited Functionality: The library primarily focuses on the circular floating action menu and does not provide additional features or functionality beyond that.
- Dependency on External Libraries: The library relies on the
com.nineoldandroids:library
andcom.daimajia.easing:library
libraries, which may increase the overall project size. - Potential Performance Issues: Depending on the number of buttons in the circular menu and the complexity of the animations, the library may have a negative impact on the app's performance, especially on older or less powerful devices.
- Lack of Customization for Individual Buttons: While the overall appearance of the circular menu can be customized, the individual buttons within the menu have limited customization options.
Code Examples
Initializing the Circular Floating Action Menu
CircularFloatingActionMenu circularMenu = (CircularFloatingActionMenu) findViewById(R.id.circular_menu);
circularMenu.setMainFabClosedBackgroundColor(Color.BLUE);
circularMenu.setMainFabOpenedBackgroundColor(Color.RED);
circularMenu.setMainFabClosedSrc(R.drawable.ic_add);
circularMenu.setMainFabOpenedSrc(R.drawable.ic_close);
This code initializes the CircularFloatingActionMenu
and sets the background colors and icons for the main FAB in its closed and opened states.
Adding Buttons to the Circular Menu
circularMenu.addSubActionView(
new SubActionButton.Builder(this)
.setBackgroundDrawable(getResources().getDrawable(R.drawable.button_background))
.setContentView(R.layout.sub_action_button)
.build()
);
This code adds a new button to the circular menu, with a custom background drawable and a custom content view.
Handling Button Clicks
circularMenu.setStateChangeListener(new CircularMenuStateChangeListener() {
@Override
public void onMenuOpened() {
// Handle menu opened event
}
@Override
public void onMenuClosed() {
// Handle menu closed event
}
@Override
public void onButtonClicked(int index) {
// Handle button click event
}
});
This code sets a state change listener on the circular menu, allowing the app to respond to events such as the menu being opened or closed, and individual buttons being clicked.
Getting Started
To use the CircularFloatingActionMenu
library in your Android project, follow these steps:
- Add the library to your project's
build.gradle
file:
dependencies {
implementation 'com.oguzdev:CircularFloatingActionMenu:1.0.2'
}
- In your layout XML file, add the
CircularFloatingActionMenu
view:
<com.oguzdev.circularfloatingactionmenu.library.CircularFloatingActionMenu
android:id="@+id/circular_menu"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|end"
android:layout_marginEnd="16dp"
android:layout_marginBottom="16dp" />
- In your activity or fragment, initialize and configure the circular menu:
CircularFloatingActionMenu
Competitor Comparisons
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Pros of Circle Menu Android
- Provides a more visually appealing and interactive circular menu design compared to the standard floating action button.
- Includes various customization options for the menu items, such as size, color, and animation.
- Supports both clockwise and counter-clockwise menu item arrangement.
Cons of Circle Menu Android
- The library may be more complex to integrate and configure compared to the simpler CircularFloatingActionMenu.
- The performance impact of the circular menu animation may be more significant on older or lower-end devices.
- The library may have a larger footprint in terms of file size and dependencies compared to the more lightweight CircularFloatingActionMenu.
Code Comparison
CircularFloatingActionMenu
CircularFloatingActionMenu menu = (CircularFloatingActionMenu) findViewById(R.id.circular_menu);
menu.setMainFabClosedBackgroundColor(Color.WHITE);
menu.setMainFabOpenedBackgroundColor(Color.WHITE);
menu.setMainFabClosedShadowColor(Color.GRAY);
menu.setMainFabOpenedShadowColor(Color.GRAY);
Circle Menu Android
val circleMenu = findViewById<CircleMenu>(R.id.circle_menu)
circleMenu.setMainActionButtonSize(60f)
circleMenu.setMainActionButtonColor(Color.WHITE)
circleMenu.setMainActionButtonShadowColor(Color.GRAY)
circleMenu.setMainActionButtonShadowRadius(10f)
Android Floating Action Button based on Material Design specification
Pros of Clans/FloatingActionButton
- Supports multiple floating action buttons
- Provides customization options for button size, color, and animation
- Includes built-in support for material design guidelines
Cons of Clans/FloatingActionButton
- Limited to a linear layout of buttons
- Lacks the circular layout and animation provided by CircularFloatingActionMenu
- May require more boilerplate code to achieve a similar circular layout
Code Comparison
Clans/FloatingActionButton:
FloatingActionButton fab = (FloatingActionButton) findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Snackbar.make(view, "Replace with your own action", Snackbar.LENGTH_LONG)
.setAction("Action", null).show();
}
});
oguzbilgener/CircularFloatingActionMenu:
CircularFloatingActionMenu menu = (CircularFloatingActionMenu) findViewById(R.id.circular_menu);
menu.setMainFabClosedIcon(R.drawable.ic_add_white_24dp);
menu.setMainFabOpenedIcon(R.drawable.ic_close_white_24dp);
menu.setMainFabOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
menu.toggle(true);
}
});
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
Pros of GuillotineMenu
- Provides a unique and visually appealing menu animation, with a guillotine-like opening and closing effect.
- Supports both portrait and landscape orientations, making it versatile for different device configurations.
- Includes customization options for the menu items, such as changing the icon and text.
Cons of GuillotineMenu
- The library may be more complex to integrate and configure compared to CircularFloatingActionMenu, as it requires more setup and configuration.
- The animation may not be suitable for all types of applications, as the guillotine-like effect may not fit the overall design and user experience.
Code Comparison
CircularFloatingActionMenu (5 lines):
val menu = CircularFloatingActionMenu(context)
menu.addItem(R.drawable.ic_menu_item1, "Item 1")
menu.addItem(R.drawable.ic_menu_item2, "Item 2")
menu.addItem(R.drawable.ic_menu_item3, "Item 3")
menu.show()
GuillotineMenu (5 lines):
let guillotineMenu = GuillotineMenu(menuButton: menuButton, contentView: contentView)
guillotineMenu.delegate = self
guillotineMenu.itemTitleFont = UIFont.systemFont(ofSize: 16)
guillotineMenu.itemIconColor = .white
guillotineMenu.show()
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
CircularFloatingActionMenu
An animated, customizable circular floating menu for Android, inspired by Path app.
Getting Started
Requirements
- API >= 15
Installation
Grab the AAR from Maven Central by adding it as a dependency in your build.gradle file:
dependencies {
compile 'com.oguzdev:CircularFloatingActionMenu:1.0.2'
}
Alternatively, clone the repo and add library
as a module to your project.
Usage
CircularFloatingActionMenu can be attached to any view in your layout. A Floating Action Button implementation is available in the library, with a similar look to new Material Design's FAB.
1 - Create a button to attach the menu:
// in Activity Context
ImageView icon = new ImageView(this); // Create an icon
icon.setImageDrawable( ... );
FloatingActionButton actionButton = new FloatingActionButton.Builder(this)
.setContentView(icon)
.build();
2 - Create menu items:
SubActionButton.Builder itemBuilder = new SubActionButton.Builder(this);
// repeat many times:
ImageView itemIcon = new ImageView(this);
itemIcon.setImageDrawable( ... );
SubActionButton button1 = itemBuilder.setContentView(itemIcon).build();
3 - Create the menu with the items:
FloatingActionMenu actionMenu = new FloatingActionMenu.Builder(this)
.addSubActionView(button1)
.addSubActionView(button2)
// ...
.attachTo(actionButton)
.build();
And you're ready to go!
Customization
Animations, start angle, end angle and radius are customizable via FloatingActionMenu.Builder
.
FloatingActionMenu
is the essential class for the menu. Other two classes, FloatingActionButton
and SubActionButton
are just views and they can be replaced with any other view. You are completely free to create your own menu button and item views.
Existing FloatingActionButton
and SubActionButton
views are customizable too. These parameters can be changed via Builders of both classes:
- Theme (Light / Dark)
- Background drawable
- LayoutParams (width & height)
- Content View
FloatingActionButton
can be placed to one of 8 predefined positions on the screen. To place it somewhere else, extend it!
Custom Animations
You can write your own animation handler class by extending from MenuAnimationHandler
to completely customize menu opening and closing animations.
Then all you need is to create an instance of your custom animation handler and pass it to FloatingActionMenu.Builder
via setAnimationHandler( )
method.
See CustomAnimationHandler
in samples module for a sample animation handler.
Licence
CircularFloatingActionMenu is released under MIT Licence. See file LICENCE.
Top Related Projects
:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion
Android Floating Action Button based on Material Design specification
Our Guillotine Menu Transitioning Animation implemented in Swift reminds a bit of a notorious killing machine.
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