Wsrtjtyk

I am implementing custom ViewGroup which has overlapping ImageViews.
I load images with GlideApp. Problem is that some images are cropped a little (visible on the left side) and I cannot prevent this. The drawables which get cropped are Vector drawables and their mDrawableWidth & mDrawableHeight are larger than the height of the ViewGroup. I thought that the images would be scaled to fit the view dimensions (mScaleType = FIT_CENTER).

class OverlappingImageViewGroup : ViewGroup {



constructor(context: Context) : this(context, null)

constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)

constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {}



override fun onMeasure(widthMeasureSpec: Int, heightMeasureSpec: Int) {

    val widthSize: Int = getDefaultSize(0, widthMeasureSpec)

    val heightSize: Int = getDefaultSize(0, heightMeasureSpec)



    val majorDimension = Math.min(widthSize, heightSize)

    //Measure all child views

    val childSpec = MeasureSpec.makeMeasureSpec(majorDimension, MeasureSpec.EXACTLY)

    measureChildren(childSpec, childSpec)



    //MUST call this to save our own dimensions

    setMeasuredDimension(majorDimension, majorDimension)

}



override fun onLayout(changed: Boolean,

                      leftRelativeToParent: Int,

                      topRelativeToParent: Int,

                      rightRelativeToParent: Int,

                      bottomRelativeToParent: Int) {



    val percentOverlap = 0.8f



    if (childCount > 0) {

        for (i in 0 until childCount) {

            val child = getChildAt(i)

            val childWidth = child.measuredWidth



            val topBound = 0 /* there is just one row */



            if (i == 0) {

                child.layout(0, topBound, childWidth, childWidth)

            } else {

                val leftBound = i * percentOverlap * childWidth

                child.layout(

                        leftBound.toInt(),

                        topBound,

                        leftBound.toInt() + childWidth,

                        topBound + childWidth)

            }

        }

    }

}

}

ImageViews are created programmatically:

val context = holder.rootView.context

            val imageView: ImageView = ImageView(context)

            GlideApp.with(context)

                    .load(imageUrl)

                    .placeholder(userPlaceholder)

                    .fallback(userPlaceholder)

                    .error(userPlaceholder)

                    .transform(CircleWithBorderTransform())

                    .into(imageView)

            holder.membersIcons.addView(imageView)

Glide transformation:

override fun transform(pool: BitmapPool, source: Bitmap, outWidth: Int, outHeight: Int): Bitmap {



    val width = source.width

    val height = source.height



    val canvasBitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888)

    val shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)

    val paint = Paint()

    paint.isAntiAlias = true

    paint.shader = shader



    val canvas = Canvas(canvasBitmap)

    val radius = if (width > height) height.toFloat() / 2f else width.toFloat() / 2f

    canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, paint)



    //border around the image

    paint.shader = null

    paint.style = Paint.Style.STROKE

    paint.strokeWidth = 2f

    paint.color = Color.WHITE

    canvas.drawCircle((width / 2).toFloat(), (height / 2).toFloat(), radius, paint)



    return canvasBitmap

}