Corners ImgeView fit dentro de CardView no tiene radio como las esquinas de CardView en Android

Estoy desarrollando una aplicación para Android. En mi aplicación estoy usando CardView y ImageView juntos. Pero tengo un problema en el diseño de ImageView dentro de CardView . El problema es con el radio de radio de esquina de ImageView . Por favor, vea mi escenario a continuación.

Tengo la disposición del xml para el artículo del adaptador como esto.

 <?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" card_view:cardCornerRadius="5dp" android:layout_width="match_parent" android:id="@+id/di_card_container" android:layout_height="wrap_content"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ImageView android:id="@+id/di_iv_image" android:scaleType="centerCrop" android:layout_width="match_parent" android:layout_height="wrap_content" /> <RelativeLayout android:padding="10dp" android:layout_below="@id/di_iv_image" android:layout_alignParentLeft="true" android:layout_alignParentBottom="true" android:id="@+id/di_name_container" android:layout_width="match_parent" android:layout_height="wrap_content"> <TextView android:textSize="15dp" android:textColor="@color/textColorPrimary" android:id="@+id/di_tv_name" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </RelativeLayout> </RelativeLayout> </android.support.v7.widget.CardView> 

Como usted puede ver CardView , el radio de la esquina de CardView a 5dp y el ImageView con está cabido a la anchura de su CardView principal. El problema es que ambas esquinas superiores de ImageView no se doblan como la esquina de CardView .

Esta es la captura de pantalla

Introduzca aquí la descripción de la imagen

Normalmente, las esquinas de las vistas secundarias de CardView se doblan automáticamente como sus esquinas originales si se ajustan a CardView padre. ¿Derecha? ¿Por qué mi ImageView no funciona? Por favor, ¿qué está mal con mi código? ¿Cómo puedo solucionarlo por favor?

Así que este es un comportamiento común en pre lollipop. Estos son los pasos para solucionarlo:

Paso 1: Agregue los siguientes atributos a su cardView

 card_view:cardUseCompatPadding="true" card_view:cardPreventCornerOverlap="false" card_view:cardCornerRadius="10dp" 

Paso 2: Utilice un ImageView personalizado que redondea sus bordes superiores:

 public class RoundedTopImageView extends ImageView { private Paint mPaint; private Path mPath; private Bitmap mBitmap; private Matrix mMatrix; private int mRadius = DisplayUtils.convertDpToPixel(10); private int mWidth; private int mHeight; private Drawable mDrawable; public RoundedTopImageView(Context context) { super(context); init(); } public RoundedTopImageView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public RoundedTopImageView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } private void init() { mPaint = new Paint(); mPaint.setColor(Color.WHITE); mPath = new Path(); } @Override public void setImageDrawable(Drawable drawable) { mDrawable = drawable; if (drawable == null) { return; } mBitmap = drawableToBitmap(drawable); int bDIWidth = mBitmap.getWidth(); int bDIHeight = mBitmap.getHeight(); //Fit to screen. float scale; if ((mHeight / (float)bDIHeight) >= (mWidth / (float)bDIWidth)){ scale = mHeight / (float)bDIHeight; } else { scale = mWidth / (float)bDIWidth; } float borderLeft = (mWidth - (bDIWidth * scale)) / 2; float borderTop = (mHeight - (bDIHeight * scale)) / 2; mMatrix = getImageMatrix(); RectF drawableRect = new RectF(0, 0, bDIWidth, bDIHeight); RectF viewRect = new RectF(borderLeft, borderTop, (bDIWidth * scale) + borderLeft, (bDIHeight * scale) + borderTop); mMatrix.setRectToRect(drawableRect, viewRect, Matrix.ScaleToFit.CENTER); invalidate(); } private Bitmap drawableToBitmap(Drawable drawable) { Bitmap bitmap; if (drawable instanceof BitmapDrawable) { BitmapDrawable bitmapDrawable = (BitmapDrawable) drawable; if(bitmapDrawable.getBitmap() != null) { return bitmapDrawable.getBitmap(); } } if(drawable.getIntrinsicWidth() <= 0 || drawable.getIntrinsicHeight() <= 0) { bitmap = Bitmap.createBitmap(1, 1, Bitmap.Config.ARGB_8888); // Single color bitmap will be created of 1x1 pixel } else { bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(), drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888); } Canvas canvas = new Canvas(bitmap); drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight()); drawable.draw(canvas); return bitmap; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); mWidth = MeasureSpec.getSize(widthMeasureSpec); mHeight = MeasureSpec.getSize(heightMeasureSpec); if ((mDrawable != null) && (mHeight > 0) && (mWidth > 0)) { setImageDrawable(mDrawable); } } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (mBitmap == null) { return; } canvas.drawColor(Color.TRANSPARENT); mPath.reset(); mPath.moveTo(0, mRadius); mPath.lineTo(0, canvas.getHeight()); mPath.lineTo(canvas.getWidth(), canvas.getHeight()); mPath.lineTo(canvas.getWidth(), mRadius); mPath.quadTo(canvas.getWidth(), 0, canvas.getWidth() - mRadius, 0); mPath.lineTo(mRadius, 0); mPath.quadTo(0, 0, 0, mRadius); canvas.drawPath(mPath, mPaint); canvas.clipPath(mPath); canvas.drawBitmap(mBitmap, mMatrix, mPaint); } } 

Paso 3: Simplemente reemplace su ImageView en su xml con el RoundedTopImageView

Paso 4: Utilícelo en su código como una imagen normal, por ejemplo, con Picasso:

 RoundedTopImageView image = (RoundedTopImageView) findViewById(R.id.di_iv_image); Picasso.with(context) .load("Some cool Url") .into(image); 

EDIT: Añadido la función convertDpToPixel

Lo siento, me olvidé de añadir esto, que es parte de una clase Util que puede agregar en cualquier lugar que desee (en mi caso en la clase DisplayUtils ):

 public static int convertDpToPixel(int dp) { DisplayMetrics displayMetrics = Resources.getSystem().getDisplayMetrics(); return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics); } 
  • Cómo mostrar la imagen de YUV en Android
  • Cambiar el tamaño de ImageView en tiempo de ejecución mediante un botón - Android
  • Cómo hacer un ImageView con esquinas redondeadas?
  • ¿Cómo puedo crear múltiples menús contextuales?
  • ¿Cuál es la manera más eficiente de cargar mi archivo JPG almacenado en ImageView?
  • Aplicar colorMatrix colorFilter en parte de imageView con una máscara
  • Cargador de imágenes asíncronas en listview
  • Obtener Bitmap de ImageView cargado con Picasso
  • Galaxia s4 y tal vez todos los teléfonos HD? Fuera de error de memoria de inflado de diseño
  • Ajuste ImageView sin alargar la imagen
  • Hacer una imagen circular con borde circular blanco
  • FlipAndroid es un fan de Google para Android, Todo sobre Android Phones, Android Wear, Android Dev y Aplicaciones para Android Aplicaciones.