CardView cardElevation draws random square inside of CardView

Question

A simple problem, I used a CardView to add elevation to a Button but when assigning cardElevation , then the CardView draws a box inside of itself, I tried switching the elevation and other attributes and I can minimize the effect of it by increasing the cardElevation but that is not a solution.

Here is the CardView from the XML.

  <androidx.cardview.widget.CardView
            android:layout_width="38sp"
            android:layout_height="38sp"
            app:cardElevation="5sp"
            android:layout_gravity="end"
            android:layout_marginTop="60sp"
            android:layout_marginRight="12sp"
            android:layout_marginEnd="12sp"
            app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>

The CardView in the app. (The box in the upper right corner)

The whole XML file, the last CardView is the one on the image.

<?xml version="1.0" encoding="utf-8"?>
<com.flipboard.bottomsheet.BottomSheetLayout
    android:id="@+id/bottomsheet"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/map"
    android:name="com.google.android.gms.maps.SupportMapFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".ui.map.MapFragment">

    <LinearLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        android:orientation="vertical">

    <androidx.cardview.widget.CardView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:cardElevation="20dp"
        android:layout_gravity="end"
        android:layout_marginTop="60dp"
        android:layout_marginRight="12dp"
        android:layout_marginEnd="12dp"
        app:cardBackgroundColor="#97FFFFFF">

      <ImageButton
          android:layout_width="38dp"
          android:layout_height="38dp"
          android:padding="1dp"
          android:src="@drawable/ic_baseline_refresh_24"
          android:background="#00FFFFFF"
          android:elevation="10dp"
          android:id="@+id/btn_reset_map"/>
    </androidx.cardview.widget.CardView>
        
        <androidx.cardview.widget.CardView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cardElevation="20dp"
            android:layout_gravity="end"
            android:layout_marginTop="10dp"
            android:layout_marginRight="12dp"
            android:layout_marginEnd="12dp"
            app:cardBackgroundColor="#97FFFFFF">

            <ImageButton
                android:layout_width="38dp"
                android:layout_height="38dp"
                android:padding="1dp"
                android:src="@drawable/ic_baseline_layers_24"
                android:background="#00FFFFFF"
                android:elevation="10dp"
                android:id="@+id/btn_layer_map"/>
        </androidx.cardview.widget.CardView>

        <androidx.cardview.widget.CardView
            android:layout_width="38dp"
            android:layout_height="38dp"
            app:cardElevation="5dp"
            android:layout_gravity="end"
            android:layout_marginTop="40dp"
            android:layout_marginRight="12dp"
            android:layout_marginEnd="12dp"
            app:cardBackgroundColor="#97FFFFFF"></androidx.cardview.widget.CardView>

    </LinearLayout>
</fragment>

</com.flipboard.bottomsheet.BottomSheetLayout>

Why all of your unit in sp? Did you try changing them to dp? — skafle, Jun 03 '21 at 02:50
I've been using sp for no specific reason, now I read that sp is rather for the size of fonts and dp for all else. Having now tried it with dp as well, nothing changed, the square is still there. — Edward Aarma, Jun 03 '21 at 03:00
I wonder, how your xml is structured. What is the parent of cardview? Is it possible to share all code of the layout where that particular cardview is in? — skafle, Jun 03 '21 at 03:03
I added the xml file at the end of my question, the last CardView is the one displayed on the image. — Edward Aarma, Jun 03 '21 at 03:11
At first the map xml was created as a Fragment and I have not changed it. My knowledge on some concepts are lacking and I am not sure how to add the buttons and other parts into this layout so that they would be on top of the containing the map. — Edward Aarma, Jun 03 '21 at 03:54

Zain · Accepted Answer · 2021-06-03T03:34:28.467

1

You can set the CardView background color programmatically to the same color as the color set with app:cardBackgroundColor

CardView cardview = findViewById(R.id.cardview);
cardview.setBackgroundColor(ContextCompat.getColor(this, R.color.cardview_color));

And create this color in colors.xml

<color name="cardview_color">#97FFFFFF</color>

And add this id to the xml:

  <androidx.cardview.widget.CardView
      android:id="@+id/cardview"
      ....

Note: For some reason android:background="#97FFFFFF" doesn't work

edited Jun 03 '21 at 03:34

answered Jun 03 '21 at 03:14

Zain

37,492
7
60
84

1

The square inside the CardView issue is now fixed though it removed the cardCornerRadius and I can't seem to add that now. Also as an addition, if I have more CardViews, should each of these have the background color set in the same way? – Edward Aarma Jun 03 '21 at 04:00
@EdwardAarma You're right .. let me think of it – Zain Jun 03 '21 at 04:14
@EdwardAarma I guess you need to remove the opacity of the `app:cardBackgroundColor` color, this is the reason you see the inner square .. So you can set it like `app:cardBackgroundColor="#EDEDED"` This will make it opaque.. and cancel using `setBackgroundColor` that mentioned in the answer – Zain Jun 03 '21 at 04:23

score 1 · Answer 2 · edited May 12 '22 at 06:05

1

Setting android:outlineProvider="none" fixed the issue for me

edited May 12 '22 at 06:05

Vasily Kabunov

6,511
13
49
53

answered May 11 '22 at 13:20

Bhargav Bhansali

11
2

CardView cardElevation draws random square inside of CardView

2 Answers2