Convert Figma logo to code with AI

oguzbilgener logoCircularFloatingActionMenu

an animated circular menu for Android

2,739
671
2,739
95

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 and com.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:

  1. Add the library to your project's build.gradle file:
dependencies {
    implementation 'com.oguzdev:CircularFloatingActionMenu:1.0.2'
}
  1. 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" />
  1. 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 Figma logo designs to code with AI

Visual Copilot

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

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.