Develop Reference

Android SurfaceView with drawBitmap(Matrix) leaves blinking ghost image

To preface, I'm probably going to work with Views instead of SurfaceView given this weird interaction, but my curiosity is getting the better of me and I want to know what's going on.
So I have a matrix class variable. I run matrix.setTranslate() once, and every other frame I say matrix.setTranslate(). After this I call canvas.drawBitmap(, matrix, null). After 100 frames, I stop drawing the bitmap.
Here's the code:
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// matrix = new Matrix(); //Doesn't matter if I add this.
// matrix.reset(); //This doesn't matter either.
if (!once) {
matrix.setTranslate(100, 100);
} else {
matrix.setTranslate(800,800);
}
once = true;
if (++timer < 100) {
canvas.drawBitmap(ball, matrix, null);
}
}
What I expect to happen: Three possibilities.
Only the bottom right bitmap is visible since the entire screen was invalidated
Both bitmaps are visible because SurfaceView was smart with the dirty rectangle
Nothing is shown because nothing was drawn.
What actually happens: The top left bitmap blinks, bottom right bitmap displays solidly.
I'm pretty sure I have all of my bases covered:
All class variables are properly set in the constructor.
SurfaceView.onDraw() is called every 33 millis in its own thread.
Thread calls lockCanvas, then onDraw, then unlockCanvasAndPost
So, what's going on here? And bonus question, do these ghost images consume any extra resources and how can I clear them?
Rest of the code, mostly boilerplate:
public class FullscreenActivity extends Activity {
GameSurface ball;
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ball = new GameSurface(this);
setContentView(ball);
}
}
class GameSurface extends SurfaceView implements SurfaceHolder.Callback {
GameThread thread;
boolean once = false;
Bitmap ball;
Matrix matrix;
int timer = 0;
public GameSurface(Context context) {
super(context);
ball = BitmapFactory.decodeResource(getResources(),R.drawable.football);
matrix = new Matrix();
getHolder().addCallback(this);
setFocusable(true);
}
#Override
public void onDraw(Canvas canvas) {
super.onDraw(canvas);
// matrix = new Matrix(); //Doesn't matter if I add this.
// matrix.reset(); //This doesn't matter either.
if (!once) {
matrix.setTranslate(100, 100);
} else {
matrix.setTranslate(800,800);
}
//matrix.postRotate(timer); //For even more weirdness...
once = true;
if (++timer < 100) {
canvas.drawBitmap(ball, matrix, null);
}
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
}
#Override
public void surfaceCreated(SurfaceHolder holder) {
thread = new GameThread(getHolder(), this);
thread.setRunning(true);
thread.start();
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {
}
class GameThread extends Thread {
private SurfaceHolder surfaceHolder;
private GameSurface gameView;
private boolean run = false;
public GameThread(SurfaceHolder surfaceHolder, GameSurface gameView) {
this.surfaceHolder = surfaceHolder;
this.gameView = gameView;
}
public void setRunning(boolean run) {
this.run = run;
}
#Override
public void run() {
Canvas c;
while (run) {
c = null;
try {
Thread.sleep(33);
}
catch(InterruptedException e) {}
try {
c = surfaceHolder.lockCanvas();
synchronized (surfaceHolder) {
gameView.onDraw(c);
}
} finally {
if (c != null) {
surfaceHolder.unlockCanvasAndPost(c);
}
}
}
}
}
}

Multi-threading in the same Canvas

Well, I'll try to explain exactly what I pretend:
I want to draw a bitmap in a canvas in random positions according to the coordinates of the screen on touch, and I want a message(text) to be displayed everytime the user touches the screen.
So, if a draw the text in the same thread than I do for the bitmap, it will appear and dissapear right after, and I want it to stay in the screen for a few seconds and the dissapear. My first idea was to use Thread.sleep(), but for that I have to create a thread only for the text, or I will mess with the Bitmap too.
I've been trying to use multithreading in the same canvas, but I don't know how. Can someone please explain to me...
That's some of the code i've got so far:
private void init() {
// CREATE SURFACEHOLDER AND ADD THIS CLASS AS HIS CALLBACK
enemyHolder = getHolder();
enemyHolder.addCallback(this);
scoreHolder = getHolder();
scoreHolder.addCallback(this);
hasSurface = false;
}
public void resume() {
if (surfaceViewThread == null) {
surfaceViewThread = new SurfaceViewThread(); // CREATE A NEW
// THREAD
if (hasSurface)
surfaceViewThread.start(); // START OUR THREAD
}
if (secondThread == null) {
secondThread = new SecondThread();
if (hasSurface)
secondThread.start();
}
}
public void surfaceCreated(SurfaceHolder holder) {
hasSurface = true;
if (surfaceViewThread != null)
surfaceViewThread.start();
if (scoreShow == 1) {
if (secondThread != null)
secondThread.start();
}
}
// THREAD
private final class SurfaceViewThread extends Thread {
private boolean done;
SurfaceViewThread() {
super();
done = false;
}
#Override
public void run() {
// TODO Auto-generated method stub
super.run();
SurfaceHolder surfaceHolder = enemyHolder;
while (!done) {
Canvas canvas = surfaceHolder.lockCanvas();
canvas.drawColor(Color.WHITE);
canvas.drawBitmap(enemy1, enemy1X, enemy1Y, null); // DRAW
// FIRST
// ENEMY
// SECOND THREAD
private final class SecondThread extends Thread {
private boolean done;
SecondThread() {
super();
done = false;
}
#Override
public void run() {
// TODO Auto-generated method stub
super.run();
SurfaceHolder surfaceHolder = scoreHolder;
while (!done) {
Canvas canvas = surfaceHolder.lockCanvas();
Paint paint = new Paint();
paint.setColor(Color.BLACK);
canvas.drawText("xD", 50, 50, paint);
surfaceHolder.unlockCanvasAndPost(canvas);
try {
Thread.sleep(1000);
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
scoreShow = 0;
}
}

Do you need to use a SurfaceView? It seems like a hard work way of doing things.
I've just done something similar by creating a custom view class and overriding the onDraw method. Then use canvas.save() and canvas.restore(). Here's the relevant bits of my onDraw.
#Override
public void onDraw(Canvas canvas) {
canvas.save();
// scale the canvas
canvas.scale(scaleFactor, scaleFactor); //, mid.x, mid.y);
// and translate...
canvas.translate(translateX / scaleFactor, translateY / scaleFactor);
super.onDraw(canvas);
// draw the lights
for(Light light:lights){
if (light.isOn){
canvas.drawCircle(light.getX(),light.getY(), light.getDiameter() / scaleFactor,light.paint);
}
}
canvas.restore();
}
The lights are turned on and off by a separate thread back in the activity which has inflated the view. They stay on screen as long as they are on.
Cheers

Here's some incomplete pseudo code to do what you've described. There are plenty of good examples around for each of these elements to help you fill in the blanks.
public class MyCustomView extends View {
int touchPointX;
int touchPointY;
private String mText;
public MyCustomView(Context context) {
// do initialisation stuff
}
public setText(String text){
mText = text;
this.invalidate();
}
#Override
public void onDraw(Canvas canvas) {
canvas.save();
super.onDraw(canvas);
canvas.drawBitmap(touchPointX, touchPointY, bitmap)
if (!mText.equals(""){
canvas.drawText(touchPointX, touchPointY + 10, mText)
}
canvas.restore();
}
}
public class MyActivity extends Activity implements OnTouchListener{
private Handler mHandler = new Handler();
private MyCustomView mCustomView;
#Override
protected void onCreate(Bundle savedInstanceState) {
mCustomView = (MyCustomView) findViewById(r.id.myCustomView);
}
#Override
public boolean onTouch(View v, MotionEvent rawEvent) {
// get x and y of touch
mCustomview.touchPointX = x;
mCustomview.touchPointY = y;
mCustomView.setText("Screen touched");
// clear the text after 5 seconds
mHandler.postDelayed(clearText, 5000);
// redraw the view
mCustomView.invalidate();
}
private void clearText(){mCustomView.setText("");}
}

Android Changing Colors with Thread

I am a bit frustrated as to how to do this.., Can anyone please help me or guide me in the right direction?, with the code below. I just need to make a circle change colors in 2 second intervals, and i cant find anything out there.. basically if I could understand the following it would be enough
1.I have a class call DrawCircle that Exatends View
2.I have the Activity program where I instantiate the DrawCircle Class.
Questions:
1 - Where Do I create the Thread? in Activity or in the DrawCircle class?, and if I do, what should i put in the run();
2 - Where would I put the "Thread.sleep(2000)"? 3. and Finally, what do i need to make sure I have in the DrawCircle class and what should I make sure I have in the Activity or main program?
I just need to make a circle change colors in intervals of 2 seconds
Thank you very much for all the help ( I have spent 12 hours already trying to make this work and maybe I just shouldnt do it anymore)
Here is the code
public class ColorChanges extends Activity {
DrawCircle dc;
Paint pa = new Paint();
#Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//this line does not work
dc = new DrawCircle(this,pa);
dc.setBackgroundColor(Color.WHITE);
drawCircleToCanvas();
setContentView(dc);
}
void drawCircleToCanvas()
{
final Handler handler = new Handler()
{
public void handleMessage(Message msg) {
pa.setColor(Color.BLUE);
dc.setBackgroundColor(Color.RED);
dc.postInvalidate();
}
};
Thread updateUI = new Thread()
{
public void run() {
try {
for (int i=0;i<20;i++){
Thread.sleep(2000);
handler.sendMessage(handler.obtainMessage());
}
} catch (InterruptedException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
};
updateUI.start();
}
}
That is the Activity and here is my Class
public class DrawCircle extends View {
Paint p1 = new Paint();
Paint p2 = new Paint();
Paint p3 = new Paint();
Paint pAll[] = new Paint[3];
public DrawCircle(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
public DrawCircle(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
// TODO Auto-generated constructor stub
}
public DrawCircle(Context context, Paint p) {
super(context);
p1 = p;
p1.setStyle(Paint.Style.STROKE);
p1.setColor(Color.GREEN);
p1.setStyle(Paint.Style.FILL);
// TODO Auto-generated constructor stub
}
#Override
public void onDraw(Canvas canvas)
{
canvas.drawCircle(200, 200, 100, p1);
}
}

Do it in the UI thread. Instead of Thread.sleep, use Handler.postDelayed() with a two-second delay.

Initializing SurfaceView with a Drawable

I'd like to open up a SurfaceView with a icon placed in the center of the screen when an application is first started. I'm evoking icon creation using an implementation of SurfaceHolder.Callback to track when the 'Canvas' object is ready. My question is is there a better way? Are there less cumbersome methods of starting a SurfaceView with some Drawables loaded on creation without having to resort to placing draw logic within a callback object?
Here's my code for reference. First the object which does drawing:
public class CanvasDraw{
protected final SurfaceHolder mHolder;
protected final Drawable mDrawable;
public interface DrawLogic{
void draw(Rect _surface);
}
public CanvasDraw(SurfaceView _view, Drawable _drawable){
mHolder = _view.getHolder();
mDrawable = _drawable;
}
public void draw(DrawLogic _logic){
Canvas canvas = null;
try{
canvas = mHolder.lockCanvas();
if( canvas != null ){
Log.i("DRAWABLE", "Drawing " + mDrawable.toString());
_logic.draw( mHolder.getSurfaceFrame() );
mDrawable.draw(canvas);
}
else{
Log.i("DRAWABLE", "Canvas null valued");
}
}
finally{
if( canvas != null ){
mHolder.unlockCanvasAndPost(canvas);
}
}
}
}
and then my private callback object:
private class DrawOnceCallback implements SurfaceHolder.Callback {
private final SurfaceHolder mHolder;
public DrawOnceCallback(SurfaceHolder _holder ){
mHolder = _holder;
mHolder.addCallback(this);
}
#Override
public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {}
#Override
public void surfaceCreated(SurfaceHolder holder) {
Log.i("SURFACEHOLDER","Surface created. Canvas available.");
mDrawTiles.draw( new CanvasDraw.DrawLogic(){
#Override
public void draw(Rect _surface) {
mTiles.setBounds(
_surface.centerX() - mDrawWidth/2,
_surface.centerY() - mDrawHeight/2,
_surface.centerX() + mDrawHeight/2,
_surface.centerY() + mDrawHeight/2);
}
});
mHolder.removeCallback(this);
}
#Override
public void surfaceDestroyed(SurfaceHolder holder) {Log.i("SURFACEHOLDER","Surface destroyed.");}
}

I did something like this simply by assigning the image I wanted to a view in the layout XML file. If you've got to wait until your canvas and all that is ready anyways why not just use a default property? My opening splash screen was just a view with
android:background="#drawable/splash"
added to its layout.

How to draw an overlay on a SurfaceView used by Camera on Android?

I have a simple program that draws the preview of the Camera into a SurfaceView. What I'm trying to do is using the onPreviewFrame method, which is invoked each time a new frame is drawn into the SurfaceView, in order to execute the invalidate method which is supposed to invoke the onDraw method. In fact, the onDraw method is being invoked, but nothing there is being printed (I guess the camera preview is overwriting the text I'm trying to draw).
This is a simplify version of the SurfaceView subclass I have:
public class Superficie extends SurfaceView implements SurfaceHolder.Callback {
SurfaceHolder mHolder;
public Camera camera;
Superficie(Context context) {
super(context);
mHolder = getHolder();
mHolder.addCallback(this);
mHolder.setType(SurfaceHolder.SURFACE_TYPE_PUSH_BUFFERS);
}
public void surfaceCreated(final SurfaceHolder holder) {
camera = Camera.open();
try {
camera.setPreviewDisplay(holder);
camera.setPreviewCallback(new PreviewCallback() {
public void onPreviewFrame(byte[] data, Camera arg1) {
invalidar();
}
});
} catch (IOException e) {}
}
public void invalidar(){
invalidate();
}
public void surfaceChanged(SurfaceHolder holder, int format, int w, int h) {
Camera.Parameters parameters = camera.getParameters();
parameters.setPreviewSize(w, h);
camera.setParameters(parameters);
camera.startPreview();
}
#Override
public void draw(Canvas canvas) {
super.draw(canvas);
// nothing gets drawn :(
Paint p = new Paint(Color.RED);
canvas.drawText("PREVIEW", canvas.getWidth() / 2,
canvas.getHeight() / 2, p);
}
}

SurfaceView probably does not work like a regular View in this regard.
Instead, do the following:
Put your SurfaceView inside of a
FrameLayout or RelativeLayout in
your layout XML file, since both of
those allow stacking of widgets on
the Z-axis
Move your drawing logic
into a separate custom View class
Add an instance of the custom View
class to the layout XML file as a
child of the FrameLayout or
RelativeLayout, but have it appear
after the SurfaceView
This will cause your custom View class to appear to float above the SurfaceView.

Try calling setWillNotDraw(false) from surfaceCreated:
public void surfaceCreated(SurfaceHolder holder) {
try {
setWillNotDraw(false);
mycam.setPreviewDisplay(holder);
mycam.startPreview();
} catch (Exception e) {
e.printStackTrace();
Log.d(TAG,"Surface not created");
}
}
#Override
protected void onDraw(Canvas canvas) {
canvas.drawRect(area, rectanglePaint);
Log.w(this.getClass().getName(), "On Draw Called");
}
and calling invalidate from onTouchEvent:
public boolean onTouch(View v, MotionEvent event) {
invalidate();
return true;
}

I think you should call the super.draw() method first before you do anything in surfaceView's draw method.