Two layers, but can't show the bottom layer in android

Question

I am working on an Android project similar to a scratch card. I have two layers in RelativeLayout. Bottom layer contains an ImageView, and top layer contains a SurfaceView.

The problem is the display stays black and doesn't show the ImageView even if I set canvas.drawColor(Color.TRANSPARENT).

What should I do if I want to scratch and erase the part of SurfaceView and reveal the ImageView below?

Thanks in advance. And I am sorry for the bad English.

Here's my layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@drawable/background"
    android:padding="10dp"
    android:id="@+id/layoutama"
    >
    <RelativeLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
    >
        <ImageButton
            android:id="@+id/reset"
            android:src="@drawable/refresh_btn"
            android:background="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/logo"
            android:paddingTop="10dp"
            android:paddingRight="8dp"
        />

        <ImageButton
            android:id="@+id/back"
            android:src="@drawable/back_btn"
            android:background="@null"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@+id/reset"
            android:paddingTop="10dp"
        />

        <ImageView
            android:id="@+id/logo"
            android:src="@drawable/icon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
        />

    </RelativeLayout>

    <AbsoluteLayout
        android:id="@+id/absolayo"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
    >
        <RelativeLayout
            android:id="@+id/relatlayo"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
        >

            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:src="@drawable/image1"
                android:scaleType="fitXY"
            />

            <coba.ngegosok.MainGambar
                android:id="@+id/LayoDalam"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
            />

        </RelativeLayout>
    </AbsoluteLayout>
</LinearLayout>

Here's the SurfaceView code:

        protected void onDraw(Canvas canvas) {
        // fills the canvas with black
        canvas.drawColor(Color.TRANSPARENT);

        canvas.drawBitmap(eraseableBitmap, 0, 0, mBitmapPaint);
        canvas.drawPath(mPath, p);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        tw = w;
        th = h;
        mBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

    private void touch_start(float x, float y) {
        mX = x;
        mY = y;
        mPath.reset();
        mPath.moveTo(x, y);
    }

    private void touch_move(float x, float y) {
        float dx = Math.abs(x - mX);
        float dy = Math.abs(y - mY);
        if (dx >= TOUCH_TOLERANCE || dy >= TOUCH_TOLERANCE) {
            //mPath.quadTo(mX, mY, (x + mX)/2, (y + mY)/2);
            mX = x;
            mY = y;
        }
    }

    private void touch_up() {
        mPath.lineTo(mX, mY);
        mCanvas.drawPath(mPath, p);
        // kill this so we don't double draw
        mPath.reset();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        static_x = event.getX();
        static_y = event.getY();

        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            touch_start(static_x, static_y);
        } if (event.getAction() == MotionEvent.ACTION_MOVE) {
                touch_move(static_x, static_y);
        } if (event.getAction() == MotionEvent.ACTION_UP) {
                touch_up(); 
            }
        return true;
    }

Answer 1

You should not have the imageView behind the SurfaceView, since the SurfaceView is not drawn like regular Views are drawn. The surface is Z ordered so that it is behind the window holding its SurfaceView; the SurfaceView punches a hole in its window to allow its surface to be displayed.

In your case I would place the ImageView in front of the SurfaceView and use setVisibility(View.VISIBLE); when you want to show it.

Alternatively you can use myImageView.bringToFront(); to get it aligned on top of the SurfaceView.