Combining two bitmap image (side by side)

Question

Can any one help to combine two bitmap images into single bitmap

in android (Side by side).

Thanks, Yuvaraj

Answer 1

You can use Canvas - check out this article:

http://www.jondev.net/articles/Combining_2_Images_in_Android_using_Canvas

Updated code to do it side by side:

public Bitmap combineImages(Bitmap c, Bitmap s) { // can add a 3rd parameter 'String loc' if you want to save the new image - left some code to do that at the bottom 
    Bitmap cs = null; 

    int width, height = 0; 

    if(c.getWidth() > s.getWidth()) { 
      width = c.getWidth() + s.getWidth(); 
      height = c.getHeight(); 
    } else { 
      width = s.getWidth() + s.getWidth(); 
      height = c.getHeight(); 
    } 

    cs = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); 

    Canvas comboImage = new Canvas(cs); 

    comboImage.drawBitmap(c, 0f, 0f, null); 
    comboImage.drawBitmap(s, c.getWidth(), 0f, null); 

    // this is an extra bit I added, just incase you want to save the new image somewhere and then return the location 
    /*String tmpImg = String.valueOf(System.currentTimeMillis()) + ".png"; 

    OutputStream os = null; 
    try { 
      os = new FileOutputStream(loc + tmpImg); 
      cs.compress(CompressFormat.PNG, 100, os); 
    } catch(IOException e) { 
      Log.e("combineImages", "problem combining images", e); 
    }*/ 

    return cs; 
  } 

Answer 2

Excellent work the selected answer. If you want to do it with array list of bitmaps and side by side look below:

private Bitmap combineImageIntoOneFlexWidth(ArrayList<Bitmap> bitmap) {
        int w = 0, h = 0;
        for (int i = 0; i < bitmap.size(); i++) {
            if (i < bitmap.size() - 1) {
                h = bitmap.get(i).getHeight() > bitmap.get(i + 1).getHeight() ? bitmap.get(i).getHeight() : bitmap.get(i + 1).getHeight();
            }
            w += bitmap.get(i).getWidth();
        }

        Bitmap temp = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(temp);
        int top = 0;
        for (int i = 0; i < bitmap.size(); i++) {
            Log.e("HTML", "Combine: " + i + "/" + bitmap.size() + 1);

            top = (i == 0 ? 0 : top + bitmap.get(i).getWidth());
            //attributes 1:bitmap,2:width that starts drawing,3:height that starts drawing
            canvas.drawBitmap(bitmap.get(i), top, 0f, null);
        }
        return temp;
    }

Answer 3

I ended up modifying xil3's answer into a kotlin extension function, maybe it will be useful to someone. In my case I wanted the images stacked vertically

fun Bitmap?.combine(b: Bitmap?): Bitmap? =
when {
    b == null || this == null -> {
        this ?: b
    } else -> {
        val cs = Bitmap.createBitmap(
            max(this.width, b.width),
            this.height + b.height,
            Bitmap.Config.ARGB_8888
        )
        val canvas = Canvas(cs)
        canvas.drawBitmap(this, 0f, 0f, null)
        canvas.drawBitmap(b, 0f, this.height.toFloat(), null)
        cs
    }
}