layered images plus canvas

Question

I am trying to lay two picture on top of each other. Top one is transparent. On top of them I am trying to add a transparent canvas so the user can draw, type, whatever they need to do and the bottom two images are visible.

So I can get the two images to show up or just the canvas. Everytime I try to display the canvas it seems like it is on to[p of the two images covering them.

Here is what I have so far..

 public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);        
    setContentView(new MyView(this));

..... some code to set up the paint
}

private Paint       mPaint;
private MaskFilter  mEmboss;
private MaskFilter  mBlur;

public class MyView extends View {

        private static final float MINP = 0.25f;
        private static final float MAXP = 0.75f;

        private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mBitmapPaint;                

        public MyView(Context c) {
            super(c);                       

            // Creating a new relative layout add the definition again.       
            RelativeLayout relativeLayout = new RelativeLayout(TwoPicksOnEachOther.this);                   
            // Setting the orientation to vertical         
            ////relativeLayout.setOrientation(LinearLayout.VERTICAL);                   

            // Creating Fish  image       
            final ImageView iv = new ImageView(TwoPicksOnEachOther.this);         
            iv.setImageResource(R.drawable.fish2);
            // relative layout parameters
            RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(     
                    RelativeLayout.LayoutParams.FILL_PARENT, 
                    RelativeLayout.LayoutParams.FILL_PARENT);        
            //iv.setId(1);                          
            relativeLayout.addView(iv,lp);        

            // Creating transparent image with boat.
            final ImageView iv2 = new ImageView(TwoPicksOnEachOther.this);
            iv2.setImageResource(R.drawable.ctdeasytwo);
            //iv2.setId(2);
            RelativeLayout.LayoutParams lp2 = new RelativeLayout.LayoutParams(     
                    RelativeLayout.LayoutParams.FILL_PARENT, 
                    RelativeLayout.LayoutParams.FILL_PARENT);
            relativeLayout.addView(iv2,lp2);     

            mBitmap = Bitmap.createBitmap(480, 800, Bitmap.Config.ARGB_8888); 
            //mBitmap = BitmapFactory.decodeResource(getResources(),
            //        R.drawable.ctdeasytwo);                      
            mCanvas = new Canvas(mBitmap);
           // mCanvas.drawBitmap(mBitmap, 10, 10, null);
            mPath = new Path();
            mBitmapPaint = new Paint(Paint.DITHER_FLAG);

        }

        @Override
        protected void onDraw(Canvas canvas) {
            canvas.drawColor(Color.TRANSPARENT);

            canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);  

            canvas.drawPath(mPath, mPaint);
        }

................... More code to manage touch events.

Now I am suspecting that the canvas is not part of the relative layout. Could that be the problem? If yes, I can't do relativeLayout.addView(mCanvas,lp);

Any suggestions?

Answer 1

Sorry had to wait eight hours to answer my own question.

I was able to fix the problem. I created a class.

public class newClass extends View { 
public newClass (Context context){ super(context); } 
... 
@Override protected void onDraw(Canvas canvas) { 
canvas.drawColor(Color.TRANSPARENT); } 

Then all I had to do

final newClass myCanvas = new newClass (this); 

relativeLayout.addView(myCanvas,lp2); 

Works fine...

Answer 2

I managed to do something similar (paint on a transparent canvas with a background bitmap behind it) by doing the following (only parts of the code are shown):

public class MyView extends View {
    public MyView(Context c) {
        super(c);
        Bitmap tmpBitmap;

        // Create the background bitmap and convert it to a drawable object
        mBackBitmap = Bitmap.createBitmap(tmpBitmap, 0, 0, tmpBitmap.getWidth(), tmpBitmap.getHeight(), aMatrix, false);
        mBackBitmapDrawable = new BitmapDrawable(mBackBitmap);
        // Set the drawable object as the background
        setBackgroundDrawable(mBackBitmapDrawable);
        // Create an empty bitmap for the canvas
        mBitmap = Bitmap.createBitmap(tmpBitmap.getWidth(), tmpBitmap.getHeight(), Bitmap.Config.ARGB_8888);
        mCanvas = new Canvas(mBitmap);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        //Log.d("MyView", "onDraw");
        // Use transparent background
        canvas.drawColor(Color.TRANSPARENT);
        canvas.drawBitmap(mBitmap, 0, 0, mBitmapPaint);
        canvas.drawPath(mPath, mPaint);
    }
}

Hope it helps.

Answer 3

u can refer this Image in Canvas with touch events