CircleMenu for Android
Check this library on other platforms:
![](https://github.com/ramotion/navigation-stack/raw/master/Swift@2x.png?raw=true)
![](https://github.com/ramotion/navigation-stack/raw/master/React Native@2x.png?raw=true)
Looking for developers for your project?
The Android mockup available here.
Requirements
- Android 4.4 KitKat (API lvl 19) 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:
compile 'com.ramotion.circlemenu:circle-menu:0.1.0'
SBT:
libraryDependencies += "com.ramotion.circlemenu" % "circle-menu" % "0.1.0"
Maven:
<dependency>
<groupId>com.ramotion.circlemenu</groupId>
<artifactId>circle-menu</artifactId>
<version>0.1.0</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);
}
});
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
License
CircleMenu for Android is released under the MIT license. See LICENSE for details.
Get the Showroom App for Android to give it a try
Try our UI components in our mobile app. Contact us if interested.
![](https://raw.githubusercontent.com/Ramotion/react-native-circle-menu/master/google_play@2x.png)
![](https://github.com/ramotion/gliding-collection/raw/master/contact_our_team@2x.png?raw=true)
## Follow us