White lines between the images ( not in a standard use case )

[bobymicroby]

Libs looks great! Thanks for sharing!

I am trying to use it as the largeIcon of a notification but the end result is big while ( actually alpha ) lines between the images :

In order to extract the bitmap from the MultiImageView i've did the following incantation :

LayoutInflater inflater = (LayoutInflater) this.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View wrapperView = inflater.inflate(R.layout.multi_image_view, null);

            MultiImageView imageView = wrapperView.findViewById(R.id.multi_image_view);

            for (Bitmap cachedIcon : cachedIcons)
            {
                imageView.addImage(cachedIcon);
            }

            imageView.setShape(MultiImageView.Shape.CIRCLE);

            wrapperView.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED);
            wrapperView.layout(0, 0, wrapperView.getMeasuredWidth(), wrapperView.getMeasuredHeight());
            wrapperView.buildDrawingCache();

            Bitmap bitmap =
                    Bitmap.createBitmap(wrapperView.getMeasuredWidth(), wrapperView.getMeasuredHeight(),
                            Bitmap.Config.ARGB_8888);

            Canvas canvas = new Canvas(bitmap);
            wrapperView.draw(canvas);

            return bitmap;

And the R.layout.multi_image_view looks like

<?xml version="1.0" encoding="utf-8"?>

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">


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

</FrameLayout>

If a possible cause passes trough your mind, I will be very happy if you share it .

Cheers!

[harshalijain]

Check your Manifest file for the following property:
android:hardwareAccelerated
Ensure that it is set to true

[tranquoctrungcntt]

It is true by default

[tranquoctrungcntt]

I face the same issue

[toboklee]

Hmm im having this issue as well :(

[aanalmehta]

I am having the same issue. Did anyone find the solution?

[aanalmehta]

I found the solution.
What was happening is:

• Image gets center cropped and sets half of the assigned width. That's why white space was displayed.

What I did is:

• Modified the MultiImageView.kt class.
• Split the bitmap image into two parts(left and righ part).
• Rescale the cropped bitmap and set it.

To rescale the bitmap:
Bitmap.createScaledBitmap(bitmap2!!, bounds.width(), bounds.height(), false)

[martipello]

i have the same issue

[martipello]

• Split the bitmap image into two parts(left and righ part).

could you share this code?

[martipello]

@aanalmehta could you share this code - Split the bitmap image into two parts(left and righ part).

[martipello]

i solved it a little differently

replaced the scale bitmap method and the init function

private fun init() {
items.clear()
paint.isAntiAlias = true
paint.isFilterBitmap = true
paint.isDither = true

    when {
        bitmaps.size == 1 -> {
            val bitmap = scaleCenterCrop(bitmaps[0], bounds.width(), bounds.height())
            items.add(PhotoItem(bitmap, Rect(0, 0, bounds.width(), bounds.height())))
        }
        bitmaps.size == 2 -> {
            val bitmap1 = scaleCenterCrop(bitmaps[0], bounds.width() / 2, bounds.height())
            val bitmap2 = scaleCenterCrop(bitmaps[1], bounds.width() / 2, bounds.height())
            items.add(PhotoItem(bitmap1, Rect(0, 0, bounds.width(), bounds.height())))
            items.add(PhotoItem(bitmap2, Rect(bounds.width() / 2, 0, bounds.width() + bounds.width() / 2, bounds.height())))
        }
        bitmaps.size == 3 -> {
            val bitmap1 = scaleCenterCrop(bitmaps[0], bounds.width() / 2, bounds.height())
            val bitmap2 = scaleCenterCrop(bitmaps[1], bounds.width(), bounds.height())
            val bitmap3 = scaleCenterCrop(bitmaps[2], bounds.width(), bounds.height())
            items.add(PhotoItem(bitmap1, Rect(0, 0, bounds.width(), bounds.height())))
            items.add(PhotoItem(bitmap2, Rect(bounds.width() / 2, 0, bounds.width(), bounds.height() / 2)))
            items.add(PhotoItem(bitmap3, Rect(bounds.width() / 2, bounds.height() / 2, bounds.width(), bounds.height())))
        }
        bitmaps.size == 4 -> {
            val bitmap1 = scaleCenterCrop(bitmaps[0], bounds.width(), bounds.height())
            val bitmap2 = scaleCenterCrop(bitmaps[1], bounds.width(), bounds.height())
            val bitmap3 = scaleCenterCrop(bitmaps[2], bounds.width(), bounds.height())
            val bitmap4 = scaleCenterCrop(bitmaps[3], bounds.width(), bounds.height())
            items.add(PhotoItem(bitmap1, Rect(0, 0, bounds.width() / 2, bounds.height() / 2)))
            items.add(PhotoItem(bitmap2, Rect(0, bounds.height() / 2, bounds.width() / 2, bounds.height())))
            items.add(PhotoItem(bitmap3, Rect(bounds.width() / 2, 0, bounds.width(), bounds.height() / 2)))
            items.add(PhotoItem(bitmap4, Rect(bounds.width() / 2, bounds.height() / 2, bounds.width(), bounds.height())))
        }
    }
}


private fun scaleCenterCrop(source: Bitmap, newWidth : Int, newHeight : Int): Bitmap {
    val sourceWidth = source.width
    val sourceHeight = source.height

    // Compute the scaling factors to fit the new height and width, respectively.
    // To cover the final image, the final scaling will be the bigger
    // of these two.
    val xScale = newWidth.toFloat() / sourceWidth
    val yScale = newHeight.toFloat() / sourceHeight
    val scale = max(xScale, yScale)

    // Now get the size of the source bitmap when scaled
    val scaledWidth = scale * sourceWidth
    val scaledHeight = scale * sourceHeight

    // Let's find out the upper left coordinates if the scaled bitmap
    // should be centered in the new size give by the parameters
    val left = (newWidth - scaledWidth) / 2
    val top = (newHeight - scaledHeight) / 2

    // The target rectangle for the new, scaled version of the source bitmap will now
    // be
    val targetRect = RectF(left, top, left + scaledWidth, top + scaledHeight)

    // Finally, we create a new bitmap of the specified size and draw our new,
    // scaled bitmap onto it.
    val dest = Bitmap.createBitmap(newWidth, newHeight, source.config)
    val canvas = Canvas(dest)
    canvas.drawBitmap(source, null, targetRect, null)

    return dest
}

[martipello]

made a pull request

[konkech]

Will there be new version of this library with error correction mentioned in this mail thread?
I was so close to have my implementation ready.. but this error with white lines appears... Thank you.

[JonathanNet]

I have same issue, is there a fix on this?

[martipello]

I have same issue, is there a fix on this?

My fix above works

[JonathanNet]

I have same issue, is there a fix on this?

My fix above works

Yeah thanks :)

I tried it, and It worked, but if then there is only 1 image, it split it in 2, and if there is 2 added images, it split it into 4 :( so buggy.

[martipello]

I have same issue, is there a fix on this?

My fix above works

Yeah thanks :)

I tried it, and It worked, but if then there is only 1 image, it split it in 2, and if there is 2 added images, it split it into 4 :( so buggy.

I'll have a look and see if I didn't make some more changes but I'm fairly sure I use this and it works brilliantly it should also resolve the issue where the images are placed randomly instead of in the order they were given, as mentioned I'll have a look

[martipello]

ok i forgot that i also forked this project due to no response from the author so you can just grab that if ya like, add the jitpack maven repo to your repositories if its not already, and add implementation 'com.github.martipello:MultiImageView:1.0.8.2' to your projects build.gradle file, check the sample first if ya like here https://github.com/martipello/MultiImageView, there were other issues with this library like not adding images in order and duplicating images in recycler views, dont forget to like if ya use it