Transparent background on CardView - Android

Question

I want to do transparent background on CardView. I know backgroundColor but i have image on my Layout.

Do you know how do it? Or something which work as cardview but i will set a transparent background?

Regards

DId you try `android:background="@android:color/transparent"` — Psypher, Feb 20 '15 at 12:58
android:background="@android:color/transparent" dont work I dont use backgroundColor because it has not option of transparent — mac229, Feb 20 '15 at 13:09
I had the same problem, could NOT figure out how to make it transparent. — Tyler Pfaff, Mar 12 '15 at 20:38

Chris Stillwell · Accepted Answer · 2016-06-02T14:11:37.230

211

Setup your CardView to use the cardBackgroundColor attribute to remove color and cardElevation attribute to remove the drop shadow. For example:

<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:id="@+id/myCardView"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    card_view:cardBackgroundColor="@android:color/transparent"
    card_view:cardElevation="0dp">

For a full list of supported attributes see here: https://developer.android.com/reference/android/support/v7/widget/CardView.html

If you are using an older API, you will need to call these two functions on your CardView instead:

myCardView.setCardBackgroundColor(Color.TRANSPARENT);
myCardView.setCardElevation(0);

edited Jun 02 '16 at 14:11

answered Apr 20 '15 at 14:38

Chris Stillwell

10,266
10
67
77

hi, it works, could you tell me the difference between android: and card_view: namespaces? – user3290180 Oct 17 '15 at 10:16
It is not working for api 19 but working for api 21. How too do it for lower APIs – Muneeb Mirza Jun 02 '16 at 07:21
2

@MuneebMirza call `setCardElevation()` and `setCardBackgroundColor()` from your code on you `CardView` See my edit. – Chris Stillwell Jun 02 '16 at 14:11
1

ok i tried this answer and it worked :) http://stackoverflow.com/questions/34810447/cardview-corner-background-not-transparent?rq=1 – Muneeb Mirza Jun 03 '16 at 06:12
I tried to set `@null` but it didn't work, any idea? – Gokhan Arik Jul 20 '16 at 08:48
I've had issue with setting black color with 20% opacity to card view, had line across view in center of it with different color. What solved this is to set elevation to 0dp and it disappeared. – adi9090 Sep 05 '19 at 08:16
it should be `myCardView.setCardElevation(0f);` because this method requires a float. – Nelson Almendra Feb 03 '20 at 17:18
@ChrisStillwell I need transparent bg but with shadow how to achieve that – Maveňツ Jun 22 '20 at 08:24
To add to this, if you want a card border switch to `MaterialCardView` and define `strokeWidth` and `strokeColor`. – Prince Aug 09 '20 at 15:52

score 18 · Answer 2 · edited Aug 17 '21 at 08:20

in SDK version 21 or higher steps to make Android CardView transparent.

Set android:backgroundTint="@android:color/transparent". This is CardView attribute to set background.
Set android:cardElevation="0dp" to remove the shadow.

For example, here is small xml code to create transparent CardView

<androidx.cardview.widget.CardView
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:cardBackgroundColor="@android:color/transparent"
        app:cardElevation="0dp" />

score 8 · Answer 3 · edited Mar 07 '18 at 07:18

In my case, I used the attribute android:backgroundTint="@color/some_color",it is only used en API level 21 and higher. And color #50000000 for example.

<android.support.v7.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        card_view:cardCornerRadius="3dp"
        app:cardElevation="0dp"
        android:backgroundTint="@color/negro_label"
        >

score 4 · Answer 4 · edited Mar 07 '18 at 07:19

use app:cardBackgroundColor="@android:color/transparent"

<android.support.v7.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="20dp"
    android:layout_marginLeft="20dp"
    android:layout_marginRight="20dp"
    android:layout_marginTop="10dp"
    app:cardCornerRadius="16dp"
    app:cardElevation="16dp"
    app:cardBackgroundColor="@android:color/transparent" >

<--inside cardlayout-->

    </android.support.v7.widget.CardView>

score 3 · Answer 5 · edited Mar 07 '18 at 07:18

3

This should work on API 17

cardView.setBackgroundColor(ContextCompat.getColor(getContext(), android.R.color.transparent));

edited Mar 07 '18 at 07:18

Gowthaman M

8,057
8
35
54

answered Sep 08 '16 at 14:26

Cristian Cardoso

665
6
11

score 1 · Answer 6 · answered Dec 17 '20 at 13:57

1

Just add background color app:cardBackgroundColor="#0000"

<androidx.cardview.widget.CardView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:cardBackgroundColor="#0000">

answered Dec 17 '20 at 13:57

user12091113

51
1
5

Programmer Mahin · Answer 7 · 2022-09-27T14:54:48.987

You must have cardView to make image circle shape

       <androidx.cardview.widget.CardView
            android:layout_width="50dp"
            android:layout_height="50dp"
            app:cardCornerRadius="25dp"
            android:layout_centerHorizontal="true"
            android:layout_centerVertical="true"
            android:elevation="0dp"
            app:cardBackgroundColor="#00424242"
            >

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:src="@drawable/play_icon"
                android:padding="5dp"
                android:background="#19000000"
                android:contentDescription="TODO" />

        </androidx.cardview.widget.CardView>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — Community, Oct 01 '22 at 14:44

score 0 · Answer 8 · answered Sep 01 '23 at 15:31

What I wanted was to have a textview inside a cardview but I wanted the back of the cardview to be transparent. I solved it this way:

    <androidx.cardview.widget.CardView
        android:id="@+id/cardView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        app:cardBackgroundColor="@color/semiTransparentColorr"
        app:cardUseCompatPadding="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">


        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@drawable/cardview_stroke"
            android:padding="16dp">

            <TextView
                android:id="@+id/textView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Gold"
                android:textSize="12sp" />


        </LinearLayout>
    </androidx.cardview.widget.CardView>

First you need to set the value of the background color of the cardview to #1AFFFFFF (semiTransparentColorr). Then we give cardview_stroke.xml as background to linearlayout. cardview_stroke.xml codes should be like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="@color/semiTransparentColorr"/>
    <stroke android:width="1dp" android:color="@color/black"></stroke>
    <corners android:radius="8dp"/>
</shape>

Transparent background on CardView - Android

8 Answers8

Linked