Android Scratch card app
Asked Answered
A

1

1

I am doing a small project for college and wondering if someone can tell me how I would go about doing a scratch card app. This app should have one image overlaying another. The one on top should allow the user to remove the image depending on where they rub on the image and thus part of the image that was removed revealing the image underneath. Pretty much like a scratch card. Any help would be great!

This is the code im using at the moment .

            public class workinggraphics extends Activity 
 {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) 
{
    super.onCreate(savedInstanceState);
    //setContentView(R.layout.main);
    setContentView(new Panel(this));

    LinearLayout l1 = (LinearLayout) findViewById(R.id.LAYOUTTEST1);
    Panel p1 = new Panel(null);
}

    class Panel extends View{

        private Bitmap  mBitmap;
        private Canvas  mCanvas;
        private Path    mPath;
        private Paint   mPaint;
    //  private Paint nPaint;
        Bitmap bitmap;
        Canvas pcanvas ;
        int x = 0;
        int y =0;
        int r =0;
        public Panel(Context context) {
            super(context);

            Log.v("Panel", "STROKE");

            setFocusable(true);
            setBackgroundColor(Color.TRANSPARENT);
        /*  
            WallpaperManager wallpaperManager = WallpaperManager.getInstance(context);
            //WallpaperDrawable wallpaperDrawable=wallpaperManager.getDrawable();
            try {
                wallpaperManager.setBitmap(bmp);
            } catch (IOException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }*/
            //setBackgroundDrawable(bmp);
            // setting paint 
        /*  nPaint = new Paint();
            nPaint.setStyle(Paint.Style.FILL);*/

            mPaint = new Paint();
            mPaint.setAlpha(0);
            mPaint.setStyle(Paint.Style.FILL_AND_STROKE);
            mPaint.setStrokeCap(Paint.Cap.BUTT);
            mPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));//.Mode.DST_IN));
            mPaint.setAntiAlias(false);

            // getting image from resources
            Resources r = this.getContext().getResources();

            Bitmap bm = BitmapFactory.decodeResource(getResources(),  R.drawable.mainscreen_background);
            Bitmap bm1 = BitmapFactory.decodeResource(getResources(),R.drawable.foreground_image);
            // converting image bitmap into mutable bitmap
            bitmap =  bm.createBitmap(bm.getWidth(), bm.getHeight(), Config.ARGB_8888);
            //bitmap = bm1.createBitmap(bm1.getWidth(),bm1.getHeight(),Config.ARGB_8888);
            pcanvas = new Canvas();
            pcanvas.setBitmap(bitmap);                   // drawXY will result on that Bitmap
            pcanvas.drawBitmap(bm, 0, 0, null);
            pcanvas.drawBitmap(bm1,0,0,null);


        }

        @Override
        protected void onDraw(Canvas canvas) {


            Rect cBK = new Rect();
            //canvas.set
            cBK.set(0,0,canvas.getWidth(),canvas.getHeight());

            //pcanvas.drawRect(cBK, nPaint);
            // draw a circle that is  erasing bitmap            
            pcanvas.drawCircle(x, y, r, mPaint);
            //pcanvas.drawLine(x, y, 0, 0, mPaint);

            canvas.drawBitmap(bitmap, 0, 0,null);

            super.onDraw(canvas);

        }



        @Override
        public boolean onTouchEvent(MotionEvent event) {

            // set paramete to draw circle on touch event
            x = (int) event.getX();
            y = (int) event.getY();

            r =20;
            // Atlast invalidate canvas
            invalidate();
            return true;
        }
    }
}

Now as you can see above there is a lot of comments for things we have tried. Ideally I would like to be able to create an instance of the Panel class, set the workinggraphics class contextview to a XML LinearLayout (OR SurfaceView w/e would be used I dont really know), and then just set a background image on the defined LinearLayout in XML to be revealed when the canvas erases the bitmap image we have set.

Anyway any suggestions would be appricated thanks alot in advanced!

Allemande answered 1/5, 2011 at 13:39 Comment(3)
Once you start working on the app, we can help you if you run into problems and have specific questions.Atmospheric
we have the application fully designed the only functionality left to implement is basically this.1. Set a Linear Layout with a background Image (which will be the image to be revealed) 2. Have a canvas placed over the linear layout in (say an imageview) 3. Set a touch painter that will instead of painting a color on the canvas will use some sort of opacity setting to reveal the linear layouts image via erasing the Canvas image , hopefully that is a bit more specific and gives an idea exactly what were trying to achieve, Thanks in advancedAllemande
Okay I got a canvas set up with a image that has scratch which I am able to rub my finger with and the image disapears but my problem is I want it to reveal an image in the background but all it does is reveal black cause there is nothing behind it. Ideas?Allemande
H
7

I created a library call WScrarchView where you can implement scratch view just few lines in layout xml. Hope this can help those who still looking for the solution https://github.com/winsontan520/Android-WScratchView

Highkey answered 19/1, 2013 at 16:39 Comment(4)
Works perfect! How get I get percentage of scratched area?Partake
@winson tan : It's working fine with Overlay color. i want image as overlay. So how it is possible for overlay image on imageview ? Please help me.Antheridium
@MS.for overlay image you can use github.com/GovindaPaliwal/Awesome-ScratchView this library. easily set overlay image for ScratchImageView or ScratchTextView.Faustino
@Partake You can get percentage of scratched area using github.com/GovindaPaliwal/Awesome-ScratchView this libraryFaustino

© 2022 - 2024 — McMap. All rights reserved.