Android Snippet: How to combine multiple Images to a single Image in android

Android Snippet: How to combine multiple Images to a single Image in android

In this android code snippet tutorial, we are going to learn how to combine multiple images to a single image. This can become necessary when you want to overlay one image over another. Apart from this there are many other areas you can apply this technique.

We will store two different images we want to combine in this project. The best way is to use an array to store all the images as a bitmap. Then the bitmap images are drawn on the canvas.

Before we start, the first thing I will do is to list the environment and tools I used in this android code snippet but feel free to use whatever environment or tools you are familiar with.

Windows 7

Android Studio

Samsung Galaxy Fame Lite

Min SDK 14

Target SDK 19

To create a new android application project, following the steps as stipulated below.

Go to File menu

Click on New menu

Click on Android Application

Enter Project name: MultipleImages

Package: com.inducesmile.multipleimages

Keep other default selections.

Continue to click on next button until Finish button is active, then click on Finish Button

Once you are done with creating your project, copy and paste the following code snippet to your project. Replace the code in your MainActivity.java file with the following code. Make sure you change the package name if you did not use the same package.

package multipleimages.inducesmile.com.multipleimages;

import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.os.Bundle;
import android.support.v7.app.ActionBarActivity;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;


public class MainActivity extends ActionBarActivity {

private ImageView collageImage;

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

collageImage = (ImageView)findViewById(R.id.imageView3);

Button combineImage = (Button)findViewById(R.id.combineimage);
combineImage.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Bitmap bigImage = BitmapFactory.decodeResource(getResources(), R.drawable.multiple);
Bitmap smallImage = BitmapFactory.decodeResource(getResources(), R.drawable.multipletwo);
Bitmap mergedImages = createSingleImageFromMultipleImages(bigImage, smallImage);

collageImage.setImageBitmap(mergedImages);
}
});
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();

//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}

return super.onOptionsItemSelected(item);
}

private Bitmap createSingleImageFromMultipleImages(Bitmap firstImage, Bitmap secondImage){

Bitmap result = Bitmap.createBitmap(firstImage.getWidth(), firstImage.getHeight(), firstImage.getConfig());
Canvas canvas = new Canvas(result);
canvas.drawBitmap(firstImage, 0f, 0f, null);
canvas.drawBitmap(secondImage, 10, 10, null);
return result;
}
}

The activity_main.xml file content is shown below.

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent"
android:layout_height="match_parent" android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true"
android:layout_marginLeft="2dp"
android:layout_marginStart="35dp"
android:background="@drawable/multiple"
android:layout_marginTop="35dp" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView2"
android:layout_alignBottom="@+id/imageView"
android:layout_alignParentRight="true"
android:layout_alignParentEnd="true"
android:layout_marginRight="2dp"
android:background="@drawable/multipletwo"
android:layout_marginEnd="36dp" />

<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/combine"
android:id="@+id/combineimage"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />

<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/imageView3"
android:layout_below="@+id/combineimage"
android:layout_centerHorizontal="true"
android:layout_marginTop="34dp" />

</RelativeLayout>

Save the file and run your project.

You can download the code for this tutorial below. If you are having hard time downloading the tutorials, kindly contact and I will send it to you.

Remember to subscribe with your email so that you will be among the first to receive our new post once it is published

OTHER INTERESTING POSTS:

Add a Comment