Android merge a set of bitmaps into one bitmap

Question

I have a set of Bitmaps and I want to merge them into a single Bitmap so that they are all visible in a vertical format.

Ideally, it would look something like:

|Image1|
|Image2|
|Image3|
|  .   |  <--- a single Bitmap 
|  .   |
|  .   |

I saw a question which suggested using a Canvas to draw the Bitmaps over each other, but I can't figure out how I can format it for my problem.

My Bitmaps are generated in a loop as follows:

for (int i = 0; i < bitmapSet.size(); i++) {
    Bitmap bitmap = bitmapSet.get(i);

    // Merging them together would go here
}

Have you thought about using a `LayerDrawable`? Drawing on a `Canvas` is kind of complex for such a simple requirement. A `LayerDrawable` lets you display multiple images on top of each other. Would be just two or three lines of code or you could define it completely in xml. — Xaver Kapeller, Nov 02 '15 at 05:33
I've never heard of LayerDrawable, no. Do you think you could expand on how I could use that? I'll look for into it, thanks! — Brejuro, Nov 02 '15 at 05:40
Hope this will help you http://stackoverflow.com/questions/15151937/how-to-combine-multiple-images-into-a-single-image-in-android http://stackoverflow.com/questions/6944061/android-merge-two-images — PLP, Nov 02 '15 at 05:41
Are the images you are trying to display on top of each other static or dynamic? In other words do they change or are they always the same? If the images are static you can very simply define the `LayerDrawable` in xml and then display it like any other `Drawable`. Otherwise you have to create the `LayerDrawable` in code which is not as nice of a solution, but it is not complicated at all. — Xaver Kapeller, Nov 02 '15 at 05:43
@XaverKapeller They are dynamic, as in they are programmatically created. I'm wondering if an easier way to do this would be to somehow take a screenshot of the scrollview in which I am adding all of these seperate bitmaps to. — Brejuro, Nov 02 '15 at 06:05
@Brejuro I highly doubt that. Anyway I am about to post an answer which is explains how to use a `LayerDrawable`. — Xaver Kapeller, Nov 02 '15 at 06:07

Xaver Kapeller · Accepted Answer · 2015-11-02T06:24:55.910

If you want to display multiple images on top of each other the easiest solution is to use a LayerDrawable. You can create a LayerDrawable either in code or in xml.

1) Creating a `LayerDrawable` in code

If you want to stack dynamic images you have to create the LayerDrawable in code. You can do that like this:

final LayerDrawable layerDrawable = new LayerDrawable(new Drawable[]{
        someDrawable,
        anotherDrawable,
        aThirdDrawable
});

The Drawables will be drawn in the same order as the occur in the array. After creating the LayerDrawable you can use it like any other Drawable and the LayerDrawable will take care of the rest.

2) Creating a `LayerDrawable` in XML

If you want to stack a few assets contained in your resources folder on top of each other you just have to create a new xml file with an appropriate name in your res/drawable folder. Defining the LayerDrawable works like this:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/someDrawable"/>
    <item android:drawable="@drawable/anotherDrawable"/>
    <item android:drawable="@drawable/aThirdDrawableJustForGoodMeasure"/>

</layer-list>

For each Drawable you want to stack you just need to add another <item /> tag with the reference to the Drawable. Again the order of the items in the <layer-list /> tag determines the draw order.

In your specific case since you seem to have a List of Bitmaps you could create a LayerDrawable like this:

final List<Bitmap> images = ...;
final Drawable[] layers = new Drawable[images.size()];
for (int i = 0, count = images.size(); i < count; i++) {
    layers[i] = new BitmapDrawable(getResources(), images.get(i));
}
final LayerDrawable layerDrawable = new LayerDrawable(layers);

But of course it would be much better if you would work only with Drawables from the start in which case the code could be simplified to this:

final List<Drawable> images = ...;
final LayerDrawable layerDrawable = new LayerDrawable(images.toArray(new Drawable[images.size()]));

You can find more information about the LayerDrawable in the official documentation!

Android merge a set of bitmaps into one bitmap

1 Answers1

1) Creating a LayerDrawable in code

2) Creating a LayerDrawable in XML

1) Creating a `LayerDrawable` in code

2) Creating a `LayerDrawable` in XML