Develop Reference

create/change/delete/undo number of different shapes on canvas, onClick() of button

I'm creating android application for shapes on canvas onClick of button.
What I want:
I have three buttons 'Square','Circle','Triangle'.
Each time I tap on button and object of that shape will be created & displayed in a random position on one canvas.(done)
On tap of each shape will cause it to become another shape.
tapping on a square will make it a circle
tapping on a circle will make it a triangle
tapping on a triangle will make it a square (done)
On long tap on a shape can delete the shape.(done)
How to implement undo functionality!
Tried and Error: To achieve this functionality I tried so far following code in which I can create one shape on click of button using bitmap in java and image view in xml.
Update_29/10: I work on same code and create multiple shapes on canvas using dynamic relative layout adding views.
My Question:
Is this right way(bitmap and imageview) to create shape on canvas by clicking on button?
I can create multiple shapes on canvas now but every time I'm creating new canvas instance!any other way to achieve this?
Update_29_10:
How to get click of shape so I can delete shape and undo functionality as well.
XML:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="#+id/rl"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ffffff"
tools:context=".MainActivity">
<RelativeLayout
android:id="#+id/relative4"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="10dp"
android:layout_above="#+id/btnCircle"
android:background="#color/colorAccent">
</RelativeLayout>
<Button
android:id="#+id/btnSquare"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:text="#string/square" />
<Button
android:id="#+id/btnCircle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/btnSquare"
android:text="#string/circle" />
<Button
android:id="#+id/btnTriangle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_toRightOf="#+id/btnCircle"
android:text="#string/triangle" />
<Button
android:id="#+id/btnUndo"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toRightOf="#+id/btnTriangle"
android:layout_alignParentBottom="true"
android:text="#string/undo" />
MainActivity.java:
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private Context mContext;
private Resources mResources;
private RelativeLayout mRelativeLayout;
private Button btnSquare, btnCircle, btnTriangle,btnUndo,btnState;
private int mSuareCount=0,mCircleCount=0,mTriangelCount=0;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
}
private void initViews() {
mContext = getApplicationContext();
mResources = getResources();
mRelativeLayout = (RelativeLayout) findViewById(R.id.rl);
btnSquare = (Button) findViewById(R.id.btnSquare);
btnCircle = (Button)findViewById(R.id.btnCircle);
btnTriangle = (Button)findViewById(R.id.btnTriangle);
btnUndo=(Button)findViewById(R.id.btnUndo);
setOnClickListeners();
}
private void setOnClickListeners() {
btnSquare.setOnClickListener(this);
btnCircle.setOnClickListener(this);
btnTriangle.setOnClickListener(this);
btnUndo.setOnClickListener(this);
}
#RequiresApi(api = Build.VERSION_CODES.M)
#Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.btnSquare:
drawSquare(null);
mSuareCount++;
break;
case R.id.btnCircle:
drawCircle(null);
mCircleCount++;
break;
case R.id.btnTriangle:
drawTriangle(null);
mTriangelCount++;
break;
case R.id.btnUndo:
break;
}
}
private void drawSquare(ImageView imageView) {
Bitmap bitmap = Bitmap.createBitmap(
50, // Width
50, // Height
Bitmap.Config.ARGB_8888 // Config
);
Canvas canvas = new Canvas(bitmap);
canvas.drawColor(Color.LTGRAY);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.YELLOW);
paint.setAntiAlias(true);
int padding = 50;
Rect rectangle = new Rect(
padding, // Left
padding, // Top
canvas.getWidth() - padding, // Right
canvas.getHeight() - padding // Bottom
);
canvas.drawRect(rectangle, paint);
addViews(bitmap,imageView,1);
// Display the newly created bitmap on app interface
if (imageView == null) {
imageView = new ImageView(this);
}
imageView.setImageBitmap(bitmap);
final ImageView finalImageView = imageView;
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawCircle(finalImageView);
mSuareCount--;
mCircleCount++;
}
});
}
private void drawCircle(ImageView imageView) {
Bitmap bitmap = Bitmap.createBitmap(
50, // Width
50, // Height
Bitmap.Config.ARGB_8888 // Config
);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.RED);
paint.setAntiAlias(true);
int radius = Math.min(canvas.getWidth(), canvas.getHeight() / 2);
int padding = 5;
canvas.drawCircle(
canvas.getWidth() / 2, // cx
canvas.getHeight() / 2, // cy
radius - padding, // Radius
paint // Paint
);
addViews(bitmap,imageView,2);
// Display the newly created bitmap on app interface
if (imageView == null) {
imageView = new ImageView(this);
}
imageView.setImageBitmap(bitmap);
final ImageView finalImageView = imageView;
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawTriangle(finalImageView);
mCircleCount--;
mTriangelCount++;
}
});
}
private void drawTriangle(ImageView imageView) {
Bitmap bitmap = Bitmap.createBitmap(
500, // Width
500, // Height
Bitmap.Config.ARGB_8888 // Config
);
Canvas canvas = new Canvas(bitmap);
Paint paint = new Paint();
final Rect rect = new Rect(0, 0, bitmap.getWidth(),
bitmap.getHeight());
paint.setStyle(Paint.Style.FILL);
paint.setColor(Color.YELLOW);
paint.setAntiAlias(true);
Point point1_draw = new Point(90, 0);
Point point2_draw = new Point(0, 180);
Point point3_draw = new Point(180, 180);
Path path = new Path();
path.moveTo(point1_draw.x, point1_draw.y);
path.lineTo(point2_draw.x, point2_draw.y);
path.lineTo(point3_draw.x, point3_draw.y);
path.lineTo(point1_draw.x, point1_draw.y);
path.close();
canvas.drawARGB(0, 0, 0, 0);
paint.setColor(Color.parseColor("#3F51B5"));
canvas.drawPath(path, paint);
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
canvas.drawBitmap(bitmap, rect, rect, paint);
//addViews(bitmap,imageView);
addViews(bitmap,imageView,3);
if (imageView == null) {
imageView = new ImageView(this);
}
imageView.setImageBitmap(bitmap);
final ImageView finalImageView = imageView;
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
drawSquare(finalImageView);
mSuareCount++;
mTriangelCount--;
}
});
}
private void addViews(Bitmap bitmap, ImageView imageView, final int value) {
final int min = 20;
final int max = 80;
Drawable d = getResources().getDrawable(R.mipmap.ic_launcher_round);
final int w = d.getIntrinsicWidth();
final int random = new Random().nextInt((max - min) + 1) + min;
RelativeLayout relative4 = (RelativeLayout) findViewById(R.id.relative4);
int width = relative4.getMeasuredWidth();
int height = relative4.getMeasuredHeight();
if (imageView == null) {
imageView = new ImageView(this);
}
RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(100, 100);
params.setMargins(new Random().nextInt((width - 0) + 1), new Random().nextInt((height - 0) + 1), 10, 10);
imageView.setLayoutParams(params);
imageView.setImageBitmap(bitmap);
if (imageView != null) {
ViewGroup parent = (ViewGroup) imageView.getParent();
if (parent != null) {
parent.removeView(imageView);
}
}
relative4.addView(imageView);
final ImageView finalImageView = imageView;
imageView.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
switch (value) {
case 1:
drawCircle(finalImageView);
mSuareCount--;
mCircleCount++;
break;
case 2:
drawTriangle(finalImageView);
mCircleCount--;
mTriangelCount++;
break;
case 3:
drawSquare(finalImageView);
mTriangelCount--;
mSuareCount++;
break;
}
}
});
imageView.setOnLongClickListener(new View.OnLongClickListener(){
#Override
public boolean onLongClick(View v) {
switch (value) {
case 1:
relative4.removeView(finalImageView);
mSquareCount--;
break;
case 2:
relative4.removeView(finalImageView);
mCircleCount--;
break;
case 3:
relative4.removeView(finalImageView);
mTriangleCount--;
break;
}
return true;
});
}
}

You may implement the functionality using with the following approach (psudo code):
Step 1:
interface ShapeInfo {
void drawShape(Canvas canvas);
}
Step 2:
Implement the 3 different classes (Rect, Triangle, Circle) with this interface
Step 3: Set a background to RelativeLayout
Step 4: Add a CustomView in RelativeLayout
make this custom view transparent.
public class CustomView extends ImageView{
ArrayList<ShapeInfo> alShapesInfo = new ArrayList();
public CustomView(Context context) {
super(context);
// TODO Auto-generated constructor stub
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
for ( ShapeInfo s:alShapesInfo)
s.drawShape(canvas);
}
public void addShapeInfo(ShapeInfo s){alShapeinfo.add(s); invalidate();}
public void undo(){alShapeInfo.delete(alShapeInfo.size()-1); invalidate();}
}
Spte 5:
In main activity on button click of add triangle, circle, rect call customview.addshapeinfo
Step 6: to undo call
customview.undo

While aanshu's solution is probably the more efficient way to do this, his solution makes it difficult to recognize clicks on the single shapes.
Instead of making one big subclass of ImageView and overriding onDraw and drawing each of the sub-shapes, you could make a subclass of ImageView for each class of square, circle and triangle. Something like this:
public class SquareView extends ImageView {
#Override
protected void onDraw(Canvas canvas) {
//draw your Square on the canvas given
}
}
Same for Circle and triangle. Then just generate one of these views as you were generating image views before but do not set the Bitmap. You can add them to the layout and it will call the onDraw function and give it a canvas. Now you can register your onClickListener for each of these views as before. When the view is clicked you replace it with an instance of a different class, for example you replace SquareView with a CircleView.
For the undo operations, you could just make this. This is very pseudocode like, I also might be mixing some programming languages but the idea is everywhere the same. If something is unclear, please ask.
Stack<Runnable> undoStack;
//and now whenever you do something that should be undoable you just add a runnable that will undo it:
//for example if a user clicked a SquareView:
removeView(squareView);
CircleView circleView = new CircleView();
//take the information from the squareView that is needed
circleview.position = squareView.position;
addView(circleView);
undoStack.push(() -> removeView(circleView); addView(squareView););
//When you undo you just call
undoStack.pop().run();
A bit of background about your code, because I think it will help you understand. This is the source of android ImageView. When you call setImageBitmap(bitmap), it passes the bitmap to an instance of BitmapDrawable which it calls mDrawable. Then in the ImageViews onDraw(Canvas canvas) method it calls mDrawable.draw(canvas) which in case of BitmapDrawable (source here) after a lot of other stuff calls canvas.drawBitmap(bitmap). So basically what your code does: it creates a Bitmap from a canvas and then via ImageView and BitmapDrawable the bitmap is drawn back on a canvas. My and aanshu's solution draw directly on this final canvas. That is why they are better than your current solution.
Edit:
While searching something else, I stumbled upon drawable shape resources. As with any drawable resource you can just pass them to ImageViews. This way you probably wouldn't have to override the onDraw function. But I never worked with them, so I'll just leave this here.

Draw a line on ImageView set by Picasso

I am trying to figure out how to simply draw a line on an image that is being set in Picasso. I found that if I simply set the image, given a URI, with Picasso and try to draw paint to it using the following:
canvas = new Canvas(bitmap);
image.draw(canvas);
topEdge = new Paint();
topEdge.setColor(context.getResources().getColor(R.color.blue));
topEdge.setStrokeWidth(5);
canvas.drawLine(c1.getX(), c1.getY(), c2.getX(), c2.getY(), topEdge);
Then I get a crash saying that the bitmap needs to be mutable first. So I added this above that code:
Bitmap workingBitmap = ((BitmapDrawable) image.getDrawable()).getBitmap();
Bitmap mutableBitmap = workingBitmap.copy(Bitmap.Config.ARGB_8888, true);
And then create the canvas with new Canvas(mutableBitmap) instead. This removed the crash, however nothing is being drawn. I believe this is because my Picasso is setting the image before, so now I need to reset Picasso with this new mutable bitmap. The problem is this code is in the onSuccess() callback for Picasso. What can I do to allow Paint to be drawn on an image through Picasso?

just follow the steps below:
Write your own class extends the class Transformation like below:
class DrawLineTransformation implements Transformation {
#Override
public String key() {
// TODO Auto-generated method stub
return "drawline";
}
#Override
public Bitmap transform(Bitmap bitmap) {
// TODO Auto-generated method stub
synchronized (DrawLineTransformation.class) {
if(bitmap == null) {
return null;
}
Bitmap resultBitmap = bitmap.copy(bitmap.getConfig(), true);
Canvas canvas = new Canvas(resultBitmap);
Paint paint = new Paint();
paint.setColor(Color.BLUE);
paint.setStrokeWidth(10);
canvas.drawLine(0, resultBitmap.getHeight()/2, resultBitmap.getWidth(), resultBitmap.getHeight()/2, paint);
bitmap.recycle();
return resultBitmap;
}
}
}
2、Add the Transformation to RequestCreator created with Picasso.load() function like below:
Picasso picasso = Picasso.with(getApplicationContext());
DrawLineTransformation myTransformation = new DrawLineTransformation();
picasso.load("http://www.baidu.com/img/bdlogo.png").transform(myTransformation).into(imageview);
That's all steps you need to do , just enjoy!

android: paths to become part of the bitmap when requested

I am learning on canvas and bitmap with paths and currently working on a drawing app where user can draw paths freely on the extended view.
The app also allow allowing user to import bitmap as the background and draw on it.
Extending the View named DoodleView:
public DoodleView(Context context, AttributeSet attrs)
{
super(context, attrs); // pass context to View's constructor
this.context_new=context;
setFocusable(true);
setFocusableInTouchMode(true);
} // end DoodleView constructor
onDraw:
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmap(bitmap, 0, 0, null);
for (Path p : paths)
{
paintLine.setColor(colorsMap.get(p));
canvas.drawPath(p, paintLine);
}
paintLine.setColor(selectedColor);
canvas.drawPath(mPath, paintLine);
if (ConvertCanvasToBitmap == true)
{
canvas.drawBitmap(bitmap, 0, 0, paintLine);
ConvertCanvasToBitmap = false;
}
}
FlipHorizontally:
public void flipImageHorizontally()
{
ConvertCanvasToBitmap = true;
invalidate();
Matrix flipHorizontalMatrix = new Matrix();
flipHorizontalMatrix.setScale(-1,1);
flipHorizontalMatrix.postTranslate(bitmap.getWidth(),0);
Bitmap HorizontalFlipped = Bitmap.createBitmap
(bitmap, 0, 0, bitmap.getWidth(), bitmap.getHeight(), flipHorizontalMatrix, true);
bitmap = HorizontalFlipped;
invalidate();
}
Question:
My goal is that for the paths that are already drawn, when the user tries to flip the image, the paths drawn would also be flipped. (i.e. the paths become part of the image already, and user are disallows to undo the paths anymore).
However, I have tested using the above codes, when the flip button is pressed, the bitmap background can be flipped, yet the drawn would disappear. And then when further drawn on it, the paths will appear again, but stay unflipped.
In short, how to make the paths to become part of the bitmap when the flip button is pressed?
Thanks!
Edit:
Based on the Android 2.1 View's getDrawingCache() method always returns null, I have modified the onDraw with the following code, but got
02-22 21:38:34.685: E/AndroidRuntime(18617): java.lang.NullPointerException
02-22 21:38:34.685: E/AndroidRuntime(18617): at android.graphics.Bitmap.createBitmap(Bitmap.java:455)
02-22 21:38:34.685: E/AndroidRuntime(18617): at com.pearmak.drawing.DoodleView.onDraw(DoodleView.java:148)
Modified code:
#Override
protected void onDraw(Canvas canvas)
{
canvas.drawBitmap(bitmap, 0, 0, null); // draw the background screen
for (Path p : paths)
{
paintLine.setColor(colorsMap.get(p));
paintLine.setStrokeWidth(widthMap.get(p));
canvas.drawPath(p, paintLine);
}
paintLine.setColor(selectedColor);
paintLine.setStrokeWidth(selectedWidth);
canvas.drawPath(mPath, paintLine);
if (ConvertCanvasToBitmap == true)
{
//Method 1
// RelativeLayout page = (RelativeLayout) findViewById(R.id.doodleView);
// Bitmap screenshot = Bitmap.createBitmap(page.getWidth(), page.getHeight(), Config.ARGB_8888);
// bitmap = screenshot;
// ConvertCanvasToBitmap = false;
//Method 2
Bitmap screenshot2;
layout(0, 0, DoodlzViewWidth, DoodlzViewHeight);
setDrawingCacheEnabled(true);
screenshot2 = Bitmap.createBitmap(getDrawingCache()); // LINE 148
setDrawingCacheEnabled(false);
bitmap = screenshot2;
}
}

you need to create the bitmap from that view
please refer to drawingcache like here
Android 2.1 View's getDrawingCache() method always returns null
now try to flip this bitmap

Prevent GradientDrawable to redraw while animating

I have set a GradientDrawable as background. While doing some 3d transaction (especially at the Y axis) the GradientDrawable redraws it self and the famerate is not good.
I cannot cache the view that the drawing is set as background because
i want other views on top of that to animate.
I cannot put another view just for the background and cache that view
cause then that view only beeing fullscreen will cause the same
problems.
I cannot use windowsDecorator for the background.
So what i want is a way to stop the GradientDrawable to try to redraw itself during the animation. I think jumpToCurrentState() does what i want but i want it to work on API level >= 8 and jumpToCurrentState() is only for API level >=11. Also i wish i knew what jumpToCurrentState does exactly to port it to the API lvl 8 but can't find the function anywhere in the drawable(source not released?)
So is there any way to cache the drawable it self and not the view containing that Drawable?.
The last resort will be to not draw the background during animations but i really really want to avoid that.

I ended up creating a bitmap caching system for the GradientDrawable it self. (Didn't want to cache the view that has this drawable as a background).
This gives a great speed boost for animations.
public class PGradientDrawable extends GradientDrawable {
private int firstColor;
private int secondColor;
private Paint cachePaint = new Paint();
private Canvas cacheCanvas = new Canvas();
private Bitmap bitmap;
public PGradientDrawable(Orientation angle, int[] intarray) {
super(angle, intarray);
firstColor = intarray[0];
secondColor = intarray[1];
}
public boolean isBackground = false;
boolean firstTime = true;
public void buildCache(int width, int height) {
if (bitmap != null)
bitmap.recycle();
try {
bitmap = Bitmap
.createBitmap(width, height, Bitmap.Config.ARGB_8888);
bitmap.setDensity(context.getResources().getDisplayMetrics().densityDpi);
cacheCanvas.setBitmap(bitmap);
// TODO shader must be what the GradientDrawable is,type
// orientation..
cachePaint.setShader(new LinearGradient(0, 0, width, height,
firstColor, secondColor, Shader.TileMode.CLAMP));
cacheCanvas.drawPaint(cachePaint);
} catch (OutOfMemoryError e) {
// clear the bitmap force draw() to repaint
bitmap = null;
}
}
#Override
public void draw(Canvas canvas) {
if (bitmap != null) {
// Draw the bitmap
canvas.drawBitmap(bitmap, 0, 0, null);
return;
}
super.draw(canvas);
}
}

Android, canvas: How do I clear (delete contents of) a canvas (= bitmaps), living in a surfaceView?

In order to make a simple game, I used a template that draws a canvas with bitmaps like this:
private void doDraw(Canvas canvas) {
for (int i=0;i<8;i++)
for (int j=0;j<9;j++)
for (int k=0;k<7;k++) {
canvas.drawBitmap(mBits[allBits[i][j][k]], i*50 -k*7, j*50 -k*7, null); } }
(The canvas is defined in "run()" / the SurfaceView lives in a GameThread.)
My first question is how do I clear (or redraw) the whole canvas for a new layout?
Second, how can I update just a part of the screen?
// This is the routine that calls "doDraw":
public void run() {
while (mRun) {
Canvas c = null;
try {
c = mSurfaceHolder.lockCanvas(null);
synchronized (mSurfaceHolder) {
if (mMode == STATE_RUNNING)
updateGame();
doDraw(c); }
} finally {
if (c != null) {
mSurfaceHolder.unlockCanvasAndPost(c); } } } }

Draw transparent color with PorterDuff clear mode does the trick for what I wanted.
Canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR)

How do I clear (or redraw) the WHOLE canvas for a new layout (= try at the game) ?
Just call Canvas.drawColor(Color.BLACK), or whatever color you want to clear your Canvas with.
And: how can I update just a part of the screen ?
There is no such method that just update a "part of the screen" since Android OS is redrawing every pixel when updating the screen. But, when you're not clearing old drawings on your Canvas, the old drawings are still on the surface and that is probably one way to "update just a part" of the screen.
So, if you want to "update a part of the screen", just avoid calling Canvas.drawColor() method.

Found this in google groups and this worked for me..
Paint clearPaint = new Paint();
clearPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRect(0, 0, width, height, clearPaint);
This removes drawings rectangles etc. while keeping set bitmap..

use the reset method of Path class
Path.reset();

I tried the answer of #mobistry:
canvas.drawColor(Color.TRANSPARENT, Mode.CLEAR);
But it doesn't worked for me.
The solution, for me, was:
canvas.drawColor(Color.TRANSPARENT, Mode.MULTIPLY);
Maybe some one has the same problem.

mBitmap.eraseColor(Color.TRANSPARENT);
canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);

canvas.drawColor(Color.TRANSPARENT, Mode.MULTIPLY);

please paste below code on surfaceview extend class constructor.............
constructor coding
SurfaceHolder holder = getHolder();
holder.addCallback(this);
SurfaceView sur = (SurfaceView)findViewById(R.id.surfaceview);
sur.setZOrderOnTop(true); // necessary
holder = sur.getHolder();
holder.setFormat(PixelFormat.TRANSPARENT);
xml coding
<com.welcome.panelview.PanelViewWelcomeScreen
android:id="#+id/one"
android:layout_width="600px"
android:layout_height="312px"
android:layout_gravity="center"
android:layout_marginTop="10px"
android:background="#drawable/welcome" />
try above code...

Here is the code of a minimal example showing that you always have to redraw every pixel of the Canvas at each frame.
This activity draw a new Bitmap every second on the SurfaceView, without clearing the screen before.
If you test it, you will see that the bitmap is not always written to the same buffer, and the screen will alternate between the two buffers.
I tested it on my phone (Nexus S, Android 2.3.3), and on the emulator (Android 2.2).
public class TestCanvas extends Activity {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(new TestView(this));
}
}
class TestView extends SurfaceView implements SurfaceHolder.Callback {
private TestThread mThread;
private int mWidth;
private int mHeight;
private Bitmap mBitmap;
private SurfaceHolder mSurfaceHolder;
public TestView(Context context) {
super(context);
mThread = new TestThread();
mBitmap = BitmapFactory.decodeResource(context.getResources(), R.drawable.icon);
mSurfaceHolder = getHolder();
mSurfaceHolder.addCallback(this);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width,
int height) {
mWidth = width;
mHeight = height;
mThread.start();
}
#Override
public void surfaceCreated(SurfaceHolder holder) {/* Do nothing */}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
if (mThread != null && mThread.isAlive())
mThread.interrupt();
}
class TestThread extends Thread {
#Override
public void run() {
while (!isInterrupted()) {
Canvas c = null;
try {
c = mSurfaceHolder.lockCanvas(null);
synchronized (mSurfaceHolder) {
c.drawBitmap(mBitmap, (int) (Math.random() * mWidth), (int) (Math.random() * mHeight), null);
}
} finally {
if (c != null)
mSurfaceHolder.unlockCanvasAndPost(c);
}
try {
sleep(1000);
} catch (InterruptedException e) {
interrupt();
}
}
}
}
}

For me calling Canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR) or something similar would only work after I touch the screen. SO I would call the above line of code but the screen would only clear after I then touched the screen. So what worked for me was to call invalidate() followed by init() which is called at the time of creation to initialize the view.
private void init() {
setFocusable(true);
setFocusableInTouchMode(true);
setOnTouchListener(this);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setDither(true);
mPaint.setColor(Color.BLACK);
mPaint.setStyle(Paint.Style.STROKE);
mPaint.setStrokeJoin(Paint.Join.ROUND);
mPaint.setStrokeCap(Paint.Cap.ROUND);
mPaint.setStrokeWidth(6);
mCanvas = new Canvas();
mPaths = new LinkedList<>();
addNewPath();
}

Erasing on Canvas in java android is similar erasing HTML Canvas via javascript with globalCompositeOperation. The logic was similar.
U will choose DST_OUT (Destination Out) logic.
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_OUT));
Note: DST_OUT is more useful because it can erase 50% if the paint color have 50% alpha. So, to clear completely to transparent, the alpha of color must be 100%. Apply paint.setColor(Color.WHITE) is recommended. And make sure that the canvas image format was RGBA_8888.
After erased, go back to normal drawing with SRC_OVER (Source Over).
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OVER));
Update small area display literally will need to access graphic hardware, and it maybe not supported.
The most close for highest performance is using multi image layer.

With the following approach, you can clear the whole canvas or just a part of it.
Please do not forget to disable Hardware acceleration since PorterDuff.Mode.CLEAR doesn’t work with hardware acceleration and finally call setWillNotDraw(false) because we override the onDraw method.
//view's constructor
setWillNotDraw(false);
setLayerType(LAYER_TYPE_SOFTWARE, null);
//view's onDraw
Paint TransparentPaint = new Paint();
TransparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
canvas.drawRect(0, 0, width, height, TransparentPaint);

Don't forget to call invalidate();
canvas.drawColor(backgroundColor);
invalidate();
path.reset();

I found my solution.
PaintView class:
public void clear() {
mPath.reset();
mCanvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
paths.clear();
}
And MainActivity:
clear_canvas_.setOnClickListener(new View.OnClickListener() {
#Override
public void onClick(View view) {
paintView.clear();
}
});

Your first requirement, how to clear or redraw whole canvas - Answer - use canvas.drawColor(color.Black) method for clearing the screen with a color of black or whatever you specify .
Your second requirement, how to update part of the screen - Answer - for example if you want to keep all other things unchanged on the screen but in a small area of screen to show an integer(say counter) which increases after every five seconds. then use canvas.drawrect method to draw that small area by specifying left top right bottom and paint. then compute your counter value(using postdalayed for 5 seconds etc., llike Handler.postDelayed(Runnable_Object, 5000);) , convert it to text string, compute the x and y coordinate in this small rect and use text view to display the changing counter value.

Try to remove the view at onPause() of an activity and add onRestart()
LayoutYouAddedYourView.addView(YourCustomView);
LayoutYouAddedYourView.removeView(YourCustomView);
The moment you add your view, onDraw() method would get called.
YourCustomView, is a class which extends the View class.

In my case, I draw my canvas into linearlayout.
To clean and redraw again:
LinearLayout linearLayout = findViewById(R.id.myCanvas);
linearLayout.removeAllViews();
and then, I call the class with the new values:
Lienzo fondo = new Lienzo(this,items);
linearLayout.addView(fondo);
This is the class Lienzo:
class Lienzo extends View {
Paint paint;
RectF contenedor;
Path path;
ArrayList<Items>elementos;
public Lienzo(Context context,ArrayList<Items> elementos) {
super(context);
this.elementos=elementos;
init();
}
private void init() {
path=new Path();
paint = new Paint();
contenedor = new RectF();
paint.setStyle(Paint.Style.FILL);
}
#Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
contenedor.left = oneValue;
contenedor.top = anotherValue;
contenedor.right = anotherValue;
contenedor.bottom = anotherValue;
float angulo = -90; //starts drawing at 12 o'clock
//total= sum of all element values
for (int i=0;i<elementos.size();i++){
if (elementos.get(i).angulo!=0 && elementos.get(i).visible){
paint.setColor(elementos.get(i).backColor);
canvas.drawArc(contenedor,angulo,(float)(elementos.get(i).value*360)/total,true,paint);
angulo+=(float)(elementos.get(i).value*360)/total;
}
} //for example
}
}

In my case, creating canvas every time worked for me, even though it's not memory-friendly
Bitmap bm = BitmapFactory.decodeResource(getResources(), R.drawable.image);
imageBitmap = Bitmap.createBitmap(bm.getWidth(), bm.getHeight(), bm.getConfig());
canvas = new Canvas(imageBitmap);
canvas.drawBitmap(bm, 0, 0, null);

I had to use a separate drawing pass to clear the canvas (lock, draw and unlock):
Canvas canvas = null;
try {
canvas = holder.lockCanvas();
if (canvas == null) {
// exit drawing thread
break;
}
canvas.drawColor(colorToClearFromCanvas, PorterDuff.Mode.CLEAR);
} finally {
if (canvas != null) {
holder.unlockCanvasAndPost(canvas);
}
}

The following worked for me:
canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.SCREEN);

Just call
canvas.drawColor(Color.TRANSPARENT)