recyclerview - dependencia cardview android studio

Appcompat CardView y Picasso no tienen esquinas redondeadas

Question

No sé dónde Exactamente debo abordar este problema, si es mi culpa, hay algo en Picasso Lib Wrong o en la biblioteca de Cardview.

Básicamente tengo una CardView contiene una imagen (tarjeta completa cubierta) y una superposición de TextView .

Cuando se ejecuta 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 a Cardlayout y no tiene esquinas redondeadas.

Puedes ver una comparación en esta imagen:

Aquí hay 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>

Y el adaptador de reciclador cargando la 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());
}

Answer 1

Como mencionó @kcoppock, esto es por diseño.

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

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

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

3) Dado que CardView agrega un margen para la imagen, deshágase de ella en dispositivos pre-L llamando a setPreventOverlap(false)

De vuelta 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);

Answer 2

Funciona para mí así:

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

Answer 3

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

Debido a la naturaleza costosa del recorte de esquinas redondeadas, en plataformas antes de L, CardView no recorta sus elementos secundarios que se intersecan con esquinas redondeadas. En su lugar, agrega relleno para evitar dicha intersección (consulte setPreventCornerOverlap (booleano) para cambiar este comportamiento).

Ver los documentos de CardView para más información.

Answer 4

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

Answer 5

Usa el código de abajo.

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>