Convert Figma logo to code with AI

Ramotion logocircle-menu-android

:octocat: ⭕️ CircleMenu is a simple, elegant UI menu with a circular layout and material design animations. Android UI library made by @Ramotion

1,890
269
1,890
9

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

  1. 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")
    }
}
  1. 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" />
  1. Programmatically opening/closing the menu:
circleMenu.open(true) // Open with animation
circleMenu.close(true) // Close with animation

Getting Started

  1. Add the dependency to your build.gradle file:
dependencies {
    implementation 'com.ramotion.circlemenu:circle-menu:0.3.2'
}
  1. 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" />
  1. 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 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

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:


Twitter Codacy Badge Donate

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.