Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Android

Erasing part of bitmap shows black background instead of image

Hi guys, I'm trying to overlap 2 images on top of each other and when you touch the image on top, it should be made transparent on that touched radius, thus exposing the bottom image.

The problem I'm having is, the bitmap on top isn't transparent, or rather the canvas has a black background. Because when you touch the image on top, it reveals a black background instead of the image on the bottom.

Strange thing is, it works fine if the bitmap on top is a color and doesn't have a resource in it.

Here's my code:

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,
                WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(new DrawView(this));
    }

    public class DrawView extends View implements OnTouchListener {

        private int x = 0;
        private int y = 0;

        Bitmap bitmap;
        Bitmap bitmap2;
        Canvas bitmapCanvas;

        Drawable d;

        private final Paint paint = new Paint();
        private final Paint eraserPaint = new Paint();

        public DrawView(Context context) {
            super(context);
            setFocusable(true);
            setFocusableInTouchMode(true);

            this.setOnTouchListener(this);

            // Set background
            this.setBackgroundResource(R.drawable.pictureBottom);

            // Set bitmap
            bitmap = BitmapFactory.decodeResource(getResources(),R.drawable.pictureTop).copy(Bitmap.Config.ARGB_8888, true);

            // It works if you create a bitmap with a background color instead of a resource
            //bitmap = Bitmap.createBitmap(600, 900, Bitmap.Config.ARGB_8888);

            bitmapCanvas = new Canvas();
            bitmapCanvas.setBitmap(bitmap);
            bitmapCanvas.drawColor(Color.TRANSPARENT);

            // Set eraser paint properties
            eraserPaint.setColor(Color.TRANSPARENT);
            eraserPaint.setAlpha(0);
            eraserPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));
            eraserPaint.setAntiAlias(true);
        }

        @Override
        public void onDraw(Canvas canvas) {         
            canvas.drawColor(Color.TRANSPARENT);
            bitmapCanvas.drawColor(Color.TRANSPARENT);
            bitmapCanvas.drawCircle(x, y, 40, eraserPaint);

            canvas.drawBitmap(bitmap, 0, 0, paint);
        }

        public boolean onTouch(View view, MotionEvent event) {
            x = (int) event.getX();
            y = (int) event.getY();

            invalidate();
            return true;
        }

    }```

sorry i dont know the answer since im not learning android but your really beautiful and your legs are very beautiful. Though you could search it on google step by step like , how to overlap images > how to make transparent overlap images . Whatever is that you need to do , i did that in HTMl and CSS and after 8 hours i managed to do a little thing i wanted but i learned from it a lot even if it was a small part .