I'm implementing my custom View where I override onDraw() method in order to draw some set of objects.
The objects are supposed to be placed in a coordinates which are evaluated in a particular way. The code placing those objects works incorrectly (some of them are either not drawn at all or are overlayed by other objects) so that I need to do some debugging to execute it line-by-line and watch what is actually being drawn step-by-step.
However as far as I understand the actual picture is shown on the screen after all the drawing is completed since when I'm executing canvas.drawBitmap line nothing is appearing on my emulator's screen.
My question is: What is the best (or maybe the only) way to debug onDraw() code? I did some research in Adroid dev portal and here in posted questions but was unable to find the solution.
Haven't tried this, but it should put you on the right track:
At the start of your onDraw method, make a new Bitmap using the width and height from the canvas
Make a new Canvas from the Bitmap
Run your draw calls on this Canvas
You can inspect the Bitmap from the Android Studio debugger, and will update with every draw call
If you also want to draw the data to the screen, you can use drawBitmap on the original Canvas with your full Bitmap, but this shouldn't be needed for debugging
Don't leave this in production code
#Override
public void onDraw(Canvas canvas) {
Bitmap screenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
Canvas screenCanvas = new Canvas(screenBitmap);
/* Run draw calls on screenCanvas, inspect screenBitmap for result*/
}
I'm not an expert, but I know graphics acceleration in nowadays Android is quite complex: drawing commands are recorded in drawing lists, which are then optimized and handled to the GPU to be drawn. And, since Android 5.0, part of the drawing that needs to be handled in the CPU can (is always?) run in a background thread. See https://source.android.com/devices/graphics/ for general background.
Then, about the tools, I would suggest using systrace. For more information and a detailed example on how to use it and more tools, see the excellent (albeit probably a bit outdated) article by Romain Guy "Android Performance Case Study" and the follow-up "Android Performance Case Study Follow-up".
Also, see Android documentation "Perfect GPU Use".
Hope this sets you in the right path. This is a very complex subject.
You can try commenting the suspicious statements.
Another option would be to use a timer - Frequently invalidate the view from a different thread and inside onDraw run different statements only if some time has elapsed. Use different time for different statements, so that it looks like an animation.
Related
Use case:
I need to draw hundred lines and a few pieces of text on my view. I need to give a scrolling effect, for which I capture the ACTION_MOVE event and redraw all the lines with the updated points. To get the desire result I tried with different approaches but none works as intended.
Approach 1
I made a custom class which extends View. All the drawing and calculation is done directly in my onDraw() method. Since there is so much of operation done in onDraw() method, the performance of the app is very poor. I even checked the performance using Profile GPU rendering and I can see the lines are very tall.
Approach 2
I created a Bitmap and after drawing all the lines onto my bitmap in another thread, I used postInvalidate() to draw the bitmap in onDraw() method:
mBufferedBitmap = Bitmap.createBitmap(getWidth(), getHeight(), Bitmap.Config.ARGB_8888);
mBufferedBitmap.eraseColor(Color.TRANSPARENT);
Canvas mBufferedCanvas = new Canvas(mBufferedBitmap);
drawLines(mBufferedCanvas)
postInvalidate();
Since I erase all the previous drawing on the bitmap and draw new lines with updated points, there is a flickering on the screen.
Approach 3
I tried extending my custom class to SurfaceView and performing all the operations on canvas object in another thread. But since SurfaceView uses CPU for drawing operations, the performance will be poor in low configuration mobiles.
Can anyone guide me how to achieve this task with better performance?
It is possible to use your approach 1 to achieve good performance.
An example that sounds close to your use case (drawing lines, a little text and having these update on gesture movement) is MPAndroidChart. This is an open source library that achieves high performance (see the following comparison if you want stats)
The classes to examine are the Renderer classes as these contain code draw in the onDraw(Canvas c) of the chart subtypes. You can see some of the tricks used to achieve high performance there:
Don't allocate in a render loop. Instead, allocate outside the loop and reuse/recycle variables. See LineChartRenderer line 199
Use buffering. For example, in MPAndroidChart, the points for the four corners of the bars in the bar chart are buffered and the buffer array is reused. See the BarBuffer class.
Use the native Canvas drawing functions (drawPath, drawLine etc.)
A complete list of tips for optimising rendering can be found in the Android Performance Slow Rendering Guide
Approach 2 is the best one. If you see flickering, it means that the bitmap is drawn to screen after you erase it and before you draw all the lines. If this is the case use another bitmap and do double buffering:
ScreenBitmap is what is drawn to screen
OffScreenBitmap is used for drawing in background.
Draw all your lines and text to OffScreenBitmap, and once finished, copy it to ScreenBitmap.
in onDraw, draw the ScreenBitmap.
Create these bitmaps once (typically in onSizeChanged), so that there is no alloocation in onDraw
Under delphi (and under firemonkey/android), What is the most fastest way to draw on a Tcanvas a TbitmapSurface ?
I try to use TTexture like MyTexture.Assign(aBitmapSurface) and later do TCustomCanvasGpu(Canvas).DrawTexture but MyTexture.Assign(aBitmapSurface) have 2 main drawbacks :
it's must be done inside the main thread (i don't know why else we have black screen)
it's relatively slow operation
I do not use/code for Android so read with extreme prejudice. As Delphi uses VCL so I stick to it. If Delphi under Android does not then you can ignore this answer.
It looks like it is similar problem to Windows when accessing any OS visual stuff (does not matter if by GDI or WinAPI) from outside main thread will invalidate the OS API making weird things latter like random crashes, wrong rendering, etc. Another reason can be the use of GPU related calls which are usually bound to process/thread and device context. So to make it thread safe you could have to create shared context if possible if not you need to stick to main thread.
By Assign you are creating new image and copy the old to it that takes time comparable to drawing itself not to mention on devices with slow memory it can really slow down the whole thing considerably a lot more.
If you are dealing with VCL graphic components then try to use Draw directly:
blablabla->Canvas->Draw(x,y,aBitmapSurface);
if blablabla and aBitmapSurface are valid gfx components then it should work. As I mentioned not sure if this is present also in Android. The x,y is the position where you want to draw the aBitmapSurface. There is also StretchDraw if you need to rescale but that is a bit slower.
See Display an array of color in C sections GDI and GDI Bitmap for some ideas under VCL
TBitmapSurface is in system memory so you need to assign your TBitmapSurface to a TBitmap first, to be converted to native OS bitmap (or texture) format that FMX uses for drawing:
bmp.Assign(surf);
Then draw the Bitmap to the canvas:
canvas.BeginScene();
canvas.DrawBitmap(bmp, SrcRect, DstRect, AOpacity);
canvas.EndScene();
I have tested it on Windows and Android. On android you need to call the Repaint too see the change.
im new to this android things. And i have to develop an application that can help an autism to learn numbers. I have a few ideas and I've been trying to learn and implement the code. But it's failed. The question is how can i apply the motion code or sprite to draw a numbers or letter? For example like this, i wanna make the penguin move through the line and draw a number nine.
There is example from mybringback.com which is the image move to draw a rectangle. How can i implement it to draw a number? Im sorry if i asking too much, i just trying to get some ideas.
I think that you should first build an utility program, in order to create the "path vector".
What I mean by path vector is simply a vector of Points (where a point has x value, and y value). And your utility should let you draw whatever you want, with a simple pen. You should draw on surface and store points when mouse is down, and ignore points when mouse is up.
Then, in the main program, you will just have to read at the path of your number/letter.
I've tried to implement something like this for the Sugar OLPC platform, without serializing path into files : I was able to draw, and to view the animation. And I used the process I've just described you.
Hope it can help you.
P.S : I used the word mouse, but you guessed that I talk about finger ...
There are various ways to achieve animation effects. One approach that is quite versatile involves creating a custom View or SurfaceView in which you Override the onDraw method. Various tutorials can be found on this; the official Android discussion of it is here:
http://developer.android.com/guide/topics/graphics/2d-graphics.html#on-view
Your implementation will look something like this:
// Find elapsed time since previous draw
// Compute new position of drawable/bitmap along figure
// Draw bitmap in appropriate location
// Add line to buffer containing segments of curve drawn so far
// Render all segments in curve buffer
// Take some action to call for the rendering of the next frame (this may be done in another thread)
Obviously a simplification. For a very simplistic tutorial, see here:
http://www.techrepublic.com/blog/software-engineer/bouncing-a-ball-on-androids-canvas/1733/
Note that different implementations of this technique will require different levels of involvement by you; for example, if you use a SurfaceView, you are in charge of calling the onDraw method, whereas subclassing the normal View lets you leave Android in charge of redrawing (at the expense of limiting your ability to draw on a different thread). In this respect, Google remains your friend =]
I'm trying to incrementally draw a waveform on a canvas in a separate thread, i.e. in each loop of the thread draw only the portion recently acquired by the hardware without redrawing the whole curve.
I am not sure if I can rely on the canvas' contents retained between SurfaceHolder.unlockCanvasAndPost and SurfaceHolder.lockCanvas.
The documentation seems to be a bit ambiguous on that and my experiments give surprising results: the "old" contents is different for the canvas returned in two subsequent loops of the drawing thread. It looks as if two canvases were used alternately (but I checked - it is the same canvas but with different contents).
The simplest way which I found to reproduce this behaviour:
Import the LunarLander sample applicaton.
In the LunarView.run method insert sleep(500) instruction in the loop.
In the LunarView.doDraw method comment out the line:
canvas.drawBitmap(mBackgroundImage, 0, 0, null);, which erases the old contents.
Run the game and let the ship crash. You will see the intermediate positions of the ship but they will blink: odd and even positions will be shown alternately.
So, my question is: can we draw pictures adding changes only to the contents which has been drawn before and if so - is there any documented way of dealing with the strange behaviour described above?
The lunar landing does not cache.
It draws the background image each time (refreshing) and then draws the spaceship.
private void doDraw(Canvas canvas) {
// Draw the background image. Operations on the Canvas accumulate
// so this is like clearing the screen.
canvas.drawBitmap(mBackgroundImage, 0, 0, null);
Check your If clauses closesly. Maybe one is alternating true and false. This would cause things to draw and then not draw, in rapid succession.
Use Log if need be to output your booleans, to see if one is changing.
Failing this, this the following gaming loop instead.
http://blorb.tumblr.com/post/236799414/simple-java-android-game-loop
I am following the below tutorial:
http://www3.ntu.edu.sg/home/ehchua/programming/android/Android_2D.html
In it,
Canvas canvas.drawOval();
is called in order to have a default circle drawn, that bounces around. My normal way of learning a new graphics framework is to build on this, and then upgrade to images. Normally, this is very simple, but I"m having trouble here. There is no equivalent "drawImage" to the drawOval command (which I'm more used to).
Instead, I'm trying to figure out "drawables".
So, following another tutorial (specifically the default Android "snake" game), I tried doing:
Resources r = this.getContext().getResources();
in my view, then passed the resource object to my ball object, to get:
img = r.getDrawable(R.drawable.ball);
where ball is a file stored in /res/drawable/ball.png
In the ball objects draw method (which I call in the view's onDraw method), I have:
img.draw(canvas);
canvas is passed from onDraw, which is itself passed a canvas. I don't really understand who is calling onDraw (I assume some internal process), but this differs from the snake example where they make their own canvas?
Either way, this doesn't seem to work. I am not getting any image, or any errors. I know that img is at least populated (its not null or anything), but other than that I don't really know what to do...
If this were Ruby (my most familiar language), I'd call inspect on the img to see if actually has anything in it...is there an equivalent for Java (or should I fool around with break points)?
Is there anything obvious that I'm doing wrong? Can I not use the default canvas I'm being passed, even though I clearly can for drawing simple shapes?
Ah, I figured it out:
With the draw oval method, I needed to set the bounds like so:
RectF bounds.set(ballX-ballRadius, ballY-ballRadius, ballX+ballRadius, ballY+ballRadius);
But for the drawable object, I have to go one step further and say
img.setBounds(bounds);
and make bounds be a Rect instead of a RectF.
Once that is done, voila, things are rendering.
It didn't occur to me at first that the bounds are how things know where to render themselves, and while you pass the bounds to an oval, you have to SET them to a drawable.