How To Create a Rotating Wheel Control?

Question

I am trying to implement the Rotatory wheel in android, just like the image displayed below.I came across the tutorial from this link. But i want to implement just as shown in the below image.The wheel consists of individual images.Does anybody have any idea regarding this implementation?? Any help would be appreciated.

Thanks in advance.

Akash

Solution 1

Applied on OnTouchListener on the imageView through which i got three events namely:

1. MotionEvent.ACTION_DOWN,
2. MotionEvent.ACTION_MOVE &
3. MotionEvent.ACTION_UP.

On MotionEvent.ACTION_DOWN got the angle where the users touches and on MotionEvent.ACTION_UP got the angle where user releases.

After getting difference of the two angles,rotated the image of that angle.

After rotating the image checked the quadrant through angle and maintained int variable which incremented according to the quadrant and by fulfilling the condition set the new image(the desired one).

Maintained the click event according to the value of the int variable.

Solution 2

To do this from scratch, you would need a way to transform your touch coordinates, into polar coordinates (to have the rotation angle). This can be done easily like this:

private float cartesianToPolar(float x, float y) {
  return (float) -Math.toDegrees(Math.atan2(x - 0.5f, y - 0.5f));
}

To rotate the imageview, or the element you are using to display your knob, you can use a matrix like this:

Matrix matrix=new Matrix();
ivRotor.setScaleType(ScaleType.MATRIX);   
matrix.postRotate((float) deg, m_nWidth/2, m_nHeight/2);//getWidth()/2, getHeight()/2);
ivRotor.setImageMatrix(matrix);

Where deg is the angle and ivRobor is the knob imageview.

A complete working sample for Android, is available on Google code at: https://code.google.com/p/android-rotaryknob-view/

Comments

[AkashG]

@hardikjoshi i am just using the concept suggested by pareshmayani, in which you would be able to rotate the image, my requirement was to rotate the circle having different sections in the image and get the position of each section while rotating image.

[Zar E Ahmer]

i am stuck in creating a rotatory knob which rotates 150 to 210 degree . Can you help me please see my question here stackoverflow.com/questions/27728913/…

[Zar E Ahmer]

And your given code is not a View, how could i change it to a View? So that i can add it in xml.