Make ImageView with Round Corner Using picasso

Question

I know there are lots of link available to make ImageView Round Corner. But I'm Using Picasso Library for Image Loading.. I refer the link to get result. But the Problem is that I'm Using it in ListView and for the LIstView's first item ImageView its working perfectly fine but for the remaining once transformation is not working.

Answer 1

I am using this transformation: https://gist.github.com/julianshen/5829333

Picasso.with(activity).load(url).transform(new CircleTransform()).into(imageView);

Answer 2

You can use RoundedCornersTransformation class of picasso-transformations library.

Example :

final int radius = 5;
final int margin = 5;
final Transformation transformation = new RoundedCornersTransformation(radius, margin);
Picasso.with(activity).load(url).transform(transformation).into(imageView);

Answer 3

You can use this class to make rounded corners rectangle image view with Picasso, use it like this

 Picasso.with(activity).load(url).transform(new RoundedCornersTransform(this)).into(imageView);

Here is the class RoundedCornersTransform.

package com.demo.picasso;

import android.graphics.Bitmap;
import android.graphics.BitmapShader;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;

import com.squareup.picasso.Transformation;


public class RoundedCornersTransform implements Transformation {
@Override
public Bitmap transform(Bitmap source) {
    int size = Math.min(source.getWidth(), source.getHeight());

    int x = (source.getWidth() - size) / 2;
    int y = (source.getHeight() - size) / 2;

    Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
    if (squaredBitmap != source) {
        source.recycle();
    }

    Bitmap bitmap = Bitmap.createBitmap(size, size, source.getConfig());

    Canvas canvas = new Canvas(bitmap);
    Paint paint = new Paint();
    BitmapShader shader = new BitmapShader(squaredBitmap, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP);
    paint.setShader(shader);
    paint.setAntiAlias(true);

    float r = size / 8f;
    canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, paint);
    squaredBitmap.recycle();
    return bitmap;
}

@Override
public String key() {
    return "rounded_corners";
  }
}

Answer 4

i used RoundedCornersTransformationclass of picasso-transformationslibrary. I had custom adapter with view holder pattern in my listview. I added below dependency in my build.gradle:

dependencies {
        compile 'jp.wasabeef:picasso-transformations:2.1.0'
} 

And in my customArrayAdapter.java,i added:

Picasso.with(getContext()).load(path).transform(new RoundedCornersTransformation(10,10)).resize(175,300).into(viewHolder.ivImage);
This would both resize and give rounded corners to you images.

Answer 5

Like said here. You can use MaskTransformationclass of picasso-transformations library.

Example :

final Transformation transformation = new MaskTransformation(getContext(), R.drawable.rounded_convers_transformation);
Picasso.with(activity).load(url).transform(transformation).into(imageView);

res/drawable/rounded_convers_transformation.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
    <corners android:radius="5dp"/>
    <solid android:color="@color/black"/>
</shape>

UPDATE: But notice that you should also .resize(w,h) the image, because if image will be large the round will not be determinatable

Answer 6

Kotlin version of RoundCornerTransform based on @stevyhacker 's answer.

• Support rectangle instead of square image.
• No extra 3rd party library needed.

=============================================

import android.graphics.*
import com.squareup.picasso.Transformation

class RoundCornersTransform(private val radiusInPx: Float) : Transformation {

    override fun transform(source: Bitmap): Bitmap {
        val bitmap = Bitmap.createBitmap(source.width, source.height, source.config)
        val canvas = Canvas(bitmap)
        val paint = Paint(Paint.ANTI_ALIAS_FLAG or Paint.DITHER_FLAG)
        val shader = BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)
        paint.shader = shader
        val rect = RectF(0.0f, 0.0f, source.width.toFloat(), source.height.toFloat())
        canvas.drawRoundRect(rect, radiusInPx, radiusInPx, paint)
        source.recycle()

        return bitmap
    }

    override fun key(): String {
        return "round_corners"
    }

}

Usage:

    Picasso.get()
        .load(imageUrl)
        .memoryPolicy(MemoryPolicy.NO_CACHE)
        .placeholder(R.drawable.image_placeholder)
        .transform(RoundCornersTransform(32.0f))
        .into(imageView, callback)

Answer 7

Following @stevyhacker's answer and this related one, I came up with this:

import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.Rect;
import android.graphics.RectF;

import com.squareup.picasso.Transformation;


public class RoundedCornersTransform implements Transformation {
    private static Bitmap createRoundedRectBitmap(Bitmap bitmap,
                                                  float topLeftCorner, float topRightCorner,
                                                  float bottomRightCorner, float bottomLeftCorner) {
        Bitmap output = Bitmap.createBitmap(bitmap.getWidth(), bitmap.getHeight(),
                Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(output);

        final int color = Color.WHITE;
        final Paint paint = new Paint();
        final Rect rect = new Rect(0, 0, bitmap.getWidth(), bitmap.getHeight());
        final RectF rectF = new RectF(rect);
        Path path = new Path();
        float[] radii = new float[]{
                topLeftCorner, bottomLeftCorner,
                topRightCorner, topRightCorner,
                bottomRightCorner, bottomRightCorner,
                bottomLeftCorner, bottomLeftCorner
        };

        paint.setAntiAlias(true);
        canvas.drawARGB(0, 0, 0, 0);
        paint.setColor(color);
        path.addRoundRect(rectF, radii, Path.Direction.CW);
        canvas.drawPath(path, paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_IN));
        canvas.drawBitmap(bitmap, rect, rect, paint);
        return output;
    }

    @Override
    public Bitmap transform(Bitmap source) {
        int size = Math.min(source.getWidth(), source.getHeight());

        int x = (source.getWidth() - size) / 2;
        int y = (source.getHeight() - size) / 2;

        Bitmap squaredBitmap = Bitmap.createBitmap(source, x, y, size, size);
        if (squaredBitmap != source) {
            source.recycle();
        }

        float r = size / 4f;

        Bitmap roundedBitmap = createRoundedRectBitmap(squaredBitmap, r, r, r, r);

        squaredBitmap.recycle();

        return roundedBitmap;
    }

    @Override
    public String key() {
        return "rounded_corners";
    }
}

Use it like this:

Picasso.with(context).load(url).transform(new RoundedCornersTransform()).into(imageView);

Probably needs some enhancements though, so watch out!