I am trying to create a 10x10 grid in android studio that will display in the center of the screen, i am trying to use a for loop to do this but cant get it right. Does anyone know how to do this, ive been looking on google and there are no examples or guides on how to do it. my code is below.
public class Draw extends View {
Paint red = new Paint();
Paint green = new Paint();
float startX;
float stopX;
float startY;
float stopY;
int rectSide = 1000;
public Draw(Context context) {
super(context);
red.setColor(Color.RED);
green.setColor(Color.GREEN);
red.setStrokeWidth(8);
green.setStrokeWidth(8);
}
#Override
public void onDraw(Canvas canvas) {
int width = canvas.getWidth();
int height = canvas.getHeight();
for (int i = 2; i < 10; i++) {
startX = width / 2 - rectSide / 2;
startY = i*100;
stopX = width / 2 + rectSide / 2;
stopY = i*100;
canvas.drawLine(startX, startY, stopX, stopY, red);
}
for (int i = 2; i < 10; i++) {
startX = i*100;
startY = height / 2 - rectSide / 2;
stopX = i*100;
stopY = height / 2 + rectSide / 2;
canvas.drawLine(startX, startY, stopX, stopY, red);
}
}
}
Related
So I am nearly at the end.
I have been researching the whole day on how to do this.
Draw a path which grows(animation) from one point to another.
I have tried it with Matrix, but that just ended with turning my whole paths.
Here is a image of my project:
my project
My goal is to draw a animated path from one circle to the other.
Code:
public void init(#Nullable AttributeSet attr) {
circle = new Paint();
circle.setColor(Color.GREEN);
circle.setStyle(Paint.Style.FILL);
circle.setAntiAlias(true);
line = new Paint();
line.setColor(Color.GREEN);
line.setStyle(Paint.Style.STROKE);
line.setStrokeWidth(10);
line.setAntiAlias(true);
Collections.addAll(height, 100, 20, 50, 40, 70, 10, 50); // in percent
System.out.println(height.size() + " this is the size");
}
#Override
protected void onDraw(Canvas canvas) {
float y = getHeight() / 20 * 14;
float x = getWidth() / 8;
float radius = (canvas.getWidth() * canvas.getHeight()) / 40940;
for (int c = 1; c < 8; c++) {
System.out.println("at " + c);
canvas.drawCircle(x * c, y - ((getHeight() / 20) * (height.get(c - 1) / 10)), radius, circle);
points.add(new PointF(x * c, (y - ((getHeight() / 20) * (height.get(c - 1) / 10)))));
}
}
Please Help,
Thanks
you just need animate the path using ValueAnimator
create one path object
Path path = new Path();
and create animator
ValueAnimator animator = new ValueAnimator();
float startX = // starting circle x co-ordinate
float startY = // starting circle y co-ordinate
float endX = // end circle x co-ordinate
float endY = // end circle y co-ordinate
PropertyValuesHolder propertyX = PropertyValuesHolder.ofFloat("x",startX,endX);
PropertyValuesHolder propertyY = PropertyValuesHolder.ofFloat("y",startY,endY);
valueAnimator.setValues(propertyX,propertyY);
valueAnimator.setDuration(1000); // animation time
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator animation) {
float x = (float) animation.getAnimatedValue("x");
float y = (float) animation.getAnimatedValue("y");
path.lineTo(x,y);
invalidate();
}
});
valueAnimator.start();
and in onDraw() draw the path
canvas.drawPath(path,paint);
I am creating custom view, which is like screen below. I can draw views but I am unable to create separate click events for each view. How to set separate click events for each arc view?. Thanks in advance.
Here is the code:
ArcView.java
public class ItemView extends View {
Utils utils;
int left, right, top, bottom;
private int color;
private int start;
private int sweep;
private boolean inner;
private RectF oval;
public float center_x, center_y;
int divOn;
public float radius;
public ItemView(Context context, int color, int start, int sweep) {
super(context);
this.color = color;
this.start = start;
this.sweep = sweep;
utils = Utils.getInstance(getContext());
}
public ItemView(Context context, int color, int start, int sweep, boolean inner, int divOn) {
super(context);
this.color = color;
this.start = start;
this.sweep = sweep;
this.inner = inner;
this.divOn = divOn;
utils = Utils.getInstance(getContext());
}
public RectF getOval() {
return oval;
}
#Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//There is another flag for inner white circle
if (inner) {
float width = (float) getWidth();
float height = utils.getScreenHeight() - utils.getActionBarSize();
radius = (width - utils.dpTopixel(50)) / divOn;
Path path = new Path();
path.addCircle((width - utils.dpTopixel(50)) / divOn,
(height - utils.dpTopixel(50)) / divOn, radius,
Path.Direction.CW);
Paint paint = new Paint();
paint.setColor(ContextCompat.getColor(getContext(), color));
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
final RectF oval = new RectF();
paint.setStyle(Paint.Style.FILL);
left = -(int) radius;
right = (int) radius;
top = (getHeight() / 2) - (int) radius;
bottom = (getHeight() / 2) + (int) radius;
oval.set(left,
top,
right,
bottom);
canvas.drawArc(oval, start, sweep, true, paint);
} else {
float width = (float) getWidth();
float height = utils.getScreenHeight() - utils.getActionBarSize();
float radius;
radius = (width - utils.dpTopixel(50)) / divOn;
Path path = new Path();
path.addCircle((width - utils.dpTopixel(50)) / 1,
(width - utils.dpTopixel(50)) / 1, radius,
Path.Direction.CW);
Paint paint = new Paint();
paint.setColor(ContextCompat.getColor(getContext(), color));
paint.setStrokeWidth(5);
paint.setStyle(Paint.Style.FILL);
paint.setAntiAlias(true);
oval = new RectF();
paint.setStyle(Paint.Style.FILL);
TextPaint textPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.SUBPIXEL_TEXT_FLAG);
textPaint.setColor(ContextCompat.getColor(getContext(), R.color.white));
textPaint.setTextAlign(Paint.Align.CENTER);
/*Paint.FontMetrics metrics = paint.getFontMetrics();
float textheight = Math.abs(metrics.top - metrics.bottom);
float x = getWidth() / 2;
float y = (getHeight() / 2) + (height / 2);
canvas.drawText("My Text", x, y, paint);*/
left = -(int) radius;
right = (int) radius;
top = (getHeight() / 2) - (int) radius;
bottom = (getHeight() / 2) + (int) radius;
center_x = width / 2;
center_y = utils.getOffset();
int xPos = (getWidth() / 2);
int yPos = (int) ((getHeight() / 2) - ((textPaint.descent() + textPaint.ascent()) / 2)) ;
//((textPaint.descent() + textPaint.ascent()) / 2) is the distance from the baseline to the center.
oval.set(left,
top,
right,
bottom);
canvas.drawArc(oval, start, sweep, true, paint);
}
}
}
utils class to detect height and width and convert to px
i want equation to check i click which circle
Create a slice selected listener, override the onTouchEvent in your custom class, calculate which slice the touch event (with the action ACTION_UP) is on using the x,y values. You can then call the function from your slice selected listener and pass details about the selected slice.
I have just begin to create some custom views in Android but I am facing problem while drawing bitmap (arrows) outside the circle.
Here is my code:
Canvas osCanvas = new Canvas(windowFrame); // Create a canvas to draw onto the new image
RectF outerRectangle = new RectF(0, 0, getWidth(), getHeight());
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); // Anti alias allows for smooth corners
paint.setColor(Color.parseColor("#FAFAFA")); // This is the color of your activity background
osCanvas.drawRect(outerRectangle, paint);
final Paint stroke = new Paint();
//paint.setColor(Color.TRANSPARENT); // An obvious color to help debugging
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT)); // A out B http://en.wikipedia.org/wiki/File:Alpha_compositing.svg
float centerX = getWidth() / 2;
float centerY = getHeight() / 2;
double rad = Math.min(getWidth(), getHeight()) / 2.5 - menuInnerPadding;
float radius = (float) rad;
stroke.setColor(Color.parseColor("#999999"));
stroke.setStyle(Paint.Style.STROKE);
stroke.setAntiAlias(true);
stroke.setStrokeWidth(5f);
osCanvas.drawCircle(centerX ,
centerY , radius - stroke.getStrokeWidth() +5f, stroke);
for(int i=0;i<elements.size();i++){
double angle =0;
if(i==0){
angle = startAngle;
}else{
angle = startAngle+(i * ((2 * Math.PI) / elements.size()));
}
elements.get(i).x = (int) (centerX + Math.cos(angle)*(radius));
elements.get(i).y = (int) (centerY + Math.sin(angle)*(radius));
float ang = (float) Math.cos(angle)*(radius);
Path path = new Path();
path.addCircle(elements.get(i).x,elements.get(i).y, radius, Path.Direction.CW);
if(BLINKER_ID == i){
if(blinkerPain != null){
osCanvas.drawBitmap(elements.get(i).bitmap,elements.get(i).x,elements.get(i).y,blinkerPain);
blinkerPain = null;
}
}else{
// here i am drawing the red arrows (bitmap images) But it's not fitting outside the circle.
osCanvas.drawBitmap(elements.get(i).bitmap,elements.get(i).x ,elements.get(i).y ,textPaint);
}
}
Here is my output
I think issue is with the padding.
I did code new write.
You should check this code.
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth( 2 );
paint.setStyle(Paint.Style.STROKE );
canvas.drawColor(Color.WHITE);
float x = 400;
float y = 400;
float r = 200;
canvas.drawCircle( x , y , r , paint );
Bitmap icon = BitmapFactory.decodeResource(getContext().getResources(), R.mipmap.ic_launcher);
int length = 8;
float radian = (float)(Math.PI * 2f) / length;
for( int i = 0; i<length; i++ ) {
drawBitmap( canvas , icon , x , y , r, radian * i);
}
}
private void drawBitmap( Canvas canvas, Bitmap bitmap, float pivotX, float pivotY, float radius, float radian ) {
Matrix m = new Matrix();
m.postTranslate( -bitmap.getWidth()/2 , -bitmap.getHeight()/2 );
m.postRotate( (float)(radian * 180 / Math.PI) + 90 );
float drawHeight = radius + (bitmap.getHeight()/2);
m.postTranslate( ((float)Math.cos( radian ) * drawHeight) + pivotX
, ((float)Math.sin( radian ) * drawHeight) + pivotY );
canvas.drawBitmap( bitmap , m , null );
}
I wanted to draw a grid of quads with an animated colour property but ended up with code that is too slow just to create a basic structure of an image, not to mention to animate it. Also, the image is drawing, not as it finished to compute, but in the process by parts. How can I fix it? Here's onDraw(Canvas canvas) method:
protected void onDraw(Canvas canvas) {
canvas.drawColor(Color.BLACK);
final int height = canvas.getHeight();
final int width = canvas.getWidth();
Bitmap.Config conf = Bitmap.Config.RGB_565;
Bitmap bitmap = Bitmap.createBitmap(width, height, conf);
new Thread(() -> {
int cells_amount = 0;
float cells_vertical = 0;
float cells_horizontal = 0;
cells_vertical = (float) height / CELL_SIZE;
int y = 0;
if (cells_vertical % 1 > 0) {
y = Math.round(CELL_SIZE * -(cells_vertical % 1));
cells_vertical = (int) (cells_vertical + 1);
}
cells_horizontal = (float) width / CELL_SIZE;
int x = 0;
if (cells_horizontal % 1 > 0) {
x = Math.round(CELL_SIZE * -(cells_horizontal % 1));
cells_horizontal = (int) (cells_horizontal + 1);
}
cells_amount = (int) (cells_horizontal * cells_vertical);
Canvas c = new Canvas(bitmap);
c.drawColor(Color.BLACK);
int x_preserved = x;
Paint textPaint = new Paint();
textPaint.setColor(Color.parseColor("#EEEEEE"));
for (int i = 0; i < cells_amount; i++) {
Rect rect = new Rect(x, y, x + CELL_SIZE, y + CELL_SIZE);
Paint framePaint = new Paint();
framePaint.setColor(Color.parseColor("#1F1F1F"));
framePaint.setStyle(Paint.Style.STROKE);
framePaint.setStrokeWidth(1);
c.drawRect(rect, framePaint);
if (random.nextBoolean()) {
String output = String.format(Locale.getDefault(), "%d", "+");
int cx = (int) (x + (CELL_SIZE / 2) - (textPaint.measureText(output) / 2));
int cy = (int) ((y + (CELL_SIZE / 2)) - ((textPaint.descent() + textPaint.ascent()) / 2));
c.drawText(output, cx, cy, textPaint);
}
if (i % cells_horizontal == 0 && i >= cells_horizontal) {
y += CELL_SIZE;
x = x_preserved;
} else {
x += CELL_SIZE;
}
}
}).start();
canvas.drawBitmap(bitmap, 0, 0, null);
}
I need to draw the rectangle from the center of the canvas based on ACTION_MOVE.
I tried this way
public class CustomRectangle extends View {
private Bitmap bitTopLeft;
private Bitmap bitTopRight;
private Bitmap bitBottomLeft;
private Bitmap bitBottomRight;
private Paint rectAnglePaint;
private Context context;
private Paint bitmapPaint;
private Rect rect;
private int maxX;
private int maxY;
private int centerX;
private int centerY;
private Paint canvasPaint;
public CustomRectangle(Context context) {
super(context);
this.context = context;
Init();
}
private void Init() {
bitTopLeft = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitTopRight = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitBottomLeft = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitBottomRight = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
rectAnglePaint = new Paint();
rectAnglePaint.setColor(Color.GREEN);
rectAnglePaint.setStrokeWidth(5);
rectAnglePaint.setStyle(Paint.Style.STROKE);
rectAnglePaint = new Paint();
rectAnglePaint.setColor(Color.GREEN);
rectAnglePaint.setStrokeWidth(5);
rectAnglePaint.setStyle(Paint.Style.STROKE);
bitmapPaint = new Paint();
bitmapPaint.setColor(Color.BLACK);
rect = new Rect();
Display display = ((Activity) context).getWindowManager()
.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
maxX = size.x;
maxY = size.y;
centerX = maxX / 2;
centerY = maxY / 2;
rect.left = centerX / 2 + bitBottomRight.getWidth() / 2;
rect.top = centerY / 2 + bitBottomRight.getWidth() / 2;
rect.right = centerX + centerX / 2 + bitBottomRight.getWidth() / 2;
rect.bottom = centerY + centerY / 2 + bitBottomRight.getWidth() / 2;
canvasPaint = new Paint();
canvasPaint.setColor(Color.TRANSPARENT);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPaint(canvasPaint);
// Path p = new Path();
canvas.drawBitmap(bitTopLeft,
rect.left - bitBottomRight.getWidth() / 2, rect.top
- bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitTopRight, rect.right - bitBottomRight.getWidth()
/ 2, rect.top - bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitBottomLeft, rect.left - bitBottomRight.getWidth()
/ 2, rect.bottom - bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitBottomRight,
rect.right - bitBottomRight.getWidth() / 2, rect.bottom
- bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawRect(rect, rectAnglePaint);
}
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
invalidate();
break;
case MotionEvent.ACTION_MOVE:
int currentx = (int) event.getX();
int currenty = (int) event.getY();
Calculatingpoint(currentx, currenty);
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return true;
}
private void Calculatingpoint(int x, int y) {
if (x < maxX && y < maxY) {
int dx = 0;
int dy = 0;
dx = rect.right - x;
dy = rect.bottom - y;
// this is working perfect when i touched right bottom.
rect.inset(dx, dy);
invalidate();
}
}
}
But when i touch other corners the rectangle is gone.
I need to draw the rectangle from center point. i need to increase or decrease the width and height based on the touch.
Please advice, how to achieve this. Please give me samples.
I find the Direction from the user touching position, Here is my updated code.
public class CustomRectangle extends View {
private Bitmap bitTopLeft;
private Bitmap bitTopRight;
private Bitmap bitBottomLeft;
private Bitmap bitBottomRight;
private Paint rectAnglePaint;
private Context context;
private Paint bitmapPaint;
private Rect rect;
private int maxX;
private int maxY;
private int centerX;
private int centerY;
private Paint canvasPaint;
private String direction;
public CustomRectangle(Context context) {
super(context);
this.context = context;
Init();
}
private void Init() {
bitTopLeft = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitTopRight = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitBottomLeft = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
bitBottomRight = BitmapFactory.decodeResource(context.getResources(),
R.drawable.squarsmall);
rectAnglePaint = new Paint();
rectAnglePaint.setColor(Color.GREEN);
rectAnglePaint.setStrokeWidth(5);
rectAnglePaint.setStyle(Paint.Style.STROKE);
rectAnglePaint = new Paint();
rectAnglePaint.setColor(Color.GREEN);
rectAnglePaint.setStrokeWidth(5);
rectAnglePaint.setStyle(Paint.Style.STROKE);
bitmapPaint = new Paint();
bitmapPaint.setColor(Color.BLACK);
rect = new Rect();
Display display = ((Activity) context).getWindowManager()
.getDefaultDisplay();
Point size = new Point();
display.getSize(size);
maxX = size.x;
maxY = size.y;
centerX = maxX / 2;
centerY = maxY / 2;
rect.left = centerX / 2 + bitBottomRight.getWidth() / 2;
rect.top = centerY / 2 + bitBottomRight.getWidth() / 2;
rect.right = centerX + centerX / 2 + bitBottomRight.getWidth() / 2;
rect.bottom = centerY + centerY / 2 + bitBottomRight.getWidth() / 2;
canvasPaint = new Paint();
canvasPaint.setColor(Color.TRANSPARENT);
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawPaint(canvasPaint);
// Path p = new Path();
canvas.drawBitmap(bitTopLeft,
rect.left - bitBottomRight.getWidth() / 2, rect.top
- bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitTopRight, rect.right - bitBottomRight.getWidth()
/ 2, rect.top - bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitBottomLeft, rect.left - bitBottomRight.getWidth()
/ 2, rect.bottom - bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawBitmap(bitBottomRight,
rect.right - bitBottomRight.getWidth() / 2, rect.bottom
- bitBottomRight.getWidth() / 2, bitmapPaint);
canvas.drawRect(rect, rectAnglePaint);
}
float x1, x2, y1, y2, dx, dy;
#Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
x1 = event.getRawX();
y1 = event.getRawY();
invalidate();
break;
case MotionEvent.ACTION_MOVE:
x2 = event.getRawX();
y2 = event.getRawY();
int currentx = (int) event.getX();
int currenty = (int) event.getY();
Calculatingpoint(currentx, currenty);
break;
case MotionEvent.ACTION_UP:
break;
default:
break;
}
return true;
}
private void Calculatingpoint(int x, int y) {
if (x2 < maxX && y2 < maxY) {
int dx = 0;
int dy = 0;
// dx = rect.right - (int)x2 ;
// dy = (int)y2 - rect.top ;
//
// Log.e("dx", ""+dx);
// Log.e("dy", ""+dy);
boolean isLeft = false;
boolean isTop = false;
if (x2 > maxX / 2) {
direction = "right";
isLeft = false;
} else {
direction = "left";
isLeft = true;
}
if (y2 > maxY / 2) {
direction = "bottom";
isTop = false;
} else {
direction = "top";
isTop = true;
}
if (!isLeft && !isTop) {
dx = rect.right - (int) x2;
dy = rect.bottom - (int) y2;
}
if (isLeft && !isTop) {
dx = (int) x2 - rect.left;
dy = rect.bottom - (int) y2;
}
if (isLeft && isTop) {
dx = (int) x2 - rect.left;
dy = (int) y2 - rect.top;
}
if (!isLeft && isTop) {
dx = rect.right - (int) x2;
dy = (int) y2 - rect.top;
}
// this will perfect
rect.inset(dx, dy);
invalidate();
}
}
}