CODEWITHSUNDEEP
androidandroid-cardview
Vedant
Vedant

Reputation: 468

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

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?

Upvotes: 10

Views: 57101

Answers (7)

Dev Sagar
Dev Sagar

Reputation: 21

Try to set background in your linear layout Like this :

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/googleshape1"
        android:orientation="horizontal">

Upvotes: 0

Ali Hassan
Ali Hassan

Reputation: 305

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>

Upvotes: 4

morteza naji
morteza naji

Reputation: 51

I know its to late for answer but i have easy and smart way for you make a card view and then make another viewgroup in it then add backgroundTint for your card view and put the opacity to 0 and then set background image for your other layout you just define in your card view.

Upvotes: 1

Kshitij Jain
Kshitij Jain

Reputation: 51

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

Upvotes: 4

diegoveloper
diegoveloper

Reputation: 103451

Did you try this?

card1.setBackgroundResource(R.drawable.yourimage);

Upvotes: 4

Ashishkumar Mouria
Ashishkumar Mouria

Reputation: 131

  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.

Upvotes: 3

Tomin B Azhakathu
Tomin B Azhakathu

Reputation: 2686

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

Upvotes: 28

Related Questions