android use a View from a XML layout to draw a canvas

Question

So basically i want to use a xml layout, but i also want a canvas where i can have graphics performed. What i did was make a view in my xml layout as you can see below. Then in my application i made the view draw the canvas, but it is not working. I'm not sure if my method for solving this is completely wrong or what. So please just take a look at my code and tell me if you see a quick fix or if you have a better method. Thanks in advance I really appreciate it.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >

<Button
    android:id="@+id/bTest"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Button" />



<View
    android:id="@+id/vMain"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

</LinearLayout>

that is the xml layout

package sm.view.test;

import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Align;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.SurfaceHolder;
import android.view.SurfaceView;
import android.view.View;
import android.view.View.OnTouchListener;
import android.widget.Button;

public class ViewActivity extends Activity implements OnTouchListener {
/** Called when the activity is first created. */

View v;
Button b;
boolean isRun =true;
SurfaceHolder ourHolder;
Thread ourThread;
Canvas canvas;
boolean isTure = true;
TheSurface ourSurfaceView;


@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);
    b= (Button) findViewById(R.id.bTest);
    v = (View) findViewById(R.id.vMain);

    canvas = new Canvas();
    ourSurfaceView = new TheSurface(this);
    ourSurfaceView.setOnTouchListener(this);
    v.draw(canvas);
   // v.setBackgroundColor(Color.BLUE);
}
protected void onPause() {
    // TODO Auto-generated method stub
    super.onPause();
    ourSurfaceView.pause();
}

@Override
protected void onResume() {
    // TODO Auto-generated method stub
    super.onResume();
    ourSurfaceView.resume();
}






public boolean onTouch(View arg0, MotionEvent arg1) {
    // TODO Auto-generated method stub
    return false;
}
public class TheSurface extends SurfaceView implements Runnable{

    public TheSurface(Context context) {
        super(context);
        ourHolder= getHolder();

    }
    public void resume(){
        isRun= true;
        ourThread = new Thread(this);
        ourThread.start();  
    }
    public void pause(){
        isRun = false;
        while(true){
            try {
                ourThread.join();
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
            break;
        }
        ourThread= null;
    }

    public void run() {
        // TODO Auto-generated method stub

        Paint textPaint = new Paint();
        textPaint.setColor(Color.WHITE);
        while(isTure){
        if(!ourHolder.getSurface().isValid())
            continue;
        //v.draw(canvas);

         canvas = ourHolder.lockCanvas();
        canvas.drawLine(0, 0, canvas.getWidth(), canvas.getHeight(), textPaint);
        ourHolder.unlockCanvasAndPost(canvas);
        v.draw(canvas);
        }
    }

}

}

Solution

Start here (and this needs your input as well for the namespace portion "yourProjectNamespace"):

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent" 
    android:orientation="vertical" >  

    <Button android:id="@+id/bTest"
        android:layout_width="wrap_content"     
        android:layout_height="wrap_content"
        android:text="Button" />    

    <sm.view.test.TheSurface android:id="@+id/vMain"
        android:layout_width="wrap_content"     
        android:layout_height="wrap_content" />  

</LinearLayout> 

In your TheSurface

Implement the overideable routines:

public TheSurface(Context C){
    super(C);

    // Other setup code you want here
}

public TheSurface(Context C, AttributeSet attribs){
    super(C, attribs);

    // Other setup code you want here
}

public TheSurface(Context C, AttributeSet attribs, int defStyle){
    super(C, attribs, defStyle);

    // Other setup code you want here
}

protected void onDraw(Canvas canvas){
    super.onDraw(canvas);

    Paint textPaint = new Paint();
    textPaint.setColor(Color.WHITE);

    canvas.drawLine(0, 0, canvas.getWidth(), canvas.getHeight(), textPaint);

    // Other drawing functions here!!!
}

This should get your drawing done!!!

Also in my case, you dont have to implement this as a SurfaceView, you could just implement it as a View, and it does not need to implement runnable!!!