Appcompat CardView y Picasso sin esquinas redondeadas

No sé dónde exactamente debería dirigir este problema, si es mi culpa, hay algo en Picasso Lib Wrong o en la Biblioteca Cardview.

Básicamente tengo un CardView contiene una imagen (Full Card Covered) y una superposición de TextView .

Al ejecutar el código en un dispositivo Android 5.0 , todo funciona bien y la imagen obtiene sus esquinas redondeadas .

Sin embargo, si lo ejecuto en un dispositivo pre 5.0 , la imagen se superpone al Cardlayout y no tiene esquinas redondeadas.

Usted puede ver una comparación en esta imagen: comparación

Éstos son algunos fragmentos de código:

Layout_row.xml

 <RelativeLayout android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/pandaImage" android:layout_width="match_parent" android:layout_height="200dp" android:layout_centerInParent="true" android:scaleType="centerCrop" /> <TextView android:id="@+id/pandaName" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignBottom="@+id/pandaImage" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:background="@color/photo_tint" android:clickable="true" android:focusable="true" android:gravity="center" android:textColor="@android:color/white" android:textSize="24sp" /> </RelativeLayout> 

And the Recycler Adapter Cargando imagen:

 @Override public void onBindViewHolder(ViewHolder viewHolder, int i) { Photo p = photos.get(i); Picasso.with(mContext).load(p.getUrl()).fit().into(viewHolder.mImage); viewHolder.mPandaName.setText(p.getTitle()); } 

Según los documentos, esto como diseñado:

Debido a la naturaleza costosa del recorte de esquina redondeado, en las plataformas antes de L, CardView no acorta a sus hijos que se cruzan con las esquinas redondeadas. En su lugar, agrega relleno para evitar dicha intersección (consulte setPreventCornerOverlap (boolean) para cambiar este comportamiento).

Vea los CardView para más información.

Como @kcoppock mencionado, esto es por diseño.

Esto es lo que haría en esta situación.

1) Puede utilizar la interfaz de transformación de Picasso para especificar la transformación personalizada para su imagen (en nuestro caso, la imagen con esquinas redondeadas)

2) Aplicar esta transformación a la solicitud de Picasso en dispositivos pre-L

3) Puesto que CardView añade un poco de margen para la imagen – deshágase de ella en dispositivos pre-L llamando a setPreventOverlap(false)

Volver al código:

Transformación personalizada:

 public class RoundedTransformation implements com.squareup.picasso.Transformation { private final int radius; private final int margin; public RoundedTransformation(final int radius, final int margin) { this.radius = radius; this.margin = margin; } @Override public Bitmap transform(final Bitmap source) { final Paint paint = new Paint(); paint.setAntiAlias(true); paint.setShader(new BitmapShader(source, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP)); Bitmap output = Bitmap.createBitmap(source.getWidth(), source.getHeight(), Config.ARGB_8888); Canvas canvas = new Canvas(output); canvas.drawRoundRect(new RectF(margin, margin, source.getWidth() - margin, source.getHeight() - margin), radius, radius, paint); if (source != output) { source.recycle(); } return output; } @Override public String key() { return "rounded(radius=" + radius + ", margin=" + margin + ")"; } } 

Picasso:

 //feel free to play with radius to match your CardView Picasso.with(mContext).load(p.getUrl()).transform(new RoundedTransformation(12, 0)).fit().into(viewHolder.mImage); 

Si desea tener una solución global para ese problema, puede utilizar Carbon CardView . Corrige correctamente su contenido en las esquinas redondeadas de todos los dispositivos de vuelta a Froyo. Vea la imagen:

Introduzca aquí la descripción de la imagen

Funciona para mí así:

  1. Reemplace el ImageView por RoundedImageView ( https://github.com/vinc3m1/RoundedImageView ).
  2. Establezca el atributo riv_corner_radius en el RoundedImageView para que sea igual al de la esquina de CardView .
  3. Defina cardPreventCornerOverlap como false en CardView ( app:cardPreventCornerOverlap="false" ).
  4. Se ve igual en L y pre-L ahora.

Utilice el siguiente código.

Importante: no establezca el fondo para ImageView en XML.

 <android.support.v7.widget.CardView android:layout_width="match_parent" android:layout_height="130dp" app:cardCornerRadius="5dp" app:cardElevation="0dp" app:cardUseCompatPadding="true"> <RelativeLayout android:id="@+id/rl_target_marry" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentLeft="true" android:layout_alignParentStart="true" android:layout_below="@+id/textView2" > <ImageView android:id="@+id/img_target_marry" android:layout_width="match_parent" android:layout_height="match_parent" android:scaleType="fitXY" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:foreground="?attr/selectableItemBackground"> <TextView android:id="@+id/textView" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentEnd="true" android:layout_alignParentRight="true" android:layout_centerVertical="true" android:layout_gravity="right|center_vertical" android:layout_marginRight="16dp" android:text="Marry" android:textColor="@color/colorWhite" android:textSize="28sp"/> </FrameLayout> </RelativeLayout> </android.support.v7.widget.CardView> 
  • Imagen de carga de Picasso en GifImageView (biblioteca android-gif-drawable)
  • Picasso imagen cargando
  • ¿Picasso aplica opciones de redimensionamiento durante fetch ()?
  • ¿Cómo integrar Google Drive con Picasso en Android?
  • ¿Puedo cargar una imagen con Picasso en la barra de acción?
  • Uso de la biblioteca picasso con una vista de imagen circular
  • Picasso cargando las miniaturas de todas las fotos del teléfono
  • Cómo obtener ImageView negro utilizando Picasso y Glide
  • Picasso onBitmapLoaded nunca llamado
  • Solución local de caché de imágenes para Android: Square Picasso vs Universal Image Loader
  • ¿Cómo uso la caché de disco en Picasso?
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.