I want to show progress bar around knob. After following this tutorial I created this knob it is working fine.
But How could i modify the above knob to look like the second image
Running code for the first knob is written below.
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Matrix;
import android.graphics.Paint;
import android.graphics.RectF;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.View.MeasureSpec;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.ImageView.ScaleType;
import android.widget.RelativeLayout;
public class RoundKnobButton extends RelativeLayout implements
OnGestureListener
{
public int eventValue=10;
//doctory starts
Paint p1,p2,p3;
RectF oval;
int width;
//doctory ends
private GestureDetector gestureDetector;
private float mAngleDown, mAngleUp;
private ImageView ivRotor;
private Bitmap bmpRotorOn, bmpRotorOff;
private boolean mState = false;
private int m_nWidth = 0, m_nHeight = 0;
public interface RoundKnobButtonListener
{
public void onStateChange(boolean newstate);
public void onRotate(int percentage);
}
private RoundKnobButtonListener m_listener;
public void SetListener(RoundKnobButtonListener l)
{
m_listener = l;
}
public void SetState(boolean state)
{
mState = state;
ivRotor.setImageBitmap(state ? bmpRotorOn : bmpRotorOff);
}
public RoundKnobButton(Context context, int back, int rotoron,
int rotoroff, final int w, final int h) {
super(context);
//doctory starts
width = w;
p1 = new Paint(1);
p1.setColor(Color.rgb(86, 86, 86));
p1.setStyle(android.graphics.Paint.Style.FILL);
p2 = new Paint(1);
p2.setColor(Color.rgb(245, 109, 89));
p2.setStyle(android.graphics.Paint.Style.FILL);
p3 = new Paint(1);
p3.setColor(Color.GREEN);
p3.setStyle(android.graphics.Paint.Style.STROKE);
oval = new RectF();
//doctory ends...
// we won't wait for our size to be calculated, we'll just store out
// fixed size
m_nWidth = w;
m_nHeight = h;
// create stator
ImageView ivBack = new ImageView(context);
ivBack.setImageResource(back);
RelativeLayout.LayoutParams lp_ivBack = new RelativeLayout.LayoutParams(
w, h);
lp_ivBack.addRule(RelativeLayout.CENTER_IN_PARENT);
addView(ivBack, lp_ivBack);
// load rotor images
Bitmap srcon = BitmapFactory.decodeResource(context.getResources(),
rotoron);
Bitmap srcoff = BitmapFactory.decodeResource(context.getResources(),
rotoroff);
float scaleWidth = ((float) w) / srcon.getWidth();
float scaleHeight = ((float) h) / srcon.getHeight();
Matrix matrix = new Matrix();
matrix.postScale(scaleWidth, scaleHeight);
bmpRotorOn = Bitmap.createBitmap(srcon, 0, 0, srcon.getWidth(),
srcon.getHeight(), matrix, true);
bmpRotorOff = Bitmap.createBitmap(srcoff, 0, 0, srcoff.getWidth(),
srcoff.getHeight(), matrix, true);
// create rotor
ivRotor = new ImageView(context);
ivRotor.setImageBitmap(bmpRotorOn);
RelativeLayout.LayoutParams lp_ivKnob = new RelativeLayout.LayoutParams(
w, h);// LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
lp_ivKnob.addRule(RelativeLayout.CENTER_IN_PARENT);
addView(ivRotor, lp_ivKnob);
// set initial state
SetState(mState);
// enable gesture detector
gestureDetector = new GestureDetector(getContext(), this);
}
/**
* math..
*
* @param x
* @param y
* @return
*/
private float cartesianToPolar(float x, float y) {
return (float) -Math.toDegrees(Math.atan2(x - 0.5f, y - 0.5f));
}
@Override
public boolean onTouchEvent(MotionEvent event) {
if (gestureDetector.onTouchEvent(event))
return true;
else
return super.onTouchEvent(event);
}
public boolean onDown(MotionEvent event)
{
float x = event.getX() / ((float) getWidth());
float y = event.getY() / ((float) getHeight());
mAngleDown = cartesianToPolar(1 - x, 1 - y);// 1- to correct our custom
// axis direction
return true;
}
public boolean onSingleTapUp(MotionEvent e)
{
float x = e.getX() / ((float) getWidth());
float y = e.getY() / ((float) getHeight());
mAngleUp = cartesianToPolar(1 - x, 1 - y);// 1- to correct our custom
// axis direction
// if we click up the same place where we clicked down, it's just a
// button press
if (!Float.isNaN(mAngleDown) && !Float.isNaN(mAngleUp)
&& Math.abs(mAngleUp - mAngleDown) < 10) {
SetState(!mState);
if (m_listener != null)
m_listener.onStateChange(mState);
}
return true;
}
public void setRotorPosAngle(float deg)
{
if (deg >= 210 || deg <= 150)
{
if (deg > 180)
deg = deg - 360;
Matrix matrix = new Matrix();
ivRotor.setScaleType(ScaleType.MATRIX);
// matrix.postRotate((float) deg, 210 / 2, 210 / 2);// getWidth()/2,
// getHeight()/2);
matrix.postRotate((float) deg, m_nWidth/2, m_nHeight/2);//getWidth()/2, getHeight()/2);
ivRotor.setImageMatrix(matrix);
}
}
public void setRotorPercentage(int percentage)
{
int posDegree = percentage * 3 - 150;
if (posDegree < 0)
posDegree = 360 + posDegree;
setRotorPosAngle(posDegree);
}
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX,
float distanceY) {
float x = e2.getX() / ((float) getWidth());
float y = e2.getY() / ((float) getHeight());
float rotDegrees = cartesianToPolar(1 - x, 1 - y);// 1- to correct our
// custom axis
// direction
if (!Float.isNaN(rotDegrees)) {
// instead of getting 0-> 180, -180 0 , we go for 0 -> 360
float posDegrees = rotDegrees;
if (rotDegrees < 0)
posDegrees = 360 + rotDegrees;
// deny full rotation, start start and stop point, and get a linear
// scale
if (posDegrees > 210 || posDegrees < 150) {
// rotate our imageview
setRotorPosAngle(posDegrees);
// get a linear scale
float scaleDegrees = rotDegrees + 150; // given the current
// parameters, we go
// from 0 to 300
// get position percent
int percent = (int) (scaleDegrees / 3);
if (m_listener != null)
m_listener.onRotate(percent);
return true; // consumed
} else
return false;
} else
return false; // not consumed
}
public void onShowPress(MotionEvent e) {
// TODO Auto-generated method stub
}
public boolean onFling(MotionEvent arg0, MotionEvent arg1, float arg2,
float arg3) {
return false;
}
public void onLongPress(MotionEvent e) {
}
/*@Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
int i = width / 4;
oval.set(i - i / 2, i / 2, i * 3 + i / 2, i * 3 + i / 2);
canvas.drawOval(oval, p1);
canvas.drawArc(oval, -90F, (int)Math.round((360D * Double.valueOf(eventValue).doubleValue()) / 100D), true, p2);
canvas.drawLine(20, 30, 120, 200, p2);
}*/
/*@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
int desiredWidth = width;
int desiredHeight = width;
int widthMode = android.view.View.MeasureSpec.getMode(widthMeasureSpec);
int widthSize = android.view.View.MeasureSpec.getSize(widthMeasureSpec);
int heightMode = android.view.View.MeasureSpec.getMode(heightMeasureSpec);
int heightSize = android.view.View.MeasureSpec.getSize(heightMeasureSpec);
int measuredWidth;
int measuredHeight;
if (widthMode == MeasureSpec.EXACTLY)
{
measuredWidth = widthSize ;
}
else if (widthMode == MeasureSpec.AT_MOST)
{
measuredWidth = Math.min(desiredWidth , widthSize);
}
else
{
measuredWidth = desiredWidth;
}
if (heightMode == MeasureSpec.EXACTLY)
{
measuredHeight = heightSize ;
}
else if (heightMode == MeasureSpec.AT_MOST)
{
measuredHeight = Math.min(desiredHeight, heightSize );
}
else
{
measuredHeight = desiredHeight;
}
setMeasuredDimension(measuredWidth, measuredHeight);
}
*/
}
I have created onDraw and onMeasure function function and try to draw outer progress, or how could i modify it.
Edit
Is it possible to change the rotation percentage to 20 . I mean it shows progress form 0 to 99. is it possible to convert it to 0 to 12.