MERGE MULTIPLE IMAGES INTO ONE IMAGE IN ANDROID

Introduction: 

            This blog post is completely related to my previous post Splitting an image into smaller chunks. As far as the work is concerned both are responsible for completely opposite work. First one is responsible for splitting and this one is responsible for merging.

Where We Need This?

             As I said in my previous post this kind of splitting and merging concept is very much essential for sending and receiving larger image files across the web.

             My previous post will help you to send larger image files and this post will help you to merge the received image chunks to get the original one.

How To Achieve This?

We simply need to follow the following steps to achieve this.

1. Get all the smaller image chunks.
2. Find the width and height of those smaller images. (NOTE: all image chunks are of same size)
3. Create a Bitmap with width = width_of_each_smaller_chunk * rows and                                                 height = height_of_each_smaller_chunk * columns.
4. Create a Canvas encapsulating the Bitmap object in it.
5. Now draw the smaller chunks on the Canvas object.

Source Code:

The below code snippet shows how to merge smaller image chunks into one.

package com.example.android.imagemerger; import java.util.ArrayList; import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.EditText; import android.widget.GridView; import android.widget.ImageView; /** * * @author Chandra Sekhar Nayak * @version 1.0 * * This class is an activity and will displayed first when application starts * This Activity will display small images in a grid view * It also shows a button showing "Merge" on it. When clicks merges the small image chunks */ public class SmallImagesActivity extends Activity implements OnClickListener { ArrayList<Bitmap> smallImages; /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.image_grid); /* * This application will for merging number of smaller chunks to make the original * So for that we need some smaller image chunks. As I don't have any smaller images, * so I programmatically first split an image to get the smaller image chunks * and then merge them to get the original one. * * If you want you can also get some smaller chunks and directly merge them. * * The below 4 lines of code does the splitting operation */ ImageView image = new ImageView(getApplicationContext()); image.setImageResource(R.drawable.katewinslet); int chunkNumbers = 25; smallImages = splitImage(image, chunkNumbers); /* * This code is to show all the smaller image chunks into a grid structure */ GridView grid = (GridView) findViewById(R.id.gridview); grid.setAdapter(new ImageAdapter(this, smallImages)); grid.setNumColumns(5); /* * This gets the merge button and registers an click listener on it. */ Button mergeButton = (Button) findViewById(R.id.merge_button); mergeButton.setOnClickListener(this); } /** * Splits the source image and show them all into a grid in a new activity * * @param image The source image to split * @param chunkNumbers The target number of small image chunks to be formed from the source image * @return ArrayList<Bitmap> The resulted smaller image chunks in a List of Bitmaps */ private ArrayList<Bitmap> splitImage(ImageView image, int chunkNumbers) { //For the number of rows and columns of the grid to be displayed int rows, cols; rows = cols = 5; //For height and width of the small image chunks int chunkHeight, chunkWidth; //To store all the small image chunks in bitmap format in this list ArrayList<Bitmap> chunkedImages = new ArrayList<Bitmap>(chunkNumbers); //Getting the scaled bitmap of the source image BitmapDrawable drawable = (BitmapDrawable) image.getDrawable(); Bitmap bitmap = drawable.getBitmap(); Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true); rows = cols = (int) Math.sqrt(chunkNumbers); chunkHeight = bitmap.getHeight()/rows; chunkWidth = bitmap.getWidth()/cols; //xCoord and yCoord are the pixel positions of the image chunks int yCoord = 0; for(int x=0; x<rows; x++){ int xCoord = 0; for(int y=0; y<cols; y++){ chunkedImages.add(Bitmap.createBitmap(scaledBitmap, xCoord, yCoord, chunkWidth, chunkHeight)); xCoord += chunkWidth; } yCoord += chunkHeight; } return chunkedImages; } /* * This method actually implements the code for merging the small images * @see android.view.View.OnClickListener#onClick(android.view.View) */ @Override public void onClick(View view) { //Get the width and height of the smaller chunks int chunkWidth = smallImages.get(0).getWidth(); int chunkHeight = smallImages.get(0).getHeight(); //create a bitmap of a size which can hold the complete image after merging Bitmap bitmap = Bitmap.createBitmap(chunkWidth * 5, chunkHeight * 5, Bitmap.Config.ARGB_4444); //create a canvas for drawing all those small images Canvas canvas = new Canvas(bitmap); int count = 0; for(int rows = 0; rows < 5; rows++){ for(int cols = 0; cols < 5; cols++){ canvas.drawBitmap(smallImages.get(count), chunkWidth * cols, chunkHeight * rows, null); count++; } } /* * The result image is shown in a new Activity */ Intent intent = new Intent(SmallImagesActivity.this, MergedImage.class); intent.putExtra("merged_image", bitmap); startActivity(intent); } }

Some Important points:

            Note that the actual code for merge operation is inside the onClick() method of the above code snippet. Below is the description about the variables of the onClick() method.

1. chunkHeight & chunkWidth : Height and Width of smaller image chunks.
2. smallImages : An ArrayList<Bitmap> object which stores all the smaller image chunks in their bitmap format.
3. bitmap : The target bitmap which will represent the original image after merge.
4. canvas : The canvas object encapsulating the target bitmap to draw the smaller image chunks.

You need to FOCUS more on the following line of code of onClick() method.

Bitmap bitmap = Bitmap.createBitmap(chunkWidth * 5, chunkHeight * 5, Bitmap.Config.ARGB_4444);

            The 3rd argument of the createBitmap() method is the configuration for the Bitmap. I used Bitmap.Config.ARGB_4444. Documentation recommends ARGB_8888 instead of ARGB_4444. As ARGB_8888 will give you more qualitative image, so there is every chance of getting BINDER TRANSACTION FAILED error if your device configuration is low. So I used ARGB_4444, if you are not getting any error with ARGB_8888, ten better go for that. For more information about these configuration see this.

Reference:

You can download the complete source code from My Google Drive Account.

If you want to achieve the same in Java using ImageIO, then you can see this.

Screen Shots:

Source Images

Result Image

SPLITTING/DIVIDING AN IMAGE INTO SMALLER CHUNKS/PIECES IN ANDROID

Where We Need This?

         
              In a device like SmartPhone, we know that memory management is a serious issue. So in these kind of platforms, if we want to send images to network, we may need to divide the source image into number of small chunks and then send them one by one. This concept also helps us developing a puzzle like application.

How To Achieve This?

           
              Well there are many ways to achieve this, but I prefer Bitmap API the most to achieve this. You can get more information about bitmaps from here.

Source Code:

The below code snippet shows how to split/divide an image into number of smaller chunks/pieces.

package com.android.imagesplitter; import java.util.ArrayList; import android.app.Activity; import android.content.Intent; import android.graphics.Bitmap; import android.graphics.drawable.BitmapDrawable; import android.os.Bundle; import android.view.View; import android.view.View.OnClickListener; import android.widget.Button; import android.widget.ImageView; public class ImageActivity extends Activity implements OnClickListener { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); Button b1 = (Button) findViewById(R.id.three); Button b2 = (Button) findViewById(R.id.four); Button b3 = (Button) findViewById(R.id.five); b1.setOnClickListener(this); b2.setOnClickListener(this); b3.setOnClickListener(this); } @Override public void onClick(View view){ int chunkNumbers = 0; switch (view.getId()) { case R.id.three: chunkNumbers = 9 ; break; case R.id.four: chunkNumbers = 16 ; break; case R.id.five: chunkNumbers = 25 ; } //Getting the source image to split ImageView image = (ImageView) findViewById(R.id.source_image); //invoking method to split the source image splitImage(image, chunkNumbers); } private void splitImage(ImageView image, int chunkNumbers) { //For the number of rows and columns of the grid to be displayed int rows,cols; //For height and width of the small image chunks int chunkHeight,chunkWidth; //To store all the small image chunks in bitmap format in this list ArrayList<Bitmap> chunkedImages = new ArrayList<Bitmap>(chunkNumbers); //Getting the scaled bitmap of the source image BitmapDrawable drawable = (BitmapDrawable) image.getDrawable(); Bitmap bitmap = drawable.getBitmap(); Bitmap scaledBitmap = Bitmap.createScaledBitmap(bitmap, bitmap.getWidth(), bitmap.getHeight(), true); rows = cols = (int) Math.sqrt(chunkNumbers); chunkHeight = bitmap.getHeight()/rows; chunkWidth = bitmap.getWidth()/cols; //xCoord and yCoord are the pixel positions of the image chunks int yCoord = 0; for(int x=0; x<rows; x++){ int xCoord = 0; for(int y=0; y<cols; y++){ chunkedImages.add(Bitmap.createBitmap(scaledBitmap, xCoord, yCoord, chunkWidth, chunkHeight)); xCoord += chunkWidth; } yCoord += chunkHeight; } /* Now the chunkedImages has all the small image chunks in the form of Bitmap class. * You can do what ever you want with this chunkedImages as per your requirement. * I pass it to a new Activity to show all small chunks in a grid for demo. * You can get the source code of this activity from my Google Drive Account. */ //Start a new activity to show these chunks into a grid Intent intent = new Intent(ImageActivity.this, ChunkedImageActivity.class); intent.putParcelableArrayListExtra("image chunks", chunkedImages); startActivity(intent); } }


The above class has splitImage method which takes two arguments:

1. ImageView: The source image to split.
2. int: The number of smaller chunks to be formed from the source image.

Reference:

You can find the complete source of this application from My Google Drive Account.
If you want the same in Java using ImageIO, then you can see this

You May Also Like:

Merge smaller images into one larger image in Android

Screen Shots:

Before Split

After Split