How to set a background image for a card in CardView?

Question

I have a card and want to add content to it. How should I add images and also Text to the card? Here is my xml code:

    <?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="ml.vedantk.app.god.MainActivity">

    <android.support.v7.widget.CardView
        android:id="@+id/card1"
        android:layout_width="364dp"
        android:layout_height="389dp"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="64dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</android.support.constraint.ConstraintLayout>

Here is the java file:

package ml.vedantk.app.god;

import android.support.annotation.ColorInt;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.CardView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        CardView card1 = (CardView)findViewById(R.id.card1);
        card1.setCardBackgroundColor(100);

    }
}

The card1.setCardBackgroundColor(100); also did not change the background color. So can anybody help me add an image?

Answer 1

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

Answer 2

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

Answer 3

1. In order to set background image of card, we have to add relative or LinearLayout.

2. Add RelativeLayout after Cardview declarations such that you can able to move elements within the cards. 3.Add the following code/Sample is as Follows

   android:layout_width="match_parent"
   android:layout_height="489dp"
   android:layout_margin="10dp"
   android:orientation="vertical"
   app:cardBackgroundColor="@color/cardview"
   app:cardCornerRadius="7dp"
   app:cardElevation="4dp"
   app:cardPreventCornerOverlap="false">
   <RelativeLayout
       android:layout_width="wrap_content"
       android:layout_height="match_parent"
       android:background="@drawable/background">
   

4.Where android:background="@drawable/background"> is my image name.

Answer 4

I am using the card background drawable as following.

<androidx.cardview.widget.CardView
            android:layout_width="100dp"
            android:layout_height="75dp"
            android:layout_margin="8dp"
            android:elevation="8dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:background="@drawable/event"></LinearLayout>
        </androidx.cardview.widget.CardView>