How to combine canvas drawing with android activity layout which includes buttons and layouts?

Question

I am trying to build an app with buttons on its activity layout, but I want the score to be drawn on the same activity using

$canvas.drawText()

We use

$setContentView(R.id.activity)

for setting the content view of a layout, and use

$SurfaceView sv = new SurfaceView(this);
$setContentView(sv)

for drawing but how can we combine both in a same activity?

Answer 1

Since the score only needs to be redrawn occasionally, it seems that what you need is a custom view extending View class that will run on the main(UI) Thread. If you were animating, let's say a clock or some other animation which needs to be redrawn at constant time intervals or if the rendering takes too much time, then it would be better to extend SurfaceView together with another Thread, which would handle the animation times properly, without interruption of any other operations.

Let's see a basic example of a custom view that change its color each time the public changeColor() method is called:

public class CustomView extends View {

    ...

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        Random rand = new Random();
        canvas.drawRGB(rand.nextInt(256), rand.nextInt(256), rand.nextInt(256));
    }

    public void changeColor() {
       invalidate(); // redraws the view calling onDraw()
    }

}

To handle the view size properly you also need to override onSizeChanged(), onMeasure() or other callback methods depending of what you want. Now you can use it on the xml layout:

<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    <Button
        android:id="@+id/change_color"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Change Color" />
    <org.example.yourpackages.CustomView
        android:id="@+id/custom_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />    
</LinearLayout>

And you can use it from your activity the same way any other widget:

public class CustomViewActivity extends Activity implements OnClickListener {

    private CustomView customView;            
    private Button changeColorBtn;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
            setContentView(R.layout.custom_view_activity);

            customView = (CustomView)findViewById(R.id.custom_view);
            changeColorBtn = (Button)findViewById(R.id.change_color);
            changeColorBtn.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        customView.changeColor();
    }

}

For a better understanding of how this works:

• http://developer.android.com/training/custom-views/create-view.html
• http://blog.infrared5.com/2011/06/android-graphics-and-animation-part-i/
• http://blog.infrared5.com/2011/07/android-graphics-and-animation-part-ii-animation/