Android CardView transparent background

Question

I want to create a cardview where the cards have simple one photo and an upper right bottom to remove them. So in order to the bottom be completelly visible i need to make the card bigger than the photo, but i dont want to show it. So i try to set the background to transparent and at design time everything seams fine

This is a screenshot of android studio at design time:
A) shows how the card looks like
B) is the same card when i click on it, showing that the card is a bit bigger than the photo itself (the blue borders are the normal android studio border when you select an element)

but during the runtime the cards are getting some weird elevation:

Here goes the code:

influencer_card.xml

   <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cardView"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_gravity="center"
        android:layout_marginBottom="@dimen/smallMargin"
        android:elevation="0dp"
        card_view:cardBackgroundColor="@android:color/transparent"
        card_view:cardCornerRadius="0dp">


        <ImageView
            android:layout_width="@dimen/influencerCardSize"
            android:layout_height="@dimen/influencerCardSize"
            android:layout_gravity="bottom"
            android:scaleType="centerCrop"
             />

        <TextView
            android:layout_width="@dimen/influencerCardSize"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:alpha="0.7"

            android:background="@color/colorPrimaryDark"
            android:gravity="center"
         />

        <ImageButton

            android:layout_width="@dimen/removeButtonSize"
            android:layout_height="@dimen/removeButtonSize"
            android:layout_gravity="right|top"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/ic_remove" />

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

new_influencers.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">



    <android.support.v7.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="@dimen/influencersViewHeight"
        android:layout_gravity="center"

        android:layout_margin="@dimen/smallMargin"
        android:background="@android:color/transparent"
        android:elevation="0dp"
        android:scrollbars="vertical"
        android:visibility="visible" />




</LinearLayout>

I don't change any style related thing on the java code...

how can i remove this annoying elevation

Try `card_view:cardElevation="0dp"` instead of `android:cardElevation="0dp"`. — Shashanth, Jul 12 '18 at 03:54
try this `app:cardBackgroundColor="@android:color/transparent"` — Aanal Shah, Jul 12 '18 at 04:08

score 0 · Answer 1 · answered Jul 12 '18 at 03:28

If you don't want the elevation, you should consider not using CardView since CardView brings the elevation by default.

Instead, replace the CardView with a container like ConstraintLayout or RelativeLayout. These options don't carry any elevation by default, are transparent, and you can still add foreground ripple effects to them if you wish to do so.

score 0 · Answer 2 · answered Jul 12 '18 at 05:08

0

want to card make invisible ,make "alpha" attribute 1

answered Jul 12 '18 at 05:08

Muhammad Ashfaq

2,359
5
20
46

score 0 · Answer 3 · answered Jul 12 '18 at 05:15

0

If you want to remove elevation in CardView,

Use app:cardElevation = "0dp" instead of android:cardElevation="0dp".

answered Jul 12 '18 at 05:15

mel

199
1
10

score 0 · Answer 4 · answered Jul 12 '18 at 05:43

Use card_view:cardElevation="0dp" instead of android:elevation="0dp". Hope this helps you

 <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cardView"
        android:layout_width="160dp"
        android:layout_height="160dp"
        android:layout_below="@+id/linearLayout"
        android:layout_centerHorizontal="true"
        card_view:cardElevation="0dp"
        card_view:cardBackgroundColor="@android:color/transparent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_gravity="bottom"
            android:layout_marginEnd="10dp"
            android:layout_marginTop="10dp"
            android:src="@drawable/img"
            android:scaleType="centerCrop"
            android:layout_marginRight="10dp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:alpha="0.7"
            android:text="text"
            android:layout_marginEnd="10dp"
            android:background="@color/colorPrimaryDark"
            android:gravity="center"
            android:layout_marginRight="10dp" />

        <ImageView
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="right|top"
            android:background="?android:attr/selectableItemBackground"
            android:src="@drawable/img" />

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

You can use `ImageView` instead of `ImageButton` – MashukKhan Jul 12 '18 at 05:44 — MashukKhan, Jul 12 '18 at 05:44

Android CardView transparent background

4 Answers4