CODEWITHSUNDEEP
androidandroid-widget
Rich
Rich

Reputation: 4207

Android Adjustment Knob Widget

I found an example project for adding an "adjustment knob" to an Android project here:

http://go-lambda.blogspot.com/2012/02/rotary-knob-widget-on-android.html

And, by and large, it's working very well. My project deviates from the example a few ways, but the most significant is that I added the knob widget and a Done button to the display programmatically (no XML), like this: 

activity.getWindowManager().getDefaultDisplay().getMetrics (app.metrics);
RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams
    (300, RelativeLayout.LayoutParams.WRAP_CONTENT);

lp.topMargin            = 100;
lp.bottomMargin         = 598;
lp.leftMargin           = 50;
lp.rightMargin          = 348;

lp.height               = 300;
lp.width                = 300;

activity.addView (knob, lp);

lp = new RelativeLayout.LayoutParams (RelativeLayout.LayoutParams.WRAP_CONTENT,
    RelativeLayout.LayoutParams.WRAP_CONTENT);

int top = (int)(0.75 * app.metrics.heightPixels) - 40;
lp.topMargin            = top - 100;
lp.leftMargin           = 150;
lp.rightMargin          = 100;

act.addView (b1, lp);
knob.requestFocus();

I like how and where the graphics appear (most of the time), but the problem is that when the knob spins, it doesn't appear to be rotating around its center, and as a result wobbles side-to-side (and up-and-down) as the user spins it. It's not affecting the important stuff, but it looks funny and I'd like to fix it.

Upvotes: 1

Views: 3119

Answers (2)

Rich
Rich

Reputation: 4207

Ultimately, the problem was simple (and simultaneously really annoying). The png file provided with the example project was a square and the picture of the knob within it wasn't centered in the square. My android application is obviously not rotating the knob, it's rotating the square png file. The really annoying part was how difficult it was (1) to find a replacement file or (2) fix the original file. Fortunately, I found somebody with the proper tools for item 2. My recommendation: if you need to do something similar in your project, the web site I recommended is very helpful, but you'll want to relace or fix the actual picture.

Upvotes: 1

radhoo
radhoo

Reputation: 2945

The rotating issue in the example posted, it most likely because the control rotates in discrete steps, instead of a smooth incrementation / rotation of the image. What you can do, if to modify the rotation code for a given smaller angle.

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.

I've also put together a complete working sample, in case you need further help. You can see it here: http://www.pocketmagic.net/2013/11/custom-rotary-knob-control-for-android/

Upvotes: 0

Related Questions