Draw over a TextView

Question

I have the following class code:

package com.example.tview;

import android.app.Activity;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Paint.Style;
import android.graphics.Path;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.view.*;


public class TestView extends Activity {
    float x = 0;
float y = 0;
LinearLayout layout;
 @Override
 public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.activity_test_view);
               layout=(LinearLayout)findViewById(R.id.viewd);
              layout.addView(new CustomView(TestView.this));
            }
 public class CustomView extends View {
     Bitmap mBitmap;
        Paint paint;
         Path path;
        public CustomView(Context context) {
            super(context);
       mBitmap = Bitmap.createBitmap(640, 1024, Bitmap.Config.ARGB_8888);
            paint = new Paint();
                    path= new Path();
            paint.setColor(Color.BLUE);
            //paint.setStyle(Style.FILL); //if I want to fill but I don't
            paint.setStyle(Style.STROKE);
            paint.setStrokeWidth(5);
        }

 protected void onDraw(Canvas canvas) {
     super.onDraw(canvas);
      canvas.drawPath(path,paint);
       canvas.drawCircle(x, y, 25, paint);
    }

 public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        switch (action){
 case MotionEvent.ACTION_DOWN:
     path.moveTo(event.getX(), event.getY());
     path.lineTo(event.getX(), event.getY());
      break;
    case MotionEvent.ACTION_MOVE:
        x = event.getX();
        y = event.getY();
        path.lineTo(x, y);
        invalidate();
      break;
    case MotionEvent.ACTION_UP:
        path.lineTo(event.getX(), event.getY());
      break;
    case MotionEvent.ACTION_CANCEL:
      break;
    default:
      break;}
        return true;
    }}
}

My XML file:

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

    <LinearLayout
        android:id="@+id/viewd"
        android:layout_width="250dp"
        android:layout_height="304dp"
        android:background="#FFFFFF"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="159dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="A"
            android:textSize="125dp" />
    </LinearLayout>

</LinearLayout>

What it's doing is getting the layout and allowing me to draw on top of it.

When I run the app, the following is displayed on my screen and I can draw on it:

When I view the XML layout in Eclipse, it shows me:

How do I keep the A display behind the drawing canvas? I am trying to allow user to trace over letters.

Answer 1

Try setting the background of the view to transparent in the constructor:

setBackgroundDrawable(new ColorDrawable(android.graphics.Color.TRANSPARENT));

As others said above you'll probably want to be using a framelayout too so that this view is on top of the textview. Personally I'd take the textview out of the xml, extend it and put the functionality of your view into it, then you just need to call super.onDraw after your own drawing methods.

I've quickly thrown this together, I've done it in notepad so it might need a bit of work:

public class TestView extends Activity {
    float x = 0;
    float y = 0;
    LinearLayout layout;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_test_view);
        layout=(LinearLayout)findViewById(R.id.viewd);
        layout.removeAllViews();
        CustomView view = new CustomView(TestView.this);
        view.setText("A");
        view.setLayoutParams(new LinearLayout.LayoutParams(
            250,
            340));
        layout.addView(view);
    }

    public class CustomView extends TextView {
        Bitmap mBitmap;
        Paint paint;
        Path path;

        public CustomView(Context context) {
            super(context);
            paint = new Paint();
            path= new Path();
            paint.setColor(Color.BLUE);
            paint.setStyle(Style.STROKE);
            paint.setStrokeWidth(5);
        }

        protected void onDraw(Canvas canvas) {
            canvas.drawPath(path,paint);
            canvas.drawCircle(x, y, 25, paint);
            super.onDraw(canvas);
        }

        public boolean onTouchEvent(MotionEvent event) {
            int action = event.getAction();
            switch (action) {
                case MotionEvent.ACTION_DOWN:
                    path.moveTo(event.getX(), event.getY());
                    path.lineTo(event.getX(), event.getY());
                    break;
                case MotionEvent.ACTION_MOVE:
                    x = event.getX();
                    y = event.getY();
                    path.lineTo(x, y);
                    invalidate();
                    break;
                case MotionEvent.ACTION_UP:
                    path.lineTo(event.getX(), event.getY());
                    break;
                case MotionEvent.ACTION_CANCEL:
                    break;
                default:
                    break;
            }
            return true;
        }
    }
}