Custom view with a drawing thread prevents all views from displaying

Question

I have created a custom view class and attached a thread to it. Then, I added the view using xml layout file of the corresponding activity which also has another views in it such as a toolbar and a textview. However no view is displayed when adding the custom view; just the background with the default color. There are no errors. The thread is working fine and I can see the time difference for each frame from the debug log. However, I cannot see why any view is not being displayed. Thanks for your help...

The xml layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
    android:layout_height="match_parent"

    android:orientation="vertical"
    android:focusable="false">

    <android.support.v7.widget.Toolbar
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/toolbar"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light">
    </android.support.v7.widget.Toolbar>



    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
        android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
        android:paddingRight="@dimen/activity_horizontal_margin"
        android:paddingTop="@dimen/activity_vertical_margin"
        android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".HomeActivity"
        android:orientation="vertical"
        android:id="@+id/background"
        android:focusable="false"
        android:animateLayoutChanges="true">

        <com.puppetlabs.canvastutorial.MyCanvasView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:id="@+id/mycanvasview"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView" />

    </LinearLayout>

</LinearLayout>

The custom view class:

package com.mert.canvastutorial;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.util.AttributeSet;
import android.util.Log;
import android.view.SurfaceHolder;
import android.view.SurfaceView;

/**
 * Created by Pc on 19.6.2015.
 */
public class MyCanvasView extends SurfaceView implements SurfaceHolder.Callback{

    private MyCanvasThread thread;

    private void init() {
        getHolder().addCallback(this);
        Log.d("SURFACE_VIEW", "Initialized.");
        // create the game loop thread
        thread = new MyCanvasThread(getHolder(),this);
        // make the GamePanel focusable so it can handle events
        setFocusable(true);
    }
    public MyCanvasView(Context context) {
        super(context);
        init();
    }

    public MyCanvasView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();

    }

    public MyCanvasView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();

    }

    public void update(){

    }

    public void render(Canvas c){
        c.drawColor(Color.RED);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        //super.onDraw(canvas);
        //canvas.drawColor(Color.parseColor("#00dd00"));

    }


    @Override
    public void surfaceCreated(SurfaceHolder holder) {
        thread.setRunning(true);
        thread.start();
    }

    @Override
    public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {
        boolean retry = true;
        while (retry) {
            try {
                thread.join();
                retry = false;
            } catch (InterruptedException e) {}
        }
    }

    @Override
    public void surfaceDestroyed(SurfaceHolder holder) {

    }
}

and my corresponding thread class is:

package com.mert.canvastutorial;

import android.graphics.Canvas;
import android.util.Log;
import android.view.SurfaceHolder;

/**
 * Created by Pc on 19.6.2015.
 */
public class MyCanvasThread extends Thread {

    private final static int MAX_FPS = 30;
    private final static int MAX_FRAME_SKIPS = 5;

    private final static int FRAME_PERIOD = 1000/MAX_FPS;

    private SurfaceHolder surfaceHolder;
    private MyCanvasView myCanvasView;
    private boolean _run = false;

    public MyCanvasThread (SurfaceHolder surfaceHolder, MyCanvasView myCanvasView) {
        this.myCanvasView = myCanvasView;
        this.surfaceHolder = surfaceHolder;
        Log.d("THREAD","Initialized.");
    }

    public void setRunning (boolean _run) {
        this._run = _run;
    }

    @Override
    public void run() {
        //super.run();
        Canvas c;

        long beginTime;
        long timeDiff;
        int sleepTime;
        int framesSkipped;

        sleepTime = 0;

        while (_run) {
            c = null;

            try {
                c = surfaceHolder.lockCanvas(null);
                synchronized (surfaceHolder) {

                    beginTime = System.currentTimeMillis();
                    framesSkipped = 0;

                    myCanvasView.update();

                    myCanvasView.render(c);

                    timeDiff =  System.currentTimeMillis() - beginTime;
                    Log.d("TIME",String.valueOf(timeDiff));
                    sleepTime = (int) (FRAME_PERIOD - timeDiff);

                    if (sleepTime>0) {

                        try{
                            Thread.sleep(sleepTime);

                        } catch (InterruptedException e) {}
                    }

                    while (sleepTime < 0 && framesSkipped < MAX_FRAME_SKIPS) {
                        this.myCanvasView.update();

                        sleepTime += FRAME_PERIOD;
                        framesSkipped++;
                    }

                }
            } finally {
                if (c!= null) {
                    surfaceHolder.unlockCanvasAndPost(c);
                }
            }
        }
    }
}

I added the custom view to the activity from xml layout file:

Answer 1

A "custom View" is different from subclassing SurfaceView. The SurfaceView has two parts, the Surface and the View. If you're going to draw on the View part, you want to use a custom View, and there's no need to have a SurfaceView at all. (See Creating Custom Views for more about this approach.)

Since you're trying to draw on the Surface of a SurfaceView, you probably don't want to override onDraw(), and in fact you don't need to subclass SurfaceView at all. Best practice is to favor composition over inheritance.

The View part of the SurfaceView is intended to be a transparent rectangle that the layout code uses to leave a "hole" in the View layer. The SurfaceView Surface is on a separate layer that, by default, sits behind the View layer. If you set a background for the View or draw on it, you will obscure the Surface, and won't be able to see anything.

You can trivially determine whether this is the case by moving the SurfaceView on top, using setZOrderOnTop() in onCreate() (the call has no effect after the Surface has been created). If your Surface content suddenly appears when you do this, then your problem is that you have filled in the View part of the SurfaceView.

The "multi-surface test" activity in Grafika demonstrates animated Canvas rendering on multiple overlapping SurfaceViews.

FWIW, I would recommend looking at the SurfaceView lifecycle and game loop sections of the graphics architecture doc.