How to set a background image for a card in CardView?
You can do this without losing your cardcorner radius. Here's my XML :
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:background="@drawable/zoneback"
android:layout_height="match_parent"
tools:context=".kidzone">
<android.support.v7.widget.CardView
android:layout_marginTop="75dp"
android:id="@+id/quizcard"
android:elevation="15dp"
app:cardPreventCornerOverlap="false"
android:layout_width="match_parent"
app:cardCornerRadius="50dp"
android:layout_marginHorizontal="50dp"
android:layout_height="250dp">
<ImageView
android:layout_width="match_parent"
android:id="@+id/quizimage"
android:layout_height="match_parent" />
</android.support.v7.widget.CardView>
</LinearLayout>
You will have to create a custom Drawable
:
public class RoundCornerDrawable extends Drawable {
private final float mCornerRadius;
private final RectF mRect = new RectF();
//private final RectF mRectBottomR = new RectF();
//private final RectF mRectBottomL = new RectF();
private final BitmapShader mBitmapShader;
private final Paint mPaint;
private final int mMargin;
public RoundCornerDrawable(Bitmap bitmap, float cornerRadius, int margin) {
mCornerRadius = cornerRadius;
mBitmapShader = new BitmapShader(bitmap,
Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
mPaint = new Paint();
mPaint.setAntiAlias(true);
mPaint.setShader(mBitmapShader);
mMargin = margin;
}
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
mRect.set(mMargin, mMargin, bounds.width() - mMargin, bounds.height() - mMargin);
//mRectBottomR.set( (bounds.width() -mMargin) / 2, (bounds.height() -mMargin)/ 2,bounds.width() - mMargin, bounds.height() - mMargin);
// mRectBottomL.set( 0, (bounds.height() -mMargin) / 2, (bounds.width() -mMargin)/ 2, bounds.height() - mMargin);
}
@Override
public void draw(Canvas canvas) {
canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);
//canvas.drawRect(mRectBottomR, mPaint); //only bottom-right corner not rounded
//canvas.drawRect(mRectBottomL, mPaint); //only bottom-left corner not rounded
}
@Override
public int getOpacity() {
return PixelFormat.TRANSLUCENT;
}
@Override
public void setAlpha(int alpha) {
mPaint.setAlpha(alpha);
}
@Override
public void setColorFilter(ColorFilter cf) {
mPaint.setColorFilter(cf);
}
}
Finally, here's my activity code :
RoundCornerDrawable round = new RoundCornerDrawable(BitmapFactory.decodeResource(getResources(),R.drawable.quizcardback),
getResources().getDimension(R.dimen.cardview_radius), 0);
ImageView imageView=root.findViewById(R.id.quizimage);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
imageView.setBackground(round);
else
imageView.setBackgroundDrawable(round);
Image can't be set as Background Image For a Card View.But You can Use Background Color using setCardBackgroundColor(ContextCompat.getColor(this, R.color.colorPrimary))
If you want to set a background Image Inside Cardview Use Another Layout such as LinearLayout
, RelativeLayout
or any other Inside The CardView. And Add Background for that Layout. This is one of the easy way to set BackgroundImage for CardView