Draw multiple rectangles - android

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);
}
}

Related

how to draw rectangle canvas?

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

Adding border to RoundedNetworkImageView

I am using a RoundedNetworkImageView.I want to add an border of 1 dp to it.If i create a separated drawable and put it as background to RoundedNetworkImageView then it replaces the roundedness of view.How can i update below code to add border to imageview?
Below is the code I am using-
public class RoundedNetworkImageView extends NetworkImageView {
public CWRoundedNetworkImageView(Context context) {
super(context);
}
public CWRoundedNetworkImageView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public CWRoundedNetworkImageView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, widthMeasureSpec);
}
#Override
public ScaleType getScaleType() {
return ScaleType.CENTER_CROP;
}
#Override
protected void onDraw(Canvas canvas) {
float radius = 12.0f;
Path clipPath = new Path();
RectF rect = new RectF(0, 0, this.getWidth(), this.getHeight());
clipPath.addRoundRect(rect, radius, radius, Path.Direction.CW);
canvas.clipPath(clipPath);
super.onDraw(canvas);
}
}

CustomTextView canvas not drawing

Drawable not drawing in custom TextView. Can anyone please help me in sorting the problem out. What i was trying to build is a texview that shows progress. The below mention code is just a sample.
public class ProgressableTextview extends TextView {
Paint mPaint;
int mProgress = 70;
int maxProgress = 100;
int mRadiud = 10;
public ProgressableTextview(Context context) {
super(context);
init();
}
public ProgressableTextview(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public ProgressableTextview(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
public void init(){
mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.FILL);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawColor(Color.GRAY);
canvas.drawRect(0, 0, (mProgress/maxProgress)*getWidth(), getMeasuredHeight(), mPaint);
canvas.save();
canvas.translate(getLeft(), 0);
super.onDraw(canvas);
canvas.restore();
}
}
Ok i figured out what was the problem, it was the mistake in drawRect function. drawRect function need to changed as :
canvas.drawRect(0, 0, ((float) mProgress/maxProgress) * getWidth(), getMeasureHeight(), mPaint);
since mProgress was a integer dividing it by integer returns zero and that was the problem.

Draw circle on canvas simulating animation android

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;
}
}

How call onDraw method from another method to draw dynamically?

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

Categories

Resources