¿Cómo redondear una imagen con la biblioteca Glide?

Entonces, ¿alguien sabe cómo mostrar una imagen con esquinas redondeadas con Glide? Estoy cargando una imagen con Glide, pero no sé cómo pasar los parámetros redondeados a esta biblioteca.

Necesito mostrar la imagen como el siguiente ejemplo:

enter image description here

Glide V4:

Glide.with(context).load(url).apply(RequestOptions.circleCropTransform()).into(imageView); 

Glide V3:

Puede usar RoundedBitmapDrawable para imágenes circulares con Glide. No se requiere ImageView personalizado.

  Glide.with(context).load(url).asBitmap().centerCrop().into(new BitmapImageViewTarget(imageView) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource); circularBitmapDrawable.setCircular(true); imageView.setImageDrawable(circularBitmapDrawable); } }); 

Mira esta publicación, glide vs picasso …
Editar : la publicación vinculada no menciona una diferencia importante en las bibliotecas. Glide hace el reciclaje automáticamente. Vea el comentario de TWiStErRob para más.

 Glide.with(this).load(URL).transform(new CircleTransform(context)).into(imageView); public static class CircleTransform extends BitmapTransformation { public CircleTransform(Context context) { super(context); } @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { return circleCrop(pool, toTransform); } private static Bitmap circleCrop(BitmapPool pool, Bitmap source) { if (source == null) return null; int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; // TODO this could be acquired from the pool too Bitmap squared = Bitmap.createBitmap(source, x, y, size, size); Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888); if (result == null) { result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(result); Paint paint = new Paint(); paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP)); paint.setAntiAlias(true); float r = size / 2f; canvas.drawCircle(r, r, r, paint); return result; } @Override public String getId() { return getClass().getName(); } } 

La forma más fácil (requiere Glide 4.xx)

 Glide.with(context).load(uri).apply(RequestOptions().circleCrop()).into(imageView) 

Prueba de esta manera

código

 Glide.with(this) .load(R.drawable.thumbnail) .bitmapTransform(new CropCircleTransformation(this)) .into(mProfile); 

XML

  

all_circle_white_bg.xml

         

es muy simple, he visto la biblioteca Glide, su muy buena base de biblioteca y ensayos en la biblioteca de volley de Google

Biblioteca usethis para vista de imagen redondeada

https://github.com/hdodenhof/CircleImageView

ahora

// Para una vista simple:

  @Override public void onCreate(Bundle savedInstanceState) { ... CircleImageView civProfilePic = (CircleImageView)findViewById(R.id.ivProfile); Glide.load("http://goo.gl/h8qOq7").into(civProfilePic); } 

// Para una lista:

 @Override public View getView(int position, View recycled, ViewGroup container) { final ImageView myImageView; if (recycled == null) { myImageView = (CircleImageView) inflater.inflate(R.layout.my_image_view, container, false); } else { myImageView = (CircleImageView) recycled; } String url = myUrls.get(position); Glide.load(url) .centerCrop() .placeholder(R.drawable.loading_spinner) .animate(R.anim.fade_in) .into(myImageView); return myImageView; } 

y en XML

  

Las otras soluciones no funcionaron para mí. Descubrí que todos tienen inconvenientes importantes:

  • Las soluciones que usan transformaciones de planeo no funcionan con marcadores de posición
  • Las soluciones que utilizan vistas de imagen redondeadas no funcionan con animaciones (es decir, fundido cruzado)
  • Las soluciones que usan un método genérico de un padre que recorta a sus hijos (es decir, la respuesta aceptada aquí ) no funcionan bien con el deslizamiento

Es realmente interesante que después de buscar este tema, encontré la página de la biblioteca de Fresco sobre esquinas redondeadas y círculos en los que enumeran básicamente las mismas limitaciones y concluyen con la siguiente afirmación:

no hay una solución realmente buena para redondear esquinas en Android y uno tiene que elegir entre las compensaciones antes mencionadas

Es increíble que en este momento aún no tengamos una solución real. Tengo una solución alternativa basada en el enlace que puse arriba. El inconveniente de este enfoque es que supone que el fondo es de un color sólido (las esquinas no son realmente transparentes). Lo usarías así:

    

La esencia está aquí y el código completo aquí:

 public class RoundedCornerLayout extends RelativeLayout { private Bitmap maskBitmap; private Paint paint; private float cornerRadius; public RoundedCornerLayout(Context context) { super(context); init(context, null, 0); } public RoundedCornerLayout(Context context, AttributeSet attrs) { super(context, attrs); init(context, attrs, 0); } public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); init(context, attrs, defStyle); } private void init(Context context, AttributeSet attrs, int defStyle) { paint = new Paint(Paint.ANTI_ALIAS_FLAG); setWillNotDraw(false); } @Override public void draw(Canvas canvas) { super.draw(canvas); if (maskBitmap == null) { // This corner radius assumes the image width == height and you want it to be circular // Otherwise, customize the radius as needed cornerRadius = canvas.getWidth() / 2; maskBitmap = createMask(canvas.getWidth(), canvas.getHeight()); } canvas.drawBitmap(maskBitmap, 0f, 0f, paint); } private Bitmap createMask(int width, int height) { Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(mask); Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG); paint.setColor(Color.WHITE); // TODO set your background color as needed canvas.drawRect(0, 0, width, height, paint); paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR)); canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint); return mask; } } 

Usa esta transformación, funcionará bien.

 public class CircleTransform extends BitmapTransformation { public CircleTransform(Context context) { super(context); } @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { return circleCrop(pool, toTransform); } private static Bitmap circleCrop(BitmapPool pool, Bitmap source) { if (source == null) return null; int borderColor = ColorUtils.setAlphaComponent(Color.WHITE, 0xFF); int borderRadius = 3; int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; // TODO this could be acquired from the pool too Bitmap squared = Bitmap.createBitmap(source, x, y, size, size); if (squared != source) { source.recycle(); } Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888); if (result == null) { result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(result); Paint paint = new Paint(); paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP)); paint.setAntiAlias(true); float r = size / 2f; canvas.drawCircle(r, r, r, paint); // Prepare the background Paint paintBg = new Paint(); paintBg.setColor(borderColor); paintBg.setAntiAlias(true); // Draw the background circle canvas.drawCircle(r, r, r, paintBg); // Draw the image smaller than the background so a little border will be seen canvas.drawCircle(r, r, r - borderRadius, paint); squared.recycle(); return result; } @Override public String getId() { return getClass().getName(); }} 

Encontré una solución fácil y simple para agregar borde sobre vista de imagen en el que el color desea establecer o agregar degradado sobre la imagen.

PASOS:

  1. Tome un diseño de marco y agregue dos imágenes. Puede establecer el tamaño según su requisito. Para imgPlaceHolder , necesita una imagen o color blanco que desee establecer.
     
  1. Después de colocar este código en el archivo xml, ponga debajo de la línea en el archivo java.

     Glide.with(this).load(R.drawable.image01).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPic) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), resource); circularBitmapDrawable.setCircular(true); imageView.setImageDrawable(circularBitmapDrawable); } }); Glide.with(this).load(R.drawable.white_bg).asBitmap().centerCrop().into(new BitmapImageViewTarget(imgPlaceHolder) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(getResources(), resource); circularBitmapDrawable.setCircular(true); imgTemp2.setImageDrawable(circularBitmapDrawable); } }); 

Esto hará que el borde de la vista de la imagen simplemente no tenga relleno ni margen adicional.

NOTA : la imagen blanca es obligatoria para el borde; de ​​lo contrario, no funcionará.

Feliz encoding 🙂

Simplemente puede llamar al constructor RoundedCornersTransformation, que tiene la entrada cornerType enum. Me gusta esto:

 Glide.with(context) .load(bizList.get(position).getCover()) .bitmapTransform(new RoundedCornersTransformation(context,20,0, RoundedCornersTransformation.CornerType.TOP)) .into(holder.bizCellCoverImg); 

pero primero tienes que agregar Transformaciones Glide a tu proyecto.

Aquí hay una forma más modular y más limpia de crear un círculo en tu bitmap en Glide:

  1. Cree una transformación personalizada ampliando BitmapTransformation luego anule el método de transform esta manera:

Para Glide 4.xx

 public class CircularTransformation extends BitmapTransformation { @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(null, toTransform); circularBitmapDrawable.setCircular(true); Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight); circularBitmapDrawable.draw(canvas); return bitmap; } @Override public void updateDiskCacheKey(MessageDigest messageDigest) {} } 

Para Glide 3.xx

 public class CircularTransformation extends BitmapTransformation { @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(null, toTransform); circularBitmapDrawable.setCircular(true); Bitmap bitmap = pool.get(outWidth, outHeight, Bitmap.Config.ARGB_8888); Canvas canvas = new Canvas(bitmap); circularBitmapDrawable.setBounds(0, 0, outWidth, outHeight); circularBitmapDrawable.draw(canvas); return bitmap; } @Override public String getId() { // Return some id that uniquely identifies your transformation. return "CircularTransformation"; } } 
  1. Luego configúralo en el generador de Glide donde lo necesites:
 Glide.with(yourActivity) .load(yourUrl) .asBitmap() .transform(new CircularTransformation()) .into(yourView); 

Espero que esto ayude 🙂

Con la biblioteca de planeo puedes usar este código:

 Glide.with(context) .load(imageUrl) .asBitmap() .placeholder(R.drawable.user_pic) .centerCrop() .into(new BitmapImageViewTarget(img_profPic) { @Override protected void setResource(Bitmap resource) { RoundedBitmapDrawable circularBitmapDrawable = RoundedBitmapDrawableFactory.create(context.getResources(), resource); circularBitmapDrawable.setCircular(true); img_profPic.setImageDrawable(circularBitmapDrawable); } }); 

Lo estaba buscando antes y lo hice de la manera más fácil, espero que te guste esto.

  //crete this method into your Utils class and call this method wherever you want to use. //you can set these placeHolder() and error() image static as well. I made it as comment inside this method, then no need to use [placeHolderUrl and errorImageUrl] parameters. remove it from this method. public static void loadImage(final Activity context, ImageView imageView, String url, int placeHolderUrl, int errorImageUrl) { if (context == null || context.isDestroyed()) return; //placeHolderUrl=R.drawable.ic_user; //errorImageUrl=R.drawable.ic_error; Glide.with(context) //passing context .load(getFullUrl(url)) //passing your url to load image. .placeholder(placeHolderUrl) //this would be your default image (like default profile or logo etc). it would be loaded at initial time and it will replace with your loaded image once glide successfully load image using url. .error(errorImageUrl)//in case of any glide exception or not able to download then this image will be appear . if you won't mention this error() then nothing to worry placeHolder image would be remain as it is. .diskCacheStrategy(DiskCacheStrategy.ALL) //using to load into cache then second time it will load fast. .transform(new CircleTransform(context))//this CircleTransform class help to crop an image as circle. .animate(R.anim.fade_in) // when image (url) will be loaded by glide then this face in animation help to replace url image in the place of placeHolder (default) image. .fitCenter()//this method help to fit image into center of your ImageView .into(imageView); //pass imageView reference to appear the image. } 

CircleTransform.java

  public class CircleTransform extends BitmapTransformation { public CircleTransform(Context context) { super(context); if(context==null) return; } private static Bitmap circleCrop(BitmapPool pool, Bitmap source) { if (source == null) return null; int size = Math.min(source.getWidth(), source.getHeight()); int x = (source.getWidth() - size) / 2; int y = (source.getHeight() - size) / 2; Bitmap squared = Bitmap.createBitmap(source, x, y, size, size); Bitmap result = pool.get(size, size, Bitmap.Config.ARGB_8888); if (result == null) { result = Bitmap.createBitmap(size, size, Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(result); Paint paint = new Paint(); paint.setShader(new BitmapShader(squared, BitmapShader.TileMode.CLAMP, BitmapShader.TileMode.CLAMP)); paint.setAntiAlias(true); float r = size / 2f; canvas.drawCircle(r, r, r, paint); return result; } @Override protected Bitmap transform(BitmapPool pool, Bitmap toTransform, int outWidth, int outHeight) { return circleCrop(pool, toTransform); } @Override public String getId() { return getClass().getName(); } } 

fade_in.xml para fundido en la animación.

     

finalmente para llamar a este método.

 Utils.loadImage(YourClassName.this,mImageView,url,R.drawable.ic_user,R.drawable.ic_error); 
 private void setContactImage(@NonNull ViewHolder holder, ClsContactDetails clsContactDetails) { Glide.with(context).load(clsContactDetails.getPic()) .apply(new RequestOptions().centerCrop().circleCrop().placeholder(R.mipmap.ic_launcher)).into(holder.ivPersonImage); } 

Glide versión 4.6.1

 Glide.with(context) .load(url) .apply(RequestOptions.bitmapTransform(new CircleCrop())) .into(imageView); 

Tienes que usar CircularImageView para mostrar ese tipo de imagen …

Está utilizando la biblioteca Glide que solía cargar imágenes.

Cree un ClassFile en su proyecto y cárguelo en Imageview … y obtendrá el resultado deseado …

Intenta seguir el código …

XML

   

CircularImageView.java

 public class CircularImageView extends ImageView { private int borderWidth; private int canvasSize; private Bitmap image; private Paint paint; private Paint paintBorder; public CircularImageView(final Context context) { this(context, null); } public CircularImageView(Context context, AttributeSet attrs) { this(context, attrs, R.attr.circularImageViewStyle); } public CircularImageView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); // init paint paint = new Paint(); paint.setAntiAlias(true); paintBorder = new Paint(); paintBorder.setAntiAlias(true); // load the styled attributes and set their properties TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0); if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) { int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f); setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize)); setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE)); } if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false)) addShadow(); } public void setBorderWidth(int borderWidth) { this.borderWidth = borderWidth; this.requestLayout(); this.invalidate(); } public void setBorderColor(int borderColor) { if (paintBorder != null) paintBorder.setColor(borderColor); this.invalidate(); } public void addShadow() { setLayerType(LAYER_TYPE_SOFTWARE, paintBorder); paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK); } @Override public void onDraw(Canvas canvas) { // load the bitmap image = drawableToBitmap(getDrawable()); // init shader if (image != null) { canvasSize = canvas.getWidth(); if(canvas.getHeight() 

Nota :

Puedes usar

 CircularImageView imgIcon = (CircularImageView)findViewById(R.id.imageview); 

o

 ImageView imgIcon = (ImageView)findViewById(R.id.imageview); 

no afectará a sus otras bibliotecas ... no tiene que cambiar su código para descargar imágenes o cualquier otra cosa ... simplemente se puede definir usando XML también ...