Develop Reference

Android canvas remember previous paintings on invalidate

When using invalidate the history of previous drawing actions are gone. I want to create an animation where I draw some new pixels after a certain delay.
I have tried using a Bitmap to remember the previous set pixels, but it won't load on the canvas, it throws an exception, see code below (commented not working).
I tried using invalidate but it completely wipes out the previous set pixels.
#Override
protected void onDraw(Canvas canvas) {
int colorWhite = getResources().getColor(android.R.color.white);
int colorBlack = getResources().getColor(android.R.color.black);
//not working
//Bitmap bmp = Bitmap.createBitmap(300,300, Bitmap.Config.ARGB_8888);
//canvas.setBitmap(bmp);
try
{
if(board == null) {
Ant ant = new Ant(new Position(430,430), new TurnDegree(0));
board = new Board(ant, 15000);
board.moveAnt();
}
MarkedPosition position = board.positions().get(count);
if(position.isMarked()) {
paint.setColor(colorWhite);
} else {
paint.setColor(colorBlack);
}
paint.setStrokeWidth(5);
System.out.println(position.position().x());
canvas.drawRect(position.position().x(), position.position().y(),
position.position().x() + 5, position.position().y() + 5, paint);
final Handler handler = new Handler();
handler.postDelayed(new Runnable() {
#Override
public void run() {
invalidate();
}
}, 100);
}
catch(Exception e){
System.out.println("Error");
}
count++;
}
How can I create a sort of animation which draws new pixels to the screen after a certain delay, without having to repaint all pixels which I set previously?

you can store your previous pixels in ArrayList. after invalidate redraw all the points from ArrayList
make Arraylist of rect
ArrayList<Rect> allRects = new ArraList();
add when you draw rect on cavas
Rect rect = new Rect(position.position().x(), position.position().y(),
position.position().x() + 5, position.position().y() + 5);
canvas.drawRect(rect);
allRects.add(rect);
after invalidate again draw all rect using for loop
for (i = 0; i< allRects.size(); i++){
canvas.drawRect(allRects.get(i));
}

Surface Texture object is not getting the frames from a Surface Class

On the one hand, I have a Surface Class which when instantiated, automatically initialize a new thread and start grabbing frames from a streaming source via native code based on FFMPEG. Here is the main parts of the code for the aforementioned Surface Class:
public class StreamingSurface extends Surface implements Runnable {
...
public StreamingSurface(SurfaceTexture surfaceTexture, int width, int height) {
super(surfaceTexture);
screenWidth = width;
screenHeight = height;
init();
}
public void init() {
mDrawTop = 0;
mDrawLeft = 0;
mVideoCurrentFrame = 0;
this.setVideoFile();
this.startPlay();
}
public void setVideoFile() {
// Initialise FFMPEG
naInit("");
// Get stream video res
int[] res = naGetVideoRes();
mDisplayWidth = (int)(res[0]);
mDisplayHeight = (int)(res[1]);
// Prepare Display
mBitmap = Bitmap.createBitmap(mDisplayWidth, mDisplayHeight, Bitmap.Config.ARGB_8888);
naPrepareDisplay(mBitmap, mDisplayWidth, mDisplayHeight);
}
public void startPlay() {
thread = new Thread(this);
thread.start();
}
#Override
public void run() {
while (true) {
while (2 == mStatus) {
//pause
SystemClock.sleep(100);
}
mVideoCurrentFrame = naGetVideoFrame();
if (0 < mVideoCurrentFrame) {
//success, redraw
if(isValid()){
Canvas canvas = lockCanvas(null);
if (null != mBitmap) {
canvas.drawBitmap(mBitmap, mDrawLeft, mDrawTop, prFramePaint);
}
unlockCanvasAndPost(canvas);
}
} else {
//failure, probably end of video, break
naFinish(mBitmap);
mStatus = 0;
break;
}
}
}
}
In my MainActivity class, I instantiated this class in the following way:
public void startCamera(int texture)
{
mSurface = new SurfaceTexture(texture);
mSurface.setOnFrameAvailableListener(this);
Surface surface = new StreamingSurface(mSurface, 640, 360);
surface.release();
}
I read the following line in the Android developer page, regarding the Surface class constructor:
"Images drawn to the Surface will be made available to the SurfaceTexture, which can attach them to an OpenGL ES texture via updateTexImage()."
That is exactly what I want to do, and I have everything ready for the further renderization. But definitely, with the above code, I never get my frames captured in the surface class transformed to its corresponding SurfaceTexture. I know this because the debugger, for instace, never call the OnFrameAvailableLister method associated with that Surface Texture.
Any ideas? Maybe the fact that I am using a thread to call the drawing functions is messing everything? In such a case, what alternatives I have to grab the frames?
Thanks in advance

ImageView not showing bitmap after reappearing on screen API < 23

I came across a weird issue of the android framework again:
I have an activity which displays detailed information on an object. It is designed to look like a "floating" activity, meaning it overlays the MainActivity and can be dismissed by a simple swipe down from the user.
Screenshot
How it's done (wrong?)
Because setting the window background to #android:color/transparent lead to ugly side effects, I'm using a custom ImageView as the background (I modified this one by Chris Banes https://github.com/chrisbanes/philm/blob/master/app/src/main/java/app/philm/in/view/BackdropImageView.java):
public class BackdropImageView extends ImageView {
private static final int MIN_SCRIM_ALPHA = 0x00;
private static final int MAX_SCRIM_ALPHA = 0xFF;
private static final int SCRIM_ALPHA_DIFF = MAX_SCRIM_ALPHA - MIN_SCRIM_ALPHA;
private float mScrimDarkness;
private float factor;
private int mScrimColor = Color.BLACK;
private int mScrollOffset;
private int mImageOffset;
private final Paint mScrimPaint;
public BackdropImageView(Context context) {
super(context);
mScrimPaint = new Paint();
factor = 2;
}
public BackdropImageView(Context context, AttributeSet attrs) {
super(context, attrs);
mScrimPaint = new Paint();
factor = 2;
}
private void setScrollOffset(int offset) {
if (offset != mScrollOffset) {
mScrollOffset = offset;
mImageOffset = (int) (-offset / factor);
offsetTopAndBottom(offset - getTop());
ViewCompat.postInvalidateOnAnimation(this);
}
}
public void setFactor(float factor) {
this.factor = factor;
}
#Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (mScrollOffset != 0) {
offsetTopAndBottom(mScrollOffset - getTop());
}
}
public void setScrimColor(int scrimColor) {
if (mScrimColor != scrimColor) {
mScrimColor = scrimColor;
ViewCompat.postInvalidateOnAnimation(this);
}
}
public void setProgress(int offset, float scrim) {
mScrimDarkness = ScrollUtils.getFloat(scrim, 0, 1);
setScrollOffset(offset);
}
#Override
protected void onDraw(#NonNull Canvas canvas) {
// Update the scrim paint
mScrimPaint.setColor(ColorUtils.setAlphaComponent(mScrimColor,
MIN_SCRIM_ALPHA + (int) (SCRIM_ALPHA_DIFF * mScrimDarkness)));
if (mImageOffset != 0) {
canvas.save();
canvas.translate(0f, mImageOffset);
canvas.clipRect(0f, 0f, canvas.getWidth(), canvas.getHeight() + mImageOffset + 1);
super.onDraw(canvas);
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mScrimPaint);
canvas.restore();
} else {
super.onDraw(canvas);
canvas.drawRect(0, 0, canvas.getWidth(), canvas.getHeight(), mScrimPaint);
}
}
}
When I start the activity, I create a snapshot of the current activity and then save it to cache, passing it's path through Intent.putExtra(String key, String value); :
public static Intent createOverlayActivity(Activity activity) {
Intent startIntent = new Intent(activity, OverlayActivity.class);
View root = activity.findViewById(android.R.id.content);
Rect clipRect = new Rect();
activity.getWindow().getDecorView()
.getWindowVisibleDisplayFrame(clipRect);
Bitmap bitmap = Bitmap.createBitmap(
root.getWidth(),
root.getHeight(),
Bitmap.Config.ARGB_8888
);
Canvas canvas = new Canvas(bitmap);
canvas.drawRGB(0xEE, 0xEE, 0xEE);
// Quick fix for status bar appearing in Lollipop and above
if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
canvas.translate(0, -clipRect.top / 2);
canvas.clipRect(clipRect);
}
root.draw(canvas);
try {
File file = new File(activity.getCacheDir(), "background.jpg");
FileOutputStream stream = new FileOutputStream(file);
bitmap.compress(Bitmap.CompressFormat.JPEG, 50, stream);
stream.flush();
stream.close();
bitmap.recycle();
startIntent.putExtra("bgBitmap", file.getPath());
Log.d(TAG, "Rendered background image.");
} catch (IOException e) {
e.printStackTrace();
}
return startIntent;
}
And in the OverlayActivity's onCreate() I receive the path to the cached file and load the Bitmap into the ImageView:
Bitmap screenshot = BitmapFactory.decodeFile(getIntent().getStringExtra("bgBitmap"));
if (screenshot == null) {
throw new IllegalArgumentException("You have to provide a valid bitmap!");
}
/* BackdropImageView is an ImageView subclass allowing
* me to darken the image with a scrim using the slide offset value */
backdropImageView = new BackdropImageView(this);
backdropImageView.setId(android.R.id.background);
backdropImageView.setFactor(1.125f);
backdropImageView.setScrimColor(Color.BLACK);
backdropImageView.setImageBitmap(screenshot);
backdropImageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
The issue
As you can see in the screenshot above, it works pretty decent on devices running API 23, but not on devices below.
Here the image is shown when the activity slides in, until completely covered, but when I the slide down again, the image is gone and the ImageView just shows a solid grey:
Update
I've figured out that the issue has to hide somewhere in the BackdropImageView class, since a simple ImageView works.
Any ideas on what could cause this weird issue?
Thanks in advance!

Ok, seems like I focused too much on the actual image loading than on the view itself.
I found out that the problem was related to the use of offsetTopAndBottom(offset - getTop()); in the subclass. Somehow this makes the ImageView disappear sometimes (still not sure when exactly) on Android Versions previous to Marshmallow, although it was still in the right position in the view hierarchy.
So here's my work-around:
When I removed those lines of code, it worked. Because I needed to offset the view to create a parallax scrolling effect, I moved this functionality out of the view subclass. What I'm doing now is simply calling View.setTranslationY(float) everytime before BackdropImageView.setProgress(int, float) in any scrolling related callback I'm using.
Somehow this works perfectly fine.

How to avoid ghost drawing after clearing SurfaceView canvas

Hi I am working on plotting a real time graph of incoming signals using SurfaceView.
The sampling rate is 128Hz and the target graph refresh rate is 50Zh.
Things run pretty smoothly, the points are drawn real-time properly.
I plot the data in segments of a few points using Path()
for each segment I call path.computeBounds() to get a rect that I will use to call holder.lockCanvas(rect) and draw the path. Using a rect prevents flickering and reduces cpu usage
when the graph reaches the end I lock the entire canvas and clear the background, draw the graph frame and then continue on plotting.
the problem is that at the beginning of each new "page" I get a ghost image from the last page:
I believe this is caused by double buffering / use of a dirty area when plotting.
I have looked for solutions to this problem but none seem adequate for this type of application. Any help is most welcome.
Thanks
Jean-Pierre
Code follows:
private void draw() {
Point point = null;
Canvas canvas = null;
Path path = new Path();
ArrayList<Point> pointArray;
float oldX = -1;
boolean setToClear = false;
boolean isNewSegment = false;
if (samplesInQueue == 0) {
return;
}
pointArray = new ArrayList<Point>((int) samplesInQueue);
for (int i = 0; i < samplesInQueue; i++) {
// take a peek at the point without retrieving it from the point
// queue
point = Points.peek();
// check if first point of segment is the start of a page
if (i == 0) {
if (lastSegmentEndPoint != null) {
if (point.x < lastSegmentEndPoint.x) {
// yes then we will need to clear the screen now
isNewSegment = true;
}
} else {
// yes then we will need to clear the screen now
isNewSegment = true;
}
}
if (point != null) {
if (point.x > oldX) {
// put consecutive points in the path point array
point = Points.poll();
samplesInQueue--;
pointArray.add(point);
oldX = point.x;
} else {
// we have a wrap around, stop and indicate we need to clear
// the screen on the next pass
if (!isNewSegment) {
setToClear = true;
}
break;
}
}
}
// no points, return
if (pointArray.size() == 0) {
return;
}
// fill the path
for (int i = 0; i < pointArray.size(); i++) {
Point p = pointArray.get(i);
if (i == 0) {
if (lastSegmentEndPoint != null) {
if (p.x >= lastSegmentEndPoint.x) {
// if we have the end of the last segment, move to it
// and line to the new point
path.moveTo(lastSegmentEndPoint.x, lastSegmentEndPoint.y);
path.lineTo(p.x, p.y);
} else {
// otherwise just line to the new point
path.moveTo(p.x, p.y);
}
} else {
path.moveTo(p.x, p.y);
}
} else {
path.lineTo(p.x, p.y);
}
}
if (clear || isNewSegment) {
if (clear) {
clear = false;
}
// we need to clear, lock the whole canvas
canvas = holder.lockCanvas();
// draw the graph frame / scales
drawGraphFrame = true;
drawGraphFrame(canvas);
} else {
// just draw the path
RectF bounds = new RectF();
Rect dirty = new Rect();
// calculate path bounds
path.computeBounds(bounds, true);
int extra = 0;
dirty.left = (int) java.lang.Math.floor(bounds.left - extra);
dirty.top = (int) java.lang.Math.floor(bounds.top - extra);
dirty.right = (int) java.lang.Math.round(bounds.right + 0.5);
dirty.bottom = (int) java.lang.Math.round(bounds.bottom + 0.5);
// just lock what is needed to plot the path
canvas = holder.lockCanvas(dirty);
}
// draw the path
canvas.drawPath(path, linePaint);
// unlock the canvas
holder.unlockCanvasAndPost(canvas);
// remember last segment end point
lastSegmentEndPoint = pointArray.get(pointArray.size() - 1);
// set clear flag for next pass
if (setToClear) {
clear = true;
}
}
Draw frame / clear graph code
private void drawGraphFrame(Canvas canvas) {
if (!drawGraphFrame) {
return;
}
if (canvas == null) {
Log.e(TAG, "trying to draw on a null canvas");
return;
}
drawGraphFrame = false;
// clear the graph
canvas.drawColor(Color.BLACK, Mode.CLEAR);
// draw the graph frame
canvas.drawLine(leftMargin, topMargin, leftMargin, mCanvasHeight - bottomMargin, framePaint);
canvas.drawLine(leftMargin, mCanvasHeight - bottomMargin, mCanvasWidth - rightMargin, mCanvasHeight
- bottomMargin, framePaint);
// more drawing
}

Your problem is quite straight forward.. your only locking the new portion of the canvas that the new path covers. So the best thing to do is to make your path and dirty rect's private members of your class. Then at the start of your draw method get the path's current bounds (the old bounds) in your dirty rect. Now call path.rewind(); and start modifying your path. After do a union on the dirty rect with the new bounds. Now your dirty rect covers the old and new rect's. So your clear will remove the old path. This also reduces overhead because you don't want to be allocating 100+ objects per second for rect's and path's. Now since your drawing an oscilloscope then you probably want to adjust the old bounds to only be a portion of the width of the view. The same amount your new portion covers.
Hope that's cleared things up.

My simple answer is just using this function clear_holder() wherever you want to clear the canvas. I copy and paste 3 line for 3 times because it need 3 times clear to leave holder blank.
After clearing holder, you should draw any new thing you want!
This link give me this source code!
private void clear_holder(SurfaceHolder holder){
Canvas c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
c = holder.lockCanvas();
c.drawColor( 0, PorterDuff.Mode.CLEAR );
holder.unlockCanvasAndPost(c);
}

It looks like you are clearing the canvas so, it's not double buffering problem. I think it's related to your path been reused.
Try adding adding the next line when starting new page.
path.reset();

Battery consumption with custom animated drawable

Loooong time viewer, finally getting round to signing up here at StackOverflow!
After a very long time searching for a way to do a scrolling background of a ViewGroup in Android, I've developed the following:
public class SlidingDrawable extends Drawable implements Drawable.Callback {
private static final String TAG = "SlidingDraw";
private static float STEP_SIZE = 1.0f;
private BitmapDrawable mBitmap;
private Context mContext;
private float mPosX;
private int mBitmapWidth;
private Runnable mInvalidater;
private Handler mHandler;
public SlidingDrawable(Context c){
mContext = c;
// use this as the callback as we're implementing the interface
setCallback(this);
mHandler = new Handler();
mInvalidater = new Runnable(){
#Override
public void run(){
// decrement the drawables step size
mPosX -= SlidingDrawable.STEP_SIZE;
/*
* Check to see if the current position is at point where it should
* loop. If so, reset back to 0 to restart
*/
if(Math.abs(mPosX) >= mBitmapWidth) mPosX = 0;
// redraw
invalidateDrawable(null);
}
};
}
public static void setStepSize(float newSize){
SlidingDrawable.STEP_SIZE = newSize;
}
public void createBitmap(String path, ViewGroup parent){
// height of the parent container
int height = parent.getHeight();
/* Initialize local variables
* bgBitmap - the resulting bitmap to send into SlidingDrawable instance
* imageStream - raw bitmap data to be decoded into bgBitmap
*/
WindowManager wMgr = (WindowManager)mContext.getSystemService(Context.WINDOW_SERVICE);
int mScreenWidth = wMgr.getDefaultDisplay().getWidth();
InputStream imageStream;
Matrix imgMatrix = new Matrix();
Bitmap bitmap = null;
try {
imageStream = mContext.getAssets().open(path);
// create a temporary bitmap object for basic data
Bitmap temp = BitmapFactory.decodeStream(imageStream);
int width = temp.getWidth();
// find the width difference as a percentage to apply to the
// transformation matrix
float widthDifference = ((float)mScreenWidth) / (float)(width / 2);
imgMatrix.postScale(widthDifference, 0, 0f, 0f);
// create a copy of the bitmap, scaled correctly to maintain loop
bitmap = Bitmap.createScaledBitmap(temp, (int)(width * widthDifference), height, true);
// recycle the temp bitmap
temp.recycle();
} catch (IOException e) {
e.printStackTrace();
}
mBitmap = new BitmapDrawable(bitmap);
// required
mBitmapWidth = getIntrinsicWidth() / 2;
Rect bounds = new Rect(0, 0, getIntrinsicWidth(), getIntrinsicHeight());
setBounds(bounds);
}
#Override
public void draw(Canvas canvas) {
canvas.drawBitmap(mBitmap.getBitmap(), mPosX, 0f, null);
scheduleDrawable(this, mInvalidater, SystemClock.uptimeMillis());
}
#Override
public int getOpacity() {
return PixelFormat.OPAQUE;
}
#Override
public void scheduleDrawable(Drawable who, Runnable what, long when) {
mHandler.postAtTime(what, who, when);
}
#Override
public void unscheduleDrawable(Drawable who, Runnable what) {
mHandler.removeCallbacks(what, who);
}
#Override
public void invalidateDrawable(Drawable who) {
invalidateSelf();
}
/*
* Methods not directly used or called omitted
*
*/
}
It is used in the Activity like so:
#Override
public void onWindowFocusChanged(boolean focus){
// set the background of the root view of main.xml
SlidingDrawable drawable = new SlidingDrawable(getApplicationContext());
drawable.createBitmap("bgimg/basebg.jpg", mRoot);
mRoot.setBackgroundDrawable(drawable);
}
Long story short, the basebg.jpg image is a tileable image roughly 1600x480. The constructor for SlidingDrawable scales and moves and yaddah yaddah. It works.
Now, the problem is, it seems really inefficient to do it like this. I can't seem to find much information on this sort of implementation, so I'm in the dark on where I can cut CPU cycles, or even if I'm using the method calls correctly.
My questions include:
Is it better to drawBitmap as opposed to using setTranslate() or postTranslate and draw the bitmap using a Matrix?
Is it better to use drawBitmap, or the canvas functions such as translate(), save(), and restore()?
What rate does the draw() method get called at, and is there a way to limit it to, say, 24 FPS o limit redraws?
What the heck is the "when" parameter of these sorts of things? Passing in SystemClock.uptimeMillis() is the only one that worked, and trying to delay it by adding a " + 100" or something to fire every 100ms just made it stutter.
I've researched this as much as I can... I'm leaving it to StackOverflow now :)

After some time with the drawing board, I simplified the functions down. Essentially, it was sending an invalidate() call on every SystemClock.uptimeMillis(), doing one redraw for each step change.
So, I removed the Drawable.Callback interface and passed the invalidateSelf() call directly from the Handler, removing the intermediary interface methods, which didn't seem to do anything special anyway.
There was a slight difference in the CPU usage using
drawBitmap(Bitmap source, int X, int Y, Paint p) vs.
drawBitmap(Bitmap source, Matrix matrix, Paint p), so I opted for the latter to save cycles.
New methods are as follows:
// Runnable
mInvalidater = new Runnable(){
#Override
public void run(){
// decrement the drawables step size
mPosX -= SlidingDrawable.STEP_SIZE;
if(Math.abs(mPosX) >= mBitmapWidth){
mPosX = 0;
mImageMatrix.setTranslate(0, 0);
}
mImageMatrix.postTranslate(-STEP_SIZE, 0);
SlidingDrawable.this.invalidateSelf();
}
};
// Draw method
#Override
public void draw(Canvas canvas) {
canvas.drawBitmap(mBitmap.getBitmap(), mImageMatrix, null);
mHandler.postAtTime(mInvalidater, SystemClock.uptimeMillis() + 64);
}
I tested the battery results by unplugging the phone, running the application for around a minute, then opening the battery usage on my Moto Droid. Before, the battery usage surpassed the Display, now it sits comfortably below.
Angry Birds was also a benchmark, by running the opening screen (where the bg scrolls and the birds fly everywhere) for the same amount of time, in some cases my app sat below Angry Birds, but not always.
CPU usage was checked using the ADB shell command dumpsys cpuinfo as there seems to be a problem viewing CPU info on through the DDMS on devices running 2.2.
I'd still be up to hear other thoughts on this, but for now, it's solved.