I want to redraw a view from another method (say setProgress) in a class extending View. How can I do this.
My view class is
public class SpinView extends View {
private Paint paint;
private Context context;
private Canvas canvas;
private RectF arcOval;
public SpinView(Context context) {
super(context);
this.context = context;
}
public SpinView(Context context, AttributeSet attrs) {
super(context, attrs, 0);
this.context = context;
}
public SpinView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
Display d = ((WindowManager)context.getSystemService(Context.WINDOW_SERVICE)).getDefaultDisplay();
int width = d.getWidth();
int height = d.getHeight();
arcOval = new RectF((width/2-50), (height/2-50), (width/2+50), (height/2+50));
// RectF arcOval = new RectF(200, 200, 300, 300);
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(arcOval, 270f, 360, false, paint);
}
protected void setProgress(float angle){
paint = new Paint();
paint.setColor(Color.YELLOW);
paint.setStrokeWidth(10);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
canvas.drawArc(arcOval, 270f, angle, false, paint);
}
}
All I want is to draw a circular arc of yellow color over the initially created arc of Blue color. Any help?
You can use invalidate() method to call ondraw again
Related
I am trying to draw rounded corner line using canvas. Like eg:
public class MyView extends View {
Paint paint;
Path path;
public MyView(Context context) {
super(context);
init();
}
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public MyView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
private void init() {
paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);
path = new Path();
path.moveTo(50, 50);
path.lineTo(50, 500);
path.lineTo(200, 500);
path.lineTo(200, 300);
path.lineTo(350, 300);
float radius = 50.0f;
CornerPathEffect cornerPathEffect =
new CornerPathEffect(radius);
paint.setPathEffect(cornerPathEffect);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawPath(path, paint);
}
}
I am able to draw corner line using paint as shown above, but not from the canvas.
I tried canvas.drawLine() and canvas.drawArc() to achieve the same result but failed to do that.
Can somebody help me to solve the issue?
In this example code I give a nice square in the form I want. canvas.drawRect (100, 300, 600, 800, paint); values work. But what I want is to call these values from the Activity class. So I want to send these values to the Draw class in the activity class. How can I do that ? For example, I want to send an activity class as drawRect (100,100,100,100, Color.BLUE). I do not want to write these values in the Draw class.
Draw.java
public class Draw extends View {
Paint paint;
Path path;
public Draw(Context context) {
super(context);
init();
}
public Draw(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public Draw(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public void init(){
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawRect(100, 300, 600, 800, paint);
}
}
Activity.java
constraintLayout=findViewById(R.id.constraint);
Draw draw = new Draw(this);
constraintLayout.addView(draw);
You need to make method and pass value from activity to draw class:-
Draw draw = new Draw(this,100, 300, 600, 800);
constraintLayout.addView(draw);
Draw class
public class Draw extends View {
Paint paint;
Path path;
float left;
float top;
float right;
float bottom;
public Draw(Context context,float left, float top, float right, float bottom) {
super(context);
this.left = left;
this.top = top;
this.right = right;
this.bottom = bottom;
init();
}
public Draw(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public Draw(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}
public void init(){
paint = new Paint();
paint.setColor(Color.BLACK);
paint.setStrokeWidth(10);
paint.setStyle(Paint.Style.STROKE);
}
#Override
protected void onDraw(Canvas canvas) {
// TODO Auto-generated method stub
super.onDraw(canvas);
canvas.drawRect(left, top, right, bottom, paint);
}
}
You can create local variables for the bounds and set them using setters or init function before adding that view to a viewgroup.( constraintLayout.addView(draw) in your case
I would like to make a seek bar something like this :
I have tried few libraries like this :
https://github.com/tankery/CircularSeekBar and https://github.com/devadvance/circularseekbar
but I am unable to achieve what I want.
I have the image of this seekbar, can we achieve anything from drawarc or any other idea?
EDIT(28/09/2017) : :
tried this code, but not able to get desiered result :
public class CustomView extends View{
Bitmap gold,grey;
Paint paint;
Context context;
int progress=0;
private Paint mPaint,mPaint2;
private RectF mOval,mOval2;
public CustomView(Context context) {
super(context);
init(context);
}
public CustomView(Context context, #Nullable AttributeSet attrs) {
super(context, attrs);
init(context);
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context);
}
public CustomView(Context context, #Nullable AttributeSet attrs, int defStyleAttr, int defStyleRes) {
super(context, attrs, defStyleAttr, defStyleRes);
init(context);
}
public void init(Context context)
{
this.context = context;
paint = new Paint();
gold = BitmapFactory.decodeResource(context.getResources(),
R.drawable.timer_golden_full);
grey = BitmapFactory.decodeResource(context.getResources(),
R.drawable.timer_greyline);
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mOval = new RectF();
Matrix m = new Matrix();
RectF src = new RectF(0, 0, gold.getWidth(), gold.getHeight());
RectF dst = new RectF(0, 0, 200, 250);
m.setRectToRect(src, dst, Matrix.ScaleToFit.CENTER);
Shader shader = new BitmapShader(gold, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
shader.setLocalMatrix(m);
mPaint.setShader(shader);
m.mapRect(mOval, src);
mPaint2 = new Paint(Paint.ANTI_ALIAS_FLAG);
mOval2 = new RectF();
Matrix m2 = new Matrix();
RectF src2 = new RectF(0, 0, gold.getWidth(), gold.getHeight());
RectF dst2 = new RectF(0, 0, 200, 250);
m2.setRectToRect(src2, dst2, Matrix.ScaleToFit.CENTER);
Shader shader2 = new BitmapShader(grey, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
shader2.setLocalMatrix(m2);
mPaint2.setShader(shader2);
m2.mapRect(mOval2, src2);
}
public void update()
{
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
canvas.drawArc(mOval2, 0, 360, true, mPaint2);
canvas.drawArc(mOval, 0, 360, true, mPaint);
}
}
Can you Give me any advice how to draw a list of rectangles?
I have a Rectangle class :
public final class Rectangle extends View {
private Rect rectangle;
private Paint paint;
public Rectangle(Context context) {
super(context);
int x = 50;
int y = 50;
int sideLength = 200;
// create a rectangle that we'll draw later
rectangle = new Rect(x, y, sideLength, sideLength);
// create the Paint and set its color
paint = new Paint();
paint.setColor(Color.GRAY);
}
#Override
protected void onDraw(Canvas canvas) {
//canvas.drawColor(Color.BLUE);
canvas.drawRect(rectangle, paint);
}
}
and a Rectangle instance on activity
setContentView(new Rectangle(this));
Here you have some example three rectangles side by side
public class Rectangles extends View {
private Paint paintBlack;
public Rectangles(Context context) {
super(context);
init();
}
public Rectangles(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public Rectangles(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
paintBlack = new Paint();
paintBlack.setColor(Color.BLACK);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(0, 0, 100, 100, paintBlack);
canvas.drawRect(105, 0, 205, 100, paintBlack);
canvas.drawRect(210, 0, 310, 100, paintBlack);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
setMeasuredDimension(500, 500);
}
}
I need to draw an empty circle with a margin of 10 px. The problem that i've encountered is that i need to simulate the draw of the circle in 2 seconds and after that to start drawing on the top of it another one with another color. I'm using a custom view and i've tried to implement my logic into onDraw method and invalidate the view every 50 milisecond. The problem is that i can't manage to draw the circle...i draw only crapy figures. Does somebody know how can i draw a circle without using the canvas.drawCircle method because that method is drawing the circle directly without animation.
My current code
public class CustomAnimationView extends View{
private Canvas canvas;
private int count = 0;
private Paint paint;
private int mLeft;
private int mRight;
private int mBottom;
private int mTop;
public CustomAnimationView(Context context) {
super(context);
}
public CustomAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CustomAnimationView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
setAttributes(attrs);
}
private void setAttributes(AttributeSet attrs) {
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
if(paint == null){
paint = new Paint();
paint.setAntiAlias(true);
paint.setStyle(Style.STROKE);
paint.setStrokeWidth(10);
paint.setColor(Color.BLACK);
}
if(count<150){
drawFirstQuarter(count);
}
count++;
}
public void drawFirstQuarter(int count){
RectF oval = new RectF(mLeft, mTop, mRight, mBottom);
canvas.drawArc(oval, 90, 30, true, paint);
}
public void setRect(int top, int bottom, int left, int right){
mBottom = bottom;
mTop = top;
mLeft = left;
mRight = right;
}
}
Right now I'm just tring to draw a bit of a circle.
Thanks. I've solved it.
Here is a code sample
public class CustomAnimationView extends View{
private Canvas canvas;
private int mCount = 0;
private Paint paint1;
private Paint paint2;
private RectF oval1;
private Context context;
private int mColorCount = 0;
public CustomAnimationView(Context context) {
super(context);
this.context = context;
}
public CustomAnimationView(Context context, AttributeSet attrs) {
super(context, attrs);
this.context = context;
}
public CustomAnimationView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
this.context = context;
setAttributes(attrs);
}
private void setAttributes(AttributeSet attrs) {
}
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
this.canvas = canvas;
if(paint1 == null){
paint1 = new Paint();
paint1.setAntiAlias(true);
paint1.setStyle(Style.STROKE);
paint1.setStrokeWidth(10);
}
if(paint2 == null){
paint2 = new Paint();
paint2.setAntiAlias(true);
paint2.setStyle(Style.STROKE);
paint2.setStrokeWidth(10);
}
if(mCount % 360 == 0 ){
mColorCount++;
}
if(mColorCount % 2 == 0){
paint1.setColor(context.getResources().getColor(R.color.white));
paint2.setColor(context.getResources().getColor(R.color.black));
}else{
paint2.setColor(context.getResources().getColor(R.color.white));
paint1.setColor(context.getResources().getColor(R.color.black));
}
if(oval1 == null)
oval1 = new RectF(5,5,canvas.getWidth()-5, canvas.getHeight()-5);
drawFirstQuarter(mCount, oval1);
}
public void drawFirstQuarter(int count, RectF oval){
canvas.drawArc(oval, 90, 360, false, paint2);
canvas.drawArc(oval, 90, count, false, paint1);
if(mCount == 330)
mCount = 0;
else
mCount += 30;
}
}