I want to draw a stack which should raise from the bottom. For example the stack height is 400, from the height 10 it should grow till it reaches 400.
I want to do this using paint and canvas.
I don't want to do it with image view/bitmap and scale animation.
Is it possible to do this with canvas and paint? if so how to achieve it?
Thanks in advance.
You could try using something like this (have not tested myself):
Paint paint = new Paint();
paint.setColor(Color.BLACK);
for(int i = 10; i < 400; i = i + 10)
{
try
{
// To slow the for loop down, can change 100 accordingly or remove altogther
Thread.sleep(100);
}
catch (InterruptedException e)
{
e.printStackTrace();
}
canvas.drawRect(0, i, 10, 0, paint); // this will make 10 x 10 square starting from bottom
invalidate();
}
What ever you do with canvas, even if you try for loop or invalidate, sleep, after all its drawing the shape in single stretch. I found the result in following way. May be it would be helpful for someone else, so adding the code here.
import android.os.Bundle;
import android.os.CountDownTimer;
import android.app.Activity;
import android.graphics.Color;
import android.util.Log;
import android.view.Menu;
public class AndroidDraw extends Activity {
private DrawView drawView;
private int height = 300;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_android_draw);
CountDownTimer timer = new CountDownTimer(2000, 50) {
#Override
public void onTick(long millisUntilFinished) {
height = height - 10;
drawView = new DrawView(AndroidDraw.this, height);
drawView.setBackgroundColor(Color.WHITE);
setContentView(drawView);
}
#Override
public void onFinish() {
}
};
timer.start();
}
}
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class DrawView extends View {
Paint paint = new Paint();
private int height;
public DrawView(Context context, int height) {
super(context);
this.height = height;
}
#Override
public void onDraw(Canvas canvas) {
paint.setColor(Color.RED);
canvas.drawRect(30, height, 60, 300, paint );
}
}
Related
I'm trying to understand how to dynamically generate 2D graphics on Android. I haven't been able to find an example on the web of someone doing this.
My example below randomly draws 1000 lines of random colors. I'd like to see all of the lines being drawn, but I don't see anything until the setContentView() call (at which point all of the lines are already drawn).
I've tried many permutations, including moving the setContentView() to before the draw() call, and adding ourView.invalidate() inside the for loop, but in every case the screen stays white until after all the lines are drawn.
If someone can point to an example of this working, I'd be happy to go research it and add the correct answer here myself.
package com.example.graphicsdemo;
+imports
public class MainActivity extends Activity {
ImageView ourView;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
draw();
setContentView(ourView);
}
public void draw() {
Bitmap blankBitmap = Bitmap.createBitmap(600,600,Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(blankBitmap);
ourView = new ImageView(this);
ourView.setImageBitmap(blankBitmap);
Paint paint = new Paint();
Random random = new Random();
for(int i = 0 ; i < 1000 ; i++) {
paint.setColor(Color.argb(255, random.nextInt(255), random.nextInt(255), random.nextInt(255)));
canvas.drawLine(random.nextInt(600), random.nextInt(600), random.nextInt(600), random.nextInt(600), paint);
}
}
}
I hope this Example will help :
first make your own View and lets call it DynamicView :
import java.util.Random;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
public class DynamicView extends View {
int i = 0;
public DynamicView(Context context) {
super(context);
}
#Override
protected void onDraw(Canvas canvas) {
Paint paint = new Paint();
Random random = new Random();
paint.setColor(Color.argb(255, random.nextInt(255),
random.nextInt(255), random.nextInt(255)));
canvas.drawLine(random.nextInt(600), random.nextInt(600),
random.nextInt(600), random.nextInt(600), paint);
if (i < 1000) {
i++;
invalidate();
}
}
}
this view will invalidate a 1000 time after each draw
now here is your main activity's onCreate method :
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
DynamicView myView = new DynamicView(this);
setContentView(myView);
}
as simple as this.
Responding to your question this is a better code and more complicated but still easy to understand
All we have to do is to draw the lines on a bitmap and then draw that bitmap on the view, so the bitmap will not change and will have all previous drawn lines and still draw on it
now here is the updated code :
DynamicView
import java.util.Random;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
public class DynamicView extends View {
int i = 0;
Bitmap frame ;
Canvas frameDrawer;
Rect bounds;
Paint paint ;
Random random ;
int width , height;
public DynamicView(Context context ,int width ,int height) {
super(context);
this.width = width;
this.height = height;
frame = Bitmap.createBitmap(width,height,Bitmap.Config.ARGB_8888);
frameDrawer = new Canvas(frame);
bounds = new Rect(0 , 0, width,height);
//this initialization will make the frameDrawer draw on the frame bitmap
//always avoid allocating new objects in the draw method to optimize the performance
paint = new Paint();
random = new Random();
}
#Override
protected void onDraw(Canvas canvas) {
paint.setColor(Color.argb(255, random.nextInt(255),
random.nextInt(255), random.nextInt(255)));
//instead of drawing on the view canvas draw on the frame bitmap
frameDrawer.drawLine(random.nextInt(width), random.nextInt(height),
random.nextInt(width), random.nextInt(height), paint);
// and then draw the bitmap on the view canvas
canvas.drawBitmap(frame, null, bounds , null);
if (i < 1000) {
i++;
invalidate();
}
}
}
now the new thing in the MainActivity is that now we can take controll over the view drawing bounds but still not the view's bounds which take all the screen space (if you want to adjust the view's bounds just implement the onLayout method and enter your value's )
MainActivity
import android.os.Bundle;
import android.app.Activity;
import android.view.Menu;
public class MainActivity extends Activity {
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
DynamicView myView = new DynamicView(this,320,480);
setContentView(myView);
}
}
I found some code to draw line and now i wand drawing line progressively so that i cloud see it being drawn.
This is the code
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class DrawView extends View {
Paint paint = new Paint();
public DrawView(Context context) {
super(context);
paint.setColor(Color.BLACK);
}
#Override
public void onDraw(Canvas canvas) {
canvas.drawLine(0, 0, 20, 20, paint);
canvas.drawLine(20, 0, 0, 20, paint);
}
}
How can i do that?
Tnx
Did you see that?
Look at source code ;)
http://www.curious-creature.com/2013/12/21/android-recipe-4-path-tracing/
You will want to break up your drawing into multiple steps. Inside your onDraw call, you will want to draw a part of your line, and update a variable so that the next line segment is drawn. Then you will want to make multiple onDraw() calls in an animation loop. You will need to be careful where you make your calls to the animation loop from. Read about the View class for more information, particular event handling and threading. http://developer.android.com/reference/android/view/View.html
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.view.View;
public class DrawView extends View {
Paint paint = new Paint();
float x1 = 0;
float x2 = 20;
float y1 = 0;
float y2 = 20;
public DrawView(Context context) {
super(context);
paint.setColor(Color.BLACK);
}
#Override
public void onDraw(Canvas canvas) {
if(doClear) {
//clear canvas to begin new animation
}
canvas.drawLine(x1, y1, x2, y2, paint);
}
public void animateLoop() {
while(x1 < 500) {
x1 += 20;
y1 += 20;
x2 += 20;
y2 += 20;
//tell android this view needs to be redrawn
invalidate();
}
//when done set doClear to true so
}
If you really want to learn about animation, you should start with something like this example: http://developer.android.com/guide/topics/graphics/drawable-animation.html.
I have an imageView and I draw the diagram in imageView according to the coordinate array. Every diagram has an onclick event.
Activity.java
package com.example.floorexhibitiontest;
import com.floor.DrawView;
import android.app.Activity;
import android.os.Bundle;
import android.widget.LinearLayout;
public class HallActivity extends Activity {#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.hall);
}
float[][][] points = new float[][][] {
{
{213,264},
{247,232},
{345,338},
{310,371}
},
{
{171,305},
{205,272},
{302,373},
{267,406}
},
{
{571,320},
{606,320},
{606,428},
{571,428}
}
};
LinearLayout layout = (LinearLayout)findViewById(R.id.root);
final DrawView draw = new DrawView(this,points);
layout.addView(draw);
}
DrawView.java
package com.floor;
import com.example.floorexhibitiontest.R;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Path;
import android.graphics.Paint.Style;
import android.graphics.Shader.TileMode;
import android.graphics.Shader;
import android.util.DisplayMetrics;
import android.view.View;
public class DrawView extends View{
private float[][][] points = null;
DisplayMetrics metric = new DisplayMetrics();
public DrawView(Context context,float[][][] p) {
super(context);
metric = context.getApplicationContext().getResources().getDisplayMetrics();
points = p;
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
float density=metric.density;
for(int i = 0; i < points.length; i++){
Paint p = new Paint();
p.setAntiAlias(true);
p.setColor(Color.BLUE);
Path path=new Path();
path.moveTo(points[i][0][0] / density, points[i][0][1] / density);
path.lineTo(points[i][1][0] / density, points[i][1][1] / density);
path.lineTo(points[i][2][0] / density, points[i][2][1] / density);
path.lineTo(points[i][3][0] / density, points[i][3][1] / density);
path.close();
p.setStyle(Style.STROKE);
canvas.drawPath(path, p);
}
}
}
At present effect：
How to let each rectangular drawed produce their own onclick event?
There is an ImageView in Layout file. My purpose is to put the graphics paint on the ImageView. But the result is ImageView can display. The painted graphics can not display. If I hide
ImageView, the image can display.
Ask everyone’s help. Thanks in advice.
Try smth like this:
public boolean onTouch(View v, MotionEvent event) {
if((event.getX(0)>=x_coord) &&
(event.getY(0)>=y_coord) &&
( event.getX(0)<=x_coord + your_rectangle_width) &&
(event.getY(0)<=y_coord + your_rectangle_heigth))
{
//rectangle selected
}
return true;
}
Or use in onTouch() your actual coordinates from points[] array
I want to rotate circle continuously in canvas on android. i am drawing circle using canvas and i am rotate circle continuously.it is possible,if possible how do it
with code or example can help me with greatly appreciated!
Here's my code for draw circle on canvas:
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class AnimationActivity extends Activity {
/** Called when the activity is first created. */
#Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
public class SampleView extends View
{
public SampleView(Context context)
{
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas)
{
Paint mPaint = new Paint();
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.RED);
canvas.drawCircle(75, 75, 75, mPaint);
}
}
}
Thanks in Advance!
You can use Animation to rotate the circle you've drawn (using Canvas). The code below works. I've modified your code and added necessary changes.
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.os.Bundle;
import android.view.View;
public class AnimationActivity extends Activity {
public class SampleView extends View {
Paint mPaint = new Paint();
private Animation anim;
public SampleView(Context context) {
super(context);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeWidth(10);
mPaint.setColor(Color.RED);
}
private void createAnimation(Canvas canvas) {
anim = new RotateAnimation(0, 360, getWidth()/2, getHeight()/2);
anim.setRepeatMode(Animation.RESTART);
anim.setRepeatCount(Animation.INFINITE);
anim.setDuration(10000L);
startAnimation(anim);
}
protected void onDraw(Canvas canvas) {
int cx = getWidth()/2; // x-coordinate of center of the screen
int cy = getHeight()/2; // y-coordinate of the center of the screen
// Starts the animation to rotate the circle.
if (anim == null)
createAnimation(canvas)
canvas.drawCircle(cx, cy, 150, mPaint); // drawing the circle.
}
}
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new SampleView(this));
}
}
Enjoy!
canvas.rotate(-rotate_angle, rotate_center_x, rotate_center_y);
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
RectF oval3 = new RectF(rotate_center_x-150, rotate_center_y-50, rotate_center_x+150, rotate_center_y+50);
canvas.drawOval(oval3, paint);
//resume original angle
canvas.rotate(rotate_angle, rotate_center_x, rotate_center_y);
For More Information, click here.. :)
I am used this from the android developers but don't understand why it force closes:
package com.example.shapedrawable.CustomDrawableView;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.drawable.ShapeDrawable;
import android.graphics.drawable.shapes.OvalShape;
import android.view.View;
public class CustomDrawableViewActivity extends View {
private ShapeDrawable mDrawable;
public CustomDrawableViewActivity(Context context) {
super(context);
int x = 10;
int y = 10;
int width = 300;
int height = 50;
mDrawable = new ShapeDrawable(new OvalShape());
mDrawable.getPaint().setColor(Color.BLUE);
mDrawable.setBounds(x, y, x + width, y + height);
}
protected void onDraw(Canvas canvas) {
mDrawable.draw(canvas);
}
}
You don't say where it force closes which is always useful information, but I assume it's at this line:
mDrawable.getPaint().setColor(Color.BLUE);
getPaint() will return null until you call setPaint(). Try this:
Paint paint = new Paint();
paint.setColor(Color.BLUE);
mDrawable.setPaint(paint);