Geek Answers Handbook

Corners ImgeView, built into CardView, has no radius, such as CardView corners on Android

I am developing an Android application. In my application, I use CardView and ImageView together. But I had a problem when designing ImageView inside CardView . The problem is the radius radius of the ImageView radius. See my script below.

I have an xml layout for an adapter element like this.

 <?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>

As you can see, I set the angular radius from CardView to 5dp and ImageView with the width of its parent CardView . The problem is that the top corners of ImageView not curved like its parent CardView corner.

This is a screenshot.

enter image description here

Typically, the corners of CardView child views CardView automatically bent like its parent angles if they match the parent CardView . Right? So why is my ImageView not working? Please, what happened to my code? How can I fix this please?

+6
source share
2 answers

So this is the usual behavior on pre lollipop. Here are the steps to fix it:

Step 1: add the following attributes to your cardView

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

Step 2: use your own ImageView that rounds the top borders:

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

Step 3: just replace ImageView in xml with RoundedTopImageView

Step 4: use this in your code as a regular image, for example using Picasso:

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

EDIT: added convertDpToPixel function

Sorry, I forgot to add this, which is part of the Util class, which you can add anywhere (in my case in the DisplayUtils class):

 public static int convertDpToPixel(int dp) { DisplayMetrics displayMetrics = Resources.getSystem().getDisplayMetrics(); return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, dp, displayMetrics); }
+2
source

Step 1: add the dependency at the application level build.gradle

 compile 'com.makeramen:roundedimageview:2.2.1'

Step 2: in CardView xml code:

 <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/di_card_container" android:layout_height="wrap_content" android:layout_width="match_parent" android:layout_marginTop="5dp" android:layout_marginLeft="5dp" android:layout_marginRight="5dp" app:cardCornerRadius="5dp" app:cardElevation="4dp">

Step 3 in ImageView:

  <com.makeramen.roundedimageview.RoundedImageView android:id="@+id/di_iv_image" android:layout_width="match_parent" android:layout_height="wrap_content" android:scaleType="centerCrop" android:layout_alignParentTop="true" app:riv_corner_radius_top_left="5dp" app:riv_corner_radius_top_right="5dp"/>

I hope this helps

-one
source

More articles:


All Articles