Radial menu android with button click? [closed]

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.

Answer 1

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

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).