Menu with items on a rotating circle

Overview

Circle Menu

This is a simple implementation of a circle menu for Android applications.

Deprecated

ConstraintLayout 1.1.0 is now supporting circular positioning, which makes the use of this library deprecated.

Screenshots

Circle menu screenshot

Download

Grab via Maven

<dependency>
    <groupId>com.github.szugyi</groupId>
    <artifactId>Android-CircleMenu</artifactId>
    <version>2.0.0</version>
</dependency>

or Gradle:

compile 'com.github.szugyi:Android-CircleMenu:2.0.0'

Snapshots of the development version are available in Sonatype's snapshots repository.

Android-CircleMenu requires Android 4.0.

Attributes

  • firstChildPosition ([East, South, West, North]) - The angle where the first child of the CircleLayout will be put. Possible values are: East - to the right, South - to the bottom, West - to the left, North - to the top. Default: South
  • isRotating (boolean) - Determines wether the child views are rotatable or not. Default: true
  • speed (integer) - You can set the speed of the rotation. NOTE: The higher the value, the faster the rotation. It must be greater than 0. Values between 10 - 100 should work well. Default: 25
  • radius (dimension) - The radius of the circle can be defined using dps or pixels.

EventListeners

  • OnItemClickListener - Called when a child view is tapped. If the isRotating attribute is set to true, then called only if the tapped view is already on the firstChildPosition.
  • OnItemSelectedListener - If the isRotating attribute is set to true, then it is called when the view is rotated to the firstChildPosition. Otherwise it is called with the OnItemClickListener when the child is tapped.
  • OnCenterClickListener - Called when the center of the CircleLayout is tapped.
  • OnRotationFinishedListener - If the isRotating attribute is set to true, then it is called when the rotation is finished, and passes the view which is on the firstChildPosition. Otherwise it is never called.

Changelog

Description about the changes made to each version of the project can be found in the CHANGELOG.md file.

Credits

Special thanks to Balázs Varga, who helped me during the implementation of this custom view.

A lot of code snippets have been used from this great tutorial: http://mobile.tutsplus.com/tutorials/android/android-sdk-creating-a-rotating-dialer/

The icons used in the example app are from: http://flaticons.net/

Comments
  • add my custom CircleImageViews inside CircleLayout

    add my custom CircleImageViews inside CircleLayout

    Hello, thanks for great library. I want to achieve following in android :

    https://www.youtube.com/watch?v=QB-K_maFoYw

    I started with your library. But when i added my wheel images childs are not arranged properly. Here is output screenshot :

    https://www.dropbox.com/s/2nxykthqkwy0uot/Wheel.mp4?dl=0

    Here is my code :

    `

    <com.szugyi.circlemenu.view.CircleLayout
        android:id="@+id/circle_layout"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/imgspin"
        android:layout_gravity="center_horizontal"
        android:layout_marginBottom="-500dp"
        android:foregroundGravity="bottom"
        circle:isRotating="true">
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/local"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/onlineretailers"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/fashion"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/foodrestaurants"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:adjustViewBounds="true"
            android:src="@drawable/groupsavings"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/homeauto"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/holidaysales"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/realestate"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/b2b"
            circle:isRotating="false" />
    
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/healthbeauty"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/trialsoffers"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/flashsales"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/travelvacation"
            circle:isRotating="false" />
    
        <com.szugyi.circlemenu.view.CircleImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/dailydeals"
            circle:isRotating="false" />
    
    </com.szugyi.circlemenu.view.CircleLayout>
    

    Please help. Thanks in advance. `

    question 
    opened by hardikJoshi123 14
  • Child icons placing outline of the image . How to reduce the radius

    Child icons placing outline of the image . How to reduce the radius

    Thanks for the Wonderful Library .. I have problem diffcult to find the solution ..

    Problem is Child Icons are not clear visible. It place end of ViewGroup How to reduce the radius and show the icon clear visible to center of border/stroke. screenshot_2016-06-01-17-11-43

    and other question it is possible to rotate the background image based upon ACTION_MOVE Thanks in Advance

    question 
    opened by ananthDev 9
  • click to item

    click to item

    I have downloaded ur source code and then i click to the item and it spin to the firstChildPosition , but i cant find where u use this code in your source code . THanks

    question 
    opened by toptuto 8
  • Support infinity loading A-Z/Z-A, set raduis ratio in xml attr.

    Support infinity loading A-Z/Z-A, set raduis ratio in xml attr.

    Supporting infinity item displaying > Will be helpful when display half wheel. Support Load more from server with pagination. Support Load more with sort= {A-Z , Z-A}.

    opened by KhaledLela 7
  • implement a central icon

    implement a central icon

    Hi, Thank you for this wonderful & super useful widget. Would it be possible to implement an icon in the center. When the icon is clicked, the menu would pop-up? At that point the icon changes to a cancel icon. When that icon is clicked again, the circle menu closes. You can see an example in iOS here. https://github.com/Ramotion/circle-menu

    Ideally, the central button could be placed any where (say center point of the North-East quadrant), and if the radius was set to that half the size of the quadrant, the menu would show up in that North-East quadrant

    Thanks in advance.

    enhancement 
    opened by drturing 4
  • setOnLongClickListener for remove circle child

    setOnLongClickListener for remove circle child

    Thanks szugyi for share, for remove child of circle ,need set On long click for child, is it possible? generally, is it possible to remove child dynamically?

    question 
    opened by reza007 4
  • Radius

    Radius

    Hi , Your library is very awesome . I have 2 question. Can i increase the radius of the CircleLayout ? If yes , how ? How can i make the item bigger when that item is at firstChildPosition ? Thanks

    question 
    opened by tohai666 3
  • Zoom image item during rotate

    Zoom image item during rotate

    Thank you for your project. It's magic. But I'd like to zoom out and zoom in image item gradually based on its angle when rotate. How can I solve my problem? See your answer soon. Thanks, again.

    question 
    opened by strictlad 3
  • Do something when the wheel rotating

    Do something when the wheel rotating

    Hi, I'm really graceful for this awesome work. Thanks a lot!

    However I have a question. So, I want to play a music, when the wheel is rotating. That's okay I can check the isRotating methods return value, but how can play music for ever, when the wheel rotating? I need an Async task or maybe you have a better idea? (I used this layout via gradle, so I don't exactly change the source code, if it possible.)

    Best regards from a Hungarian android lover! :wink:

    question 
    opened by matolaypal 2
  • Detect whether a gesture was clockwise or anticlockwise?

    Detect whether a gesture was clockwise or anticlockwise?

    Thank you for this wonderful & super useful widget. @szugyi I wonder how to detect whether a gesture was clockwise or anticlockwise,even through reading the source code ,i don't understand.

    // get the quadrant of the start and the end of the fling
                int q1 = getPositionQuadrant(e1.getX() - (circleWidth / 2),
                        circleHeight - e1.getY() - (circleHeight / 2));
                int q2 = getPositionQuadrant(e2.getX() - (circleWidth / 2),
                        circleHeight - e2.getY() - (circleHeight / 2));
    
                if ((q1 == 2 && q2 == 2 && Math.abs(velocityX) < Math
                        .abs(velocityY))
                        || (q1 == 3 && q2 == 3)
                        || (q1 == 1 && q2 == 3)
                        || (q1 == 4 && q2 == 4 && Math.abs(velocityX) > Math
                        .abs(velocityY))
                        || ((q1 == 2 && q2 == 3) || (q1 == 3 && q2 == 2))
                        || ((q1 == 3 && q2 == 4) || (q1 == 4 && q2 == 3))
                        || (q1 == 2 && q2 == 4 && quadrantTouched[3])
                        || (q1 == 4 && q2 == 2 && quadrantTouched[3])) {
                    // the inverted rotations
                    animateTo(
                            getCenteredAngle(angle - (velocityX + velocityY) / 25),
                            25000L / speed);
                } else {
                    // the normal rotation
                    animateTo(
                            getCenteredAngle(angle + (velocityX + velocityY) / 25),
                            25000L / speed);
                }
    

    when q1 == 2 && q2 == 2 && Math.abs(velocityX) < Math .abs(velocityY),i think it also maybe the normal roration,thank you !

    opened by t2314862168 2
  • Multiple code improvements - squid:S2184, squid:UselessParenthesesCheck, squid:S1213, squid:SwitchLastCaseIsDefaultCheck

    Multiple code improvements - squid:S2184, squid:UselessParenthesesCheck, squid:S1213, squid:SwitchLastCaseIsDefaultCheck

    This pull request is focused on resolving occurrences of Sonar rules squid:S2184 - Math operands should be cast before assignment. squid:UselessParenthesesCheck - Useless parentheses around expressions should be removed to prevent any misunderstanding. squid:S1213 - The members of an interface declaration or class should appear in a pre-defined order. squid:SwitchLastCaseIsDefaultCheck - "switch" statements should end with a "default" clause. You can find more information about the issue here: https://dev.eclipse.org/sonar/rules/show/squid:S2184 https://dev.eclipse.org/sonar/rules/show/squid:UselessParenthesesCheck https://dev.eclipse.org/sonar/rules/show/squid:S1213 https://dev.eclipse.org/sonar/rules/show/squid:SwitchLastCaseIsDefaultCheck Please let me know if you have any questions. George Kankava

    opened by georgekankava 2
  • This code is insane

    This code is insane

    This is not an issue, I just wanted to commend you on this amazing piece of code you wrote. I'm guessing you worked off of some other examples or did you do it from scratch? This is a masterpiece! Why would it be deprecated? I can't understand how things like this are not celebrated in modern culture, this thing is almost on par with Mozart's 5th. Thank you for this code! Teach me master!

    opened by emailsubjekt 0
  • Getting Wrong id of items

    Getting Wrong id of items

    I rotated the circle_layout with below code

    RotateAnimation rotate = new RotateAnimation(0, 360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
    	rotate.setDuration(10000);
    	rotate.setInterpolator(new LinearInterpolator());
    	rotate.setRepeatCount(Animation.INFINITE);
    	com.szugyi.circlemenu.view.CircleLayout  image= (com.szugyi.circlemenu.view.CircleLayout)findViewById(R.id.circle_layout);
    	image.startAnimation(rotate);
    

    Now when I click on items they show toasts of different items id ,click is getting wrong in this scenario .

    question 
    opened by adimobiletech 1
  • How can I Implement this design ?

    How can I Implement this design ?

    I have three Items in CircleMenu (What, When, Where). It starts from What screen and end/stop at Where screen. It will never scroll from last to first item like circular.

    What Screen: https://ibb.co/f2Jisx

    When Screen: https://ibb.co/h2HF5H

    question 
    opened by nsuthar20 2
  • First Item in CircleLayout Click not found

    First Item in CircleLayout Click not found

    So i have implemented circleLayout.setOnItemSelectedListener but my problem is I am getting clicks for every other child except the first child in the CircleLayout

    question 
    opened by akshayshah27991 1
Owner
Csaba Szugyiczki
Csaba Szugyiczki
Floating Action Menu for Android. Inspired by the Google Plus floating menu

android-floating-action-menu Floating Action Menu for Android. Inspired by the Google Plus floating menu. Demo Setup The simplest way to use this libr

Alessandro Crugnola 242 Nov 10, 2022
Classic Power Menu is a Power Menu Replacement for Android 11+

Classic Power Menu is a Power Menu Replacement for Android 11+, with the main aim being restoring power menu options (Device Controls & Quick Access Wallet) on Android 12.

Kieron Quinn 385 Dec 31, 2022
an animated circular menu for Android

CircularFloatingActionMenu An animated, customizable circular floating menu for Android, inspired by Path app. Getting Started Requirements API >= 15

Oğuz Bilgener 2.7k Dec 24, 2022
Side menu with some categories to choose.

Side Menu Side menu with some categories to choose. Check this project on dribbble. Check this project on Behance. God bless Ukraine! Sample Sample &

Yalantis 5.2k Dec 23, 2022
You can easily add awesome animated context menu to your app.

ContextMenu You can easily add awesome animated context menu to your app. Check this project on dribbble Check this project on Behance Usage: For a wo

Yalantis 3.8k Dec 28, 2022
imitate Tumblr's menu, dragging animations look like a snake

android-snake-menu imitate Tumblr's menu, dragging animations look like a snake unexpected episode I found another repository some time ago which impl

stone 586 Nov 10, 2022
A menu which can ... BOOM! - Android

BoomMenu 2.0.0 Comes Finally Approximately 8 months ago, I got an inspiration to creating something that can boom and show menu, which I named it Boom

Nightonke 5.8k Dec 27, 2022
:fire: The powerful and easiest way to implement modern material popup menu.

PowerMenu ?? The powerful and easiest way to implement modern material popup menu. PowerMenu can be fully customized and used for popup dialogs. Downl

Jaewoong Eum 1k Dec 29, 2022
** A slide-out menu implementation, which allows users to navigate between views in your app.

MenuDrawer A slide-out menu implementation, which allows users to navigate between views in your app. Most commonly the menu is revealed by either dra

Simon Vig Therkildsen 2.6k Dec 8, 2022
Android Satellite Menu

#Satellite Menu 'Path' has a very attractive menu sitting on the left bottom corner of the screen. Satellite Menu is the open version of this menu. Fo

Siyamed SINIR 1.4k Nov 15, 2022
An android custom view which looks like the menu in Path 2.0 (for iOS).

ArcMenu & RayMenu ArcMenu An android custom view which looks like the menu in Path 2.0 (for iOS). RayMenu About The user experience in Path 2.0 (for i

daCapricorn 1.3k Nov 29, 2022
Tap Bar Menu

TapBar Menu Simple library that helps creating a "Tap Bar" menu layout. Demo 1: https://youtu.be/DjY0cTWWtao Demo 2: https://youtu.be/dWuPMN6WTOY Inst

Mike 1k Jul 26, 2022
(UNMAINTAINED) An implemention of Filter Menu concept for android

FilterMenu This is a library project with a custom view that implements concept of Filter Menu(https://dribbble.com/shots/1956586-Filter-Menu) made by

Lin Zhang 824 Nov 28, 2022
Navigation menu for Android (based off Google+ app)

RibbonMenu Navigation menu for Android (based on Google+ app). Usage Menus are created in xml as normal, adding text and an icon. In the layout you wa

David Scott 487 Nov 24, 2022
Simple and easy to use circular menu widget for Android.

Deprecated This project is no longer maintained. No new issues or pull requests will be accepted. You can still use the source or fork the project to

Anup Cowkur 420 Nov 25, 2022
A multicard menu that can open and close with animation on android

MultiCardMenu A multicard menu that can open and close with animation on android,require API level >= 11 Demo ##Usage <net.wujingchao.android.view.

null 562 Nov 10, 2022
Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app)

Android SideNavigation Library Implementation of "Side Navigation" or "Fly-in app menu" pattern for Android (based on Google+ app). Description The Go

Evgeny Shishkin 319 Nov 25, 2022
CustomMenu quickly realize about the menu

CustomMenu is a custom control that can help you quickly create Menu Features: Only the left menu Only the right menu Together with the right and left

ToviZhao 351 Nov 29, 2022