The following code it's an activity class with a custom view class. This code is the only working example of canvas for me.
I just need to recall in loop the onDraw function (like animationframe in javascript canvas2d).
I can always use timers to make a call but maybe there is some low level nice way for that. I'm a newbie in Android development.
Question update: I use class name instead of instance name. No need for static for sure.
Current status : crash on activate activity.
public class CanvasNativeSurface extends AppCompatActivity {
private GoogleApiClient client;
private myview myView;
private Handler mHandler;
class myview extends View
{
private void init() {
}
public myview(Context context) {
super(context);
init();
}
int x=80;
int y=180;
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
x=80;
y = y + 1;
int radius=40;
Paint paint=new Paint();
// Use Color.parseColor to define HTML colors
paint.setColor(Color.parseColor("#CD5C5C"));
canvas.drawCircle(x,y, radius, paint);
}
public void move()
{
y= y+30;// 30 is value for testing
// change it to whatever you want.
invalidate();
}
}
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ViewGroup view1;
view1 = (ViewGroup) findViewById( R.id.activity_canvas_native_surface );
/// setContentView(R.layout.activity_canvas_native_surface );
setContentView(new myview(this));
mHandler = new Handler();
mHandler.postDelayed(mRunnable, 1000);
}
private Runnable mRunnable = new Runnable() {
#Override
public void run() {
myView.move();
mHandler.postDelayed(this, 1000);
}
};
y = y + 1; Must push object to the bottom. Circle has no movement.
Catch in log:
Attempt to invoke virtual method 'void....CanvasNativeSurface$myview.move()' on a null object reference
Also Android Studio on mouseover it says: myView never assingned
MyView.jav // separate file
public class MyView extends View
{
private int x=80,y=180,radius=40;
private Paint paint;
public MyView(Context context) {
super(context);
init();
}
public void init() {
paint=new Paint();
paint.setColor(Color.parseColor("#CD5C5C"));
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawCircle(x,y, radius, paint);
}
public void move()
{
y= y+30;// 30 is value for testing
// change it to whatever you want.
invalidate();
}
}
And in your activity you can do something like
private MyView myView;
private Handler mHandler;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
myView = new MyView(this);
setContentView(myView);
mHandler = new Handler();
mHandler.postDelayed(mRunnable, 1000);
}
private Runnable mRunnable = new Runnable() {
#Override
public void run() {
myView.move();
mHandler.postDelayed(this, 1000);
}
};
Finally don't forget to
mHandler.removeCallbacksAndMessages(mRunnable);
When you want to stop.
As i said earlier you don't need setWillNotDraw(false); and your constructor is called only once.
You probably need a timer mechanism to move the circle every second or something. I hope you got the idea and you can make changes accordingly.
If you are looking for animation
public class MyView extends View
{
private int x=80,y=180,radius=40;
private Paint paint;
public MyView(Context context) {
super(context);
init();
}
public void init() {
paint=new Paint();
paint.setColor(Color.parseColor("#CD5C5C"));
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
canvas.drawCircle(x,y, radius, paint);
}
public void setX(int x) {
this.x = x;
}
public void setY(int y) {
this.y = y;
}
public void setStateOnObject(){
// 900 is the end value
ObjectAnimator animateBottom = ObjectAnimator.ofFloat(this,"y",y,900);
animateBottom.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
#Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
postInvalidate();
}
});
AnimatorSet animatorSet = new AnimatorSet();
animatorSet.play(animateBottom);
animatorSet.setDuration(5000).start();
}
}
And instead of handler you would do
myView.setStateOnObject();
Related
I'm creating a custom view in which I have a rectangle RectF object that have a specific height. I would like to increase the bottom Y point coordinate to a specific value with a progressive animation.
I've tried the following. I've created a method setBatteryState() that is called on a onclicked method in the activity that holds the custom view:
public class BatteryView extends View {
public int mCanvasWidth;
public int mCanvasHeight;
public RectF mBatteryHead;
public RectF mBatteryBody;
public RectF mBatteryBodyVolume;
public Canvas mCanvas;
public BatteryView(Context context) {
super(context);
}
public BatteryView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public void init()
{
}
#Override
protected void onDraw(Canvas canvas)
{
super.onDraw(canvas);
this.mCanvas = canvas;
float batteryHeadDistanceFromLeft = mCanvasWidth / 3;
float batteryHeadWidth = mCanvasWidth / 3;
float batteryBodyDistanceFromTop = mCanvasHeight / 5;
float batteryHeadHeight = mCanvasHeight / 5;
mBatteryHead = new RectF(batteryHeadDistanceFromLeft,0,2*batteryHeadWidth,batteryHeadHeight+5);
Paint batteryHeadPaint = new Paint();
batteryHeadPaint.setColor(ContextCompat.getColor(getContext(), R.color.batifyColor));
canvas.drawRect(mBatteryHead,batteryHeadPaint);
mBatteryBody = new RectF(0,(int)batteryBodyDistanceFromTop,mCanvasWidth,mCanvasHeight);
Paint batteryBodyPaint = new Paint();
batteryBodyPaint.setStyle(Paint.Style.STROKE);
batteryBodyPaint.setColor(ContextCompat.getColor(getContext(), R.color.batifyColor));
batteryBodyPaint.setStrokeWidth(10);
canvas.drawRect(mBatteryBody,batteryBodyPaint);
mBatteryBodyVolume = new RectF(12,(int)batteryBodyDistanceFromTop + 10,mCanvasWidth-12,mCanvasHeight/2);
Paint volumeBodyPaint = new Paint();
volumeBodyPaint.setColor(ContextCompat.getColor(getContext(), R.color.batifyColor));
canvas.drawRect(mBatteryBodyVolume,volumeBodyPaint);
}
public void setStateOnBattery(){
ObjectAnimator animateBottom = ObjectAnimator.ofFloat(mBatteryBodyVolume, "bottom", mBatteryBodyVolume.bottom, mCanvasHeight);
animateBottom.setDuration(1000).start();
}
#Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec,heightMeasureSpec);
mCanvasWidth = MeasureSpec.getSize(widthMeasureSpec);
mCanvasHeight = MeasureSpec.getSize(heightMeasureSpec);
}}
ObjectAnimator should translate the rect mBatteryBodyVolume to the size of the canvas but nothing change...
Any Idea ?
Thanks in advance !
Use an asynchronous task with 2 major functions, draw and update. Every time update is called, increase the height variable by a constant. Then, in draw, draw your rectangle with height as a param. If you need code, just ask. :D
UPDATE
Create a 'runner' async task:
public class Runner extends Thread {
public volatile boolean running = true;
private Environment env;
public Runner(Environment E) {
env = E;
}
#Override
public void run() {
long lastTime = System.currentTimeMillis();
while(running) {
long now = System.currentTimeMillis();
long elapsed = now - lastTime;
env.update(elapsed);
env.draw();
lastTime = now;
}
}
public void shutdown() {
running = false;
}
}
In Environment, Do the following:
public void draw() {
Canvas canvas = holder.lockCanvas();
if (canvas != null) {
canvas.drawRect(x-w, y-h, x+w, y+h, myPaint);
holder.unlockCanvasAndPost(canvas);
}
}
and the update method:
public void update(float elapsedTime) {
h+=myKonstant*elpasedTime;
}
Hope I Helped :D
I have a Custom Class extending Drawable as seen below which is meant to draw an Arc. From my MainActivity controlling the Drawable, I am redrawing it based on some input values that I translate to the appropriate "angle" for the shape. E.g.
This is the initial state of the drawable:
This is the second state of the drawable:
Red arrow indicates the motion i am trying to achieve
I am trying to "animate" the change from state 1 to state 2 with a sweeping motion. Any ideas on how to do that? Should I redraw the shape a number of times gradually transitioning between state one and two?
My Drawable Code:
public class CircleLoadingBar extends Drawable implements Drawable.Callback{
private Paint paint;
private Canvas canvas;
private float angle;
private RectF outterCircle;
private float padding=30;
public void invalidateDrawable(Drawable drawable){
final Callback callback = getCallback();
if (callback != null) {
callback.invalidateDrawable(this);
}
}
public void scheduleDrawable(Drawable drawable, Runnable runnable, long l){
invalidateDrawable(drawable);
}
public void unscheduleDrawable(Drawable drawable,Runnable runnable){
//empty
}
public CircleLoadingBar(){
this(0);
}
public CircleLoadingBar( int angle){
this.angle=angle;
this.canvas=new Canvas();
paint=new Paint();
paint.setColor(Color.GREEN);
paint.setStrokeWidth(padding);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
outterCircle = new RectF();
}
public void setAngle(float angle){
this.angle=angle;
}
#Override
public void draw(Canvas canvas){
canvas.save();
Rect bounds = getBounds();
outterCircle.set(bounds.left+padding,bounds.top+padding,bounds.right-padding,bounds.bottom-padding);
int[] colors = {Color.RED, Color.GREEN, Color.RED};
float[] positions = {0,0.2f,1.3f};
SweepGradient gradient3 = new SweepGradient(innerCircle.centerX(), innerCircle.centerY(),colors,positions);
paint.setShader(gradient3);
canvas.drawArc(outterCircle,90,angle,true,paint);
}
#Override
public void setAlpha(int alpha) {
// Has no effect
}
#Override
public void setColorFilter(ColorFilter cf) {
// Has no effect
}
#Override
public int getOpacity() {
// Not Implemented
return 0;
}
}
My MainActivity Code:
public class MainActivity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate();
setContentView(R.layout.main);
textView= (TextView) findViewById(R.id.textview);
circleLoadingBar= new CircleLoadingBar(10);
textView.setBackgroundDrawable(circleLoadingBar);
}
public void stateUpdate(float angle) {
circleLoadingBar.setAngle(angle);
textView.invalidate();
}
}
After a lot of searching around, I found the answer.
Summary:
I needed my Custom Drawable class to implement Drawable.Callback and Runnable interfaces (see code below).
CustomDrawable.class
public class CustomDrawable extends Drawable implements Drawable.Callback, Runnable{
private Paint paint;
private Canvas canvas;
private int angle;
private RectF circle;
private float cx,cy;
private float mHeight,mWidth=100;
private float mRadius=20;
private Drawable.Callback cb;
private boolean running=false;
public void invalidateDrawable(Drawable drawable){
super.invalidateSelf(); //This was done for my specific example. I wouldn't use it otherwise
}
public void scheduleDrawable(Drawable drawable, Runnable runnable, long l){
invalidateDrawable(drawable);
}
public void unscheduleDrawable(Drawable drawable,Runnable runnable){
super.unscheduleSelf(runnable);
}
public CircleLoadingBar(){
this(0);
}
public CircleLoadingBar(int angle){
this.angle=angle;
paint=new Paint();
paint.setColor(Color.GREEN);
paint.setAntiAlias(true);
paint.setStrokeCap(Paint.Cap.ROUND);
paint.setStyle(Paint.Style.STROKE);
circle= new RectF();
}
#Override
public void draw(Canvas canvas){
canvas.save();
Rect bounds = getBounds();
circle.set(bounds);
canvas.drawArc(circle, 90, angle, true, paint);
}
public void nextFrame(){
unscheduleSelf(this);
scheduleSelf(this, SystemClock.uptimeMillis() + 250);
}
public void stop(){
running=false;
unscheduleSelf(this);
}
public void start(){
if(!running){
running=true;
nextFrame();
}
}
public void run(){
angle++;
invalidate();
nextFrame();
}
#Override
public void setAlpha(int alpha) {
// Has no effect
}
#Override
public void setColorFilter(ColorFilter cf) {
// Has no effect
}
#Override
public int getOpacity() {
// Not Implemented
return 0;
}
}
Now that your Drawable implements both, you can just "run" it as a separate thread, initiated and controlled by your activity via start and stop functions.
I have written a customized View which draws a circle(it's onDraw function has been overridden to do that).
Now how doI change the color of my circle, from code?(from the Activity function which is going to show that circle)
You can make a setCircleColor to change the color of the circle and call invalidate that will call the View onDraw method.
You can also check for invalidate(Drawable drawable).
public class MyCustomView extends View {
MyCustomView myView;
private Paint myCircle;
public MyCustomView(Context context){
super(context);
initView();
}
private void initView(){
myView = this;
myCircle = new Paint();
myCircle.setColor(0xa300ff00);
}
#Override
protected void onDraw(Canvas canvas) {
drawCircle(canvas);
}
private void drawCircle(Canvas canvas){
canvas.drawCircle(canvas.getWidth()/2, canvas.getHeight()/2, 10, myCircle);
}
public void setCircleColor(int color){
myCircle.setColor(color);
myView.invalidate();
}
}
I have a SurfaceView on wich am drawing a small circle periodically with a special thread
but i want to when i press the surfaceView the thread stops drawing the circle and when i repress it the thread resume drawing the circle again.
I tried with thread methods and i can stop temporarily it with its sleep() method but i did not understand how to use wait and notify and i even found some exemples but did not get help from them
My code is :
public class GameView extends SurfaceView implements SurfaceHolder.Callback {
private float x = 100;
private float y = 100;
private int radius = 20;
private Paint paint;
private SurfaceHolder mSurfaceHolder;
private DrawingThread mTh ead;
private Context myContext;
public GameView(Context context) {
super(context);
this.myContext = context;
setWillNotDraw(false);
paint = new Paint();
paint.setAntiAlias(true);
paint.setColor(Color.GREEN);
paint.setStyle(Paint.Style.STROKE);
paint.setTextAlign(Paint.Align.LEFT);
mSurfaceHolder = getHolder();
mSurfaceHolder.addCallback(this);
}
public void onDraw(Canvas canvas){
canvas.drawCircle(x, y, radius, paint);
}
public boolean onTouchEvent(MotionEvent event) {
int eventaction = event.getAction();
int X = (int)event.getX();
int Y = (int)event.getY();
switch (eventaction ) {
case MotionEvent.ACTION_DOWN:
// I want to do my job here
break;
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_UP:
break;
}
invalidate();
return true;
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
mThread = new DrawingThread(mSurfaceHolder, myContext);
mThread.mRun = true;
mThread.start();
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
public final class DrawingThread extends Thread {
public boolean att = true;
public long delaiAttente = 1000;
boolean mRun;
Canvas mcanvas;
SurfaceHolder surfaceHolder;
Context context;
public DrawingThread(SurfaceHolder sholder, Context ctx)
{
surfaceHolder = sholder;
context = ctx;
mRun = false;
}
void setRunning(boolean bRun)
{
mRun = bRun;
}
boolean keepDrawing = true;
#Override
public void run() {
while (keepDrawing) {
Canvas canvas = null;
try {
canvas = mSurfaceHolder.lockCanvas();
synchronized (mSurfaceHolder) {
draw(canvas);
}
}
catch(Exception e){
}
finally {
if (canvas != null)
mSurfaceHolder.unlockCanvasAndPost(canvas);
}
waitThreaed();
}
}
public void waitThreaed() {
try {
x = (float) (getWidth()*Math.random());
y = (float) (getHeight()*Math.random());
this.sleep(1000);
postInvalidate();
} catch (InterruptedException e) {
}
}
}
}
Can't you just use something like this:
Timer drawTimer = new Timer("draw");
updateTimer.schedule(new TimerTask() {
public void run() {
draw();
}
}, 0, 1000);
private void draw() {
runOnUiThread(new Runnable() {
public void run() { ...}}}
I don't see why you need to subclass Thread.
I am trying to click a button and add a resistor. So what I need is to invalidate the view when the button is clicked. But the invalidate that is inside MyView inside the method update() is not working. I have been trying to search for this problem but I have found nothing similar to what I am trying to do, or maybe this is not the way to do it.
DefaultActivity.java
public class DefaulActivity extends Activity {
MyView myView;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
myView = new MyView(this, null);
final Button bAddResistor = (Button) findViewById(R.id.bAdd);
bAddResistor.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// Perform action on click
myView.update();
Log.d("ButtonADD", "Button Add has been clicked");
}
});
}
}
MyView.java
public class MyView extends SurfaceView implements SurfaceHolder.Callback{
Resistor myResistor;
private ArrayList<Resistor> mElements = new ArrayList<Resistor>();
public MyView(Context context, AttributeSet attrs) {
super(context, attrs);
getHolder().addCallback(this);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
synchronized (mElements) {
for (Resistor element : mElements) {
element.doDraw(canvas);
}
}
}
public void update() {
mElements.add(new Resistor(getContext(), (int) 10, (int) 10));
invalidate(); //Does not work!
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
// TODO Auto-generated method stub
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
Canvas c = holder.lockCanvas();
onDraw(c);
holder.unlockCanvasAndPost(c);
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
// TODO Auto-generated method stub
}
}
Resistor.java
public class Resistor extends View{
private Path mSymbol;
private Paint mPaint;
private int mX;
private int mY;
//...Override Constructors...
public Resistor(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public Resistor(Context context, int x, int y){
super(context);
mX = x;
mY = y;
init();
}
private void init() {
mSymbol = new Path();
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setStrokeWidth(2);
mPaint.setColor(-7829368);
mPaint.setStyle(Paint.Style.STROKE);
//...Your code here to set up the path,
//...allocate objects here, never in the drawing code.
mSymbol.moveTo(0.0F, 0.0F);
mSymbol.lineTo(0.0F, 50.0F);
mSymbol.lineTo(16.666666F, 58.333332F);
mSymbol.lineTo(-16.666666F, 75.0F);
mSymbol.lineTo(16.666666F, 91.666664F);
mSymbol.lineTo(-16.666666F, 108.33333F);
mSymbol.lineTo(16.666666F, 124.99999F);
mSymbol.lineTo(-16.666666F, 141.66666F);
mSymbol.lineTo(0.0F, 150.0F);
mSymbol.lineTo(0.0F, 200.0F);
mSymbol.offset(mX, mY);
}
public void doDraw(Canvas canvas) {
canvas.drawPath(mSymbol, mPaint);
}
You should use a ViewGroup instead of a SurfaceView. Add the Resistor-Views as children to MyView, measure and layout them appropriately and the ViewGroup will automatically take care of drawing them.
SurfaceView requires you to do your drawing in a seperate thread. You have to start that thread in surfaceCreated and keep redrawing the view as needed. For simple views like the one you posted it is perfectly acceptable to just do your drawing in the UI thread. No SurfaceView required.
I haven't used Surfaceviews before but if you in the API you can see, that there is no function called "invalidate()" for the SurfaceView class.
Maybe you can manage to re-use this line somehow:
holder.unlockCanvasAndPost(c);