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.

Solution 1

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

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

Solution 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);

Solution 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";
  }
}

Solution 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.

Solution 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

View more solutions

Comments

[Akshay]

Superb!!! Thanks a lot...I just replace canvas.drawCircle(r, r, r, paint); with canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), r, r, paint); to get round corner rect

[stevyhacker]

You forgot to say that the r needs to be changed for this to work, otherwise it makes the circle from RoundRect because the radius is too big.

[Atul]

This is short n perfect solution in all posts about rounded corner transform on SO. Thanks a lot :)

[Choletski]

if we set android:scaleType="centerCrop" to the ImageView and image is zoomed to fill out the view, then your method doesn't take any effect because rounded corners are out of view

[Lion789]

How do I use this @stevyhacker to make only the top two corners rounded... I cannot understand what part I am suppose to change?

[ʕ ᵔᴥᵔ ʔ]

@Lion789: In the picasso-transformations library mentionded below, it is possible to exactly set the corners that you want rounded, e.g: Picasso .with(mContext) .load(mUrl) .resize(200, 200) .centerCrop() .transform( new RoundedCornersTransformation(2, 0, RoundedCornersTransformation.CornerType.LEFT) ) .into(mImageView);

[RominaV]

@Lion789 I got all the rounded corners with the code in this answer.

[NickUnuchek]

@Choletski use also CropTransformation(int width, int height) before RoundedCornersTransformation

[Pablo Quemé]

And both forgot to say that you need to change r for 0 and size.getHeight() for it to work (in my case). This is the final code: canvas.drawRoundRect(new RectF(0, 0, source.getWidth(), source.getHeight()), 0, source.getHeight(), paint);

[CoolMind]

@Choletski, probably centerCrop() may help: Picasso.with(getContext()).load(uri).centerCrop().resize(wid‌​th, height).transform(transformation).into(imageView);.

[CoolMind]

Nice solution. Also note that before you apply this transformation ImageView must be visible (in other case no transformation will be applied). And yes, you can write Picasso.with(getContext()).load(uri).centerCrop().resize(wid‌​th, height).transform(transformation).into(imageView); for cropped images.