Radial menu android with button click?

Question

I want to design menu like this.

I have tried animation but it does not retains position of buttons.

if any one have done this type of menu please guide me.

Any help will be appreciated.

enter image description here

Refer to this link http://stackoverflow.com/questions/10222730/how-to-create-a-rotating-wheel-control — Bhavika, Sep 27 '12 at 10:06
[This](http://stackoverflow.com/questions/6857505/creating-a-circular-view-in-android) could help. Also check [this example](http://www.codeproject.com/Articles/146145/Android-3D-Carousel). — Andrei Aulaska, Oct 09 '12 at 13:58
I think [Rotatory wheel in android](https://stackoverflow.com/questions/10222730/how-to-create-a-rotating-wheel-control) which give you perfect idea about to create this type of widget. Its also helpful for me. Also check for [This Example.](http://www.google.co.in/url?sa=t&rct=j&q=rotary%20wheel%20in%20android%20example&source=web&cd=3&ved=0CDQQFjAC&url=https://github.com/VadimDev/android-seekbar-like-ipod-clickwheel&ei=_ctyULDtGpGrrAfwj4GoDQ&usg=AFQjCNEscc_GzQBsl1llVxy2f4nTL5HGbw&cad=rja) — Hardik Joshi, Sep 25 '12 at 06:30

score 9 · Answer 1 · answered Apr 01 '13 at 22:16

I recently created this circular menu to add up in my recent project. It looks like enter image description here

What you need is to create a new View and draw this view, check for the user inputs (where he is touching), design a feedback mechanism, for example, in my view, if user touches any of the 5 arcs, background color changes to skyblue. Here is my code for onDrawMethod.

protected void onDraw(Canvas canvas) {
        // TODO Auto-generated method stub

        px = getMeasuredWidth()/2;     
        py = getMeasuredHeight();


        initial = 144;
        finalangle = 252;

        centerCircleradius  = 30;
        middleCircleRadius = 140;




            int init, fina;
            init = 160;    
            fina = 360;
            finalOVal.set(px-middleCircleRadius-4, py-middleCircleRadius-4, px+middleCircleRadius+4, py+middleCircleRadius+4);
            middleOval.set(px-middleCircleRadius, py-middleCircleRadius, px+middleCircleRadius, py+middleCircleRadius);
            while(init<fina)
            {
                circlePaint.setColor(colors[i]);
                canvas.drawArc(finalOVal,init,10,false, circlePaint);
                i++;
                if(i>=colors.length)
                {
                    i=0;
                }
                init = init + 10;

            }



            canvas.drawArc(middleOval, 180, 180, false, pencil);

            midInitial = 180;


            i=0;

            //Creating the first Arc
            if(arcTouched[0])
            {

                canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            else
            {
                canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            canvas.drawBitmap(bitmap.get(0), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
            midInitial+=36;

            if(arcTouched[1])
            {

                canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            else
            {
                canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            canvas.drawBitmap(bitmap.get(1), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
            midInitial+=36;

            if(arcTouched[2])
            {

                canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            else
            {
                canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            canvas.drawBitmap(bitmap.get(2), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
            midInitial+=36;
            //Creatring the second Arc

            if(arcTouched[3])
            {

                canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            else
            {
                canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            canvas.drawBitmap(bitmap.get(3), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);
            midInitial+=36;

            if(arcTouched[4])
            {

                canvas.drawArc(middleOval, midInitial, 36, true, arcTouchedBack);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            else
            {
                canvas.drawArc(middleOval, midInitial, 36, true, middleCircleBody);
                canvas.drawArc(middleOval, midInitial, 36, true, pencil);
            }
            canvas.drawBitmap(bitmap.get(4), null, (putBitmapTo(midInitial, 36, 140, px, py)), null);           
            canvas.drawCircle(px, py-10, 40, pencil);
            canvas.drawCircle(px, py-10, 39, smallCircleCore);

            canvas.drawCircle(px, py-10, 35, bigArc);
            canvas.drawCircle(px, py-10, 20, smallCircleCore);

            canvas.drawCircle(px, py-10, 15, bigArc);
            canvas.drawLine(px-8, py-10, px+8, py-10, lineCore);

        canvas.save();
    }

Some reference that you might need.

bitmap -> is an arraylist that contains images

arcToched[] -> is an array that defines the background for arc, the values of this boolean array gets modified in onTouchEvent() method.

lineCore, smallCircleCore ..... are paints.

I know this isn't the best way and not professional too. I created this menu as per need. Its not scale able in a way until you change the angle calculations.

This view is highly inspired from Catch Notes Application. The only trouble I face in creating this view was to determine the arc touched. The only animation I used in here are just like again Catch Notes (the one in which circular menu extends a bit more than given size then gets back normal).

i need same functionality. but i need that this menu should scroll also.means like dialer..please help me..please please — AnAndroid, Apr 02 '14 at 16:09
menu looks awesome.can you plz put whole code so that it can be helpful to all. — Mehul Joisar, Jun 20 '14 at 12:29
Please see this question here. I have provided complete code in this question. http://stackoverflow.com/questions/12579224/android-catch-notes-app-like-circle-menu/15752807#15752807 — Gaurav, Jun 20 '14 at 13:16
@Paras Good job, I suggest you add it to your Github account so you and other programmers can fork and update it. — Mazen el Senih, Sep 01 '17 at 16:41

Radial menu android with button click?

1 Answers1

Linked