Circle Menu Android

Additional

Language
Java
Version
N/A
Created
Sep 20, 2017
Updated
Apr 2, 2019
Owner
Ramotion
Contributors
Juriv
oleg-vasiliev
geoffduong
dvg4000
thewarpaint
RamotionDev
golovin47
alexmik89
8
Activity
Badge
Generate
Download
Source code
APK file

Promotion

CIRCLE MENU [JAVA]

A simple, elegant UI menu with a circular layout and material design animations


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