Android - combine multiple images into one ImageView

Question

I'm looking for help developing (or a library) which can allow me to merge together multiple images into one imageview.

My application is grouping together interactions between users, instead of displaying them singularly, and therefore I would like to merge all of their avatars, so that one adapter cell visualizes a "group".

A fantastic example of this is done on facebook.com's chat as such:

My question is, how can I provide this functionality in Android / Java? Presumably, it could a number of images between 1 and 4. Please let me know of any advice you can give :)

Answer 1

You can use MultiImageView.

Add dependency in app.gradle:

compile 'com.github.stfalcon:multiimageview:0.1'

Add MultiImageView to layout xml file

<com.stfalcon.multiimageview.MultiImageView
    android:id="@+id/iv"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

In java class find view by id:

final MultiImageView multiImageView = (MultiImageView) findViewById(R.id.iv);

For adding image to MultiImageView use method addImage(Bitmap bitmap). For exapple:

multiImageView.addImage(BitmapFactory.decodeResource(getResources(), R.drawable.avatar1));

For setting shape of MultiImageView use method setShape(MultiImageView.Shape shape).

multiImageView.setShape(MultiImageView.Shape.RECTANGLE);//Rectangle with round corners
multiImageView.setShape(MultiImageView.Shape.CIRCLE);//Circle
multiImageView.setShape(MultiImageView.Shape.NONE);//Without shape

Check github link for more information:

I think it is what you needed

Answer 2

You should overlap bitmaps onto another bitmap. A first approach are this:

Merge bitmaps

You can play with matrix and orders and sizes for a complex UI.

Answer 3

i know it's an old question but maybe it will help somebody else.

private Bitmap mergeThemAll(List<Bitmap> orderImagesList) {
    Bitmap result = null;
    if (orderImagesList != null && orderImagesList.size() > 0) {
        // if two images > increase the width only 
        if (orderImagesList.size() == 2)
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth() * 2, orderImagesList.get(0).getHeight(), Bitmap.Config.ARGB_8888);
        // increase the width and height 
        else if (orderImagesList.size() > 2)
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth() * 2, orderImagesList.get(0).getHeight() * 2, Bitmap.Config.ARGB_8888);
        else // don't increase anything 
            result = Bitmap.createBitmap(orderImagesList.get(0).getWidth(), orderImagesList.get(0).getHeight(), Bitmap.Config.ARGB_8888);

        Canvas canvas = new Canvas(result);
        Paint paint = new Paint();
        for (int i = 0; i < orderImagesList.size(); i++) {
            canvas.drawBitmap(orderImagesList.get(i), orderImagesList.get(i).getWidth() * (i % 2), orderImagesList.get(i).getHeight() * (i / 2), paint);
        }
    } else {
        Log.e("MergeError", "Couldn't merge bitmaps");
    }
    return result;
}

Answer 4

Addition to the answer by Anton Bevza

Their library has some disadvantages that are fixed in the fork

Add dependency in app.gradle:

implementation 'com.github.martipello:MultiImageView:1.0.8.2'

Add MultiImageView to layout xml file

<com.sealstudios.multiimageview.MultiImageView
        android:id="@+id/iv"
        android:layout_width="100dp"
        android:layout_height="100dp" 
        app:shape="circle" />

For setting shape of MultiImageView use attributes in layout xml file

app:shape="circle" //Circle
app:shape="rectangle" //Rectangle with round corners
app:shape="none" //Without shape

Also you can change shape by using method:

multiImageView.setShape(MultiImageView.Shape.RECTANGLE);//Rectangle with round corners
multiImageView.setShape(MultiImageView.Shape.CIRCLE);//Circle
multiImageView.setShape(MultiImageView.Shape.NONE);//Without shape

In java class find view by id:

 final MultiImageView multiImageView = findViewById(R.id.iv);

For adding image to MultiImageView use method addImage(Bitmap bitmap). For example:

multiImageView.addImage(BitmapFactory.decodeResource(getResources(), R.drawable.avatar));
//or
Bitmap bitmap = MediaStore.Images.Media.getBitmap(getContentResolver(), ImageUri);
multiImageView.addImage(bitmap);