Android Adding Images Over ImageView

Question

I have a ImageView which shows a picture that has been taken from the camera. The effect i am trying to create is I want a image to appear over the ImageView with the OnTouchEvent. So say I have five images I am wanting it to have five OnTouchEvent's and for each touch on the screen a new image would appear over the top of the previouslly displayed image (they are transparent png's).

I have looked through this question Adding an Image to a Canvas in Android but can't get my head around it.

So basically I am wanting it so when you are viewing the Activity with the Image in the ImageView you can touch the screen which will then add a png over the top of the picture in the ImageView and so on for say 6 or 7 images. Each one gets added sepertaly so it would take 6 touchs of the screen to add 6 png's over the current Image in the Imageview

UPDATE Thanks to Graeme

The code below has been updated I am just getting an error on nextBitmap which is nextBitmap cannot be resolved I think this is because I need to set this somewhere to go through the images that will be added like make an array?

Update 2

I now know that I need to some how add a string nextBitmap with the Images in so that it will loop throw them when the screen is touched, anyone got any ideas?

public class BeatEmUp extends Activity {

Bitmap myBitmap;    

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.beatemup);

    String myRef = this.getIntent().getStringExtra("filepath");
    File imgFile = new  File(myRef);
    Log.e("No ref", myRef);

    if(imgFile.exists()) {
        final Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath());
        final ImageView myImage = (ImageView) findViewById(R.id.beatemup);
        myImage.setImageBitmap(myBitmap);
        myImage.setOnClickListener(new OnClickListener() {

            public void onClick(View v) {
                myBitmap = getBitmapOverlay(myBitmap, nextBitmap, 0, 0);
                myImage.setImageBitmap(myBitmap);
            }
        });
    }
}

public static Bitmap getBitmapOverlay(Bitmap bmp1, Bitmap bmp2, int left, int top) {
    Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(),  bmp1.getConfig());
    Canvas canvas = new Canvas(bmOverlay);    
    canvas.drawBitmap(bmp1, 0, 0, null);
    canvas.drawBitmap(bmp2, left, top, null);
    return bmOverlay;
}
}

You haven't said what the problem is / How the current code doesn't achieve your aim. — Graeme, Jan 04 '12 at 15:55

score 4 · Accepted Answer · answered Jan 04 '12 at 16:06

Following from @Gabi's answer:

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.beatemup);

    String myRef = this.getIntent().getStringExtra("filepath");
    File imgFile = new  File(myRef);
    Log.e("No ref", myRef);

    if(imgFile.exists()) {
        Bitmap myBitmap = BitmapFactory.decodeFile(imgFile.getAbsolutePath());
        ImageView myImage = (ImageView) findViewById(R.id.beatemup);
        myImage.setImageBitmap(myBitmap);
        myImage.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                myBitmap = getBitmapOverlay(myBitmap, nextBitmap, 0, 0));
                myImage.setImageBitmap(myBitmap);
            }
        });
    }
}

public static Bitmap getBitmapOverlay(Bitmap bmp1, Bitmap bmp2, int left, int top) {
    Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(),  bmp1.getConfig());
    Canvas canvas = new Canvas(bmOverlay);    
    canvas.drawBitmap(bmp1, 0, 0, null);
    canvas.drawBitmap(bmp2, left, top, null);
    return bmOverlay;
}

You'll need to initialise nextBitmap yourself (and have it change after you have clicked the image).

Ok so now that makes more sense but I still dont see how I would set each different image to show for each OnClick. — Matt, Jan 04 '12 at 16:11
Also do I not need to set `myBitmap` and `myImage` to final like `final Bitmap myBitmap` and `final ImageView myImage` — Matt, Jan 04 '12 at 16:14
Place `Bitmap myBitmap;` outside of `onCreate()` and then use `myBitmap= BitmapFactory....` instead. And yes, Add final to ImageView. — Graeme, Jan 04 '12 at 16:16
As for how to switch between images, That's basic Java logic and I could tell you the answer but you need to learn Java for yourself. — Graeme, Jan 04 '12 at 16:17
Ok I updated the question am I on the right lines thinking I need to make an array with all the images in? — Matt, Jan 04 '12 at 16:19

score 2 · Answer 2 · answered Jan 04 '12 at 15:03

2

assuming that bmp1 is the main bitmap, use this:

 public static Bitmap bitmapOverlay(Bitmap bmp1, Bitmap bmp2, int left, int top) {
        Bitmap bmOverlay = Bitmap.createBitmap(bmp1.getWidth(), bmp1.getHeight(),  bmp1.getConfig());
        Canvas canvas = new Canvas(bmOverlay);    
        canvas.drawBitmap(bmp1, 0, 0, null);
        canvas.drawBitmap(bmp2, left, top, null);
        return bmOverlay;
    }

answered Jan 04 '12 at 15:03

Buda Gavril

21,409
40
127
196

Im not sure what you mean I tried using this but getting a few errors also when you say `bmp1` the main bitmap you mean the first image that is currently displayed? – Matt Jan 04 '12 at 15:07
using this method, you can overlay tho bitmaps and show the final bitmap in one imageview. Yes, bmp1 is the displayed image and bmp2 is the image that will be draw on bmp1 – Buda Gavril Jan 04 '12 at 15:12
Ok I think I get you now that is exactly what i need but when i use that code in Eclipse I get a few errors and would each new bitmap show OnTouch of the screen sepertaly. Also how would i set the image for each `bmp`? – Matt Jan 04 '12 at 15:13
well, on each onTouch event (on the imageView) add the desired bitmap over the current bitmap and set it to the imageview – Buda Gavril Jan 04 '12 at 15:28
Thanks for your help so far but I just dont have a clue how to implement all that, still learning android. I understand how the code above works kind of but how do i set each bmp Image and would i just put all that code in a onClick event? Is it possible for you to show me? – Matt Jan 04 '12 at 15:30
read http://stackoverflow.com/questions/4207067/how-to-implement-touch-listener-on-image and add your bitmaps over the image only on ACTION_UP – Buda Gavril Jan 04 '12 at 15:56
Ok I think I am nearly there can you join me in a chat? – Matt Jan 04 '12 at 16:06
not now, I'm at work. if you don't manage to solve this, send me a private message and we will fix this somehow... – Buda Gavril Jan 04 '12 at 16:16

Android Adding Images Over ImageView

2 Answers2