Cardview corner background not transparent

Question

I have a custom implementation of a CardView support widget but I can't seem to get the background for the corners transparent when I include it in my layout-file. However, if I simply place the CardView support widget in my layout-file it suddenly works. How can I get the corners transparent for my custom component?

This is the layout file for my custom implementation of the CardView:

view_card.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/view_card"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    style="@style/Custom.Widget.CardView">

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="@dimen/default_padding">

    <TextView
        android:id="@+id/view_mainText"
        style="@style/Custom.Widget.TextView.Header"
        android:textColor="@color/instruction_balloon_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:id="@+id/view_subText"
        android:textSize="@dimen/text_size_medium"
        android:textColor="@color/instruction_balloon_text"
        android:singleLine="false"
        android:text="Please remove white corners :-("
        android:textIsSelectable="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

styles.xml

<style name="Custom.Widget.CardView" parent="CardView">
    <item name="cardBackgroundColor">@color/card_backgroundColor</item>
    <item name="cardCornerRadius">12dp</item>
</style>

And this is my layout file that includes the two CardViews. The first one with the white corners and the second one that's basically the same layout as view_card.xml but without the white corners (transparent).

example.xml

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

    <some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

    <android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/view_card"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin"
        style="@style/Custom.Widget.CardView">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:padding="@dimen/default_padding">

            <TextView
                android:id="@+id/view_mainText"
                style="@style/Custom.Widget.TextView.Header"
                android:textColor="@color/instruction_balloon_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <TextView
                android:id="@+id/view_subText"
                android:textSize="@dimen/text_size_medium"
                android:textColor="@color/instruction_balloon_text"
                android:singleLine="false"
                android:text="I have no white corners :-)"
                android:textIsSelectable="true"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
    ... some other views
</LinearLayout>

Update 1

I tried Just89's solution, however it results in a crash on lower Android versions.

 android.graphics.drawable.ColorDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow

After a quick search I found the following post. android.graphics.drawable.ColorDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow

The answer suggests to set the background color using:setCardBackgroundColor. However this will bring back the white corners.

Update 2

The accepted answer will solve this problem, however it's not the preferred solution. I made a mistake when creating the custom CardView component that was causing these white corners. Check this answer to see what I did wrong.

Answer 1

add new style into styles.xml file similar this :

<style name="CardViewRadius">
    <item name="cardBackgroundColor">@color/colorGray</item>
    <item name="cardCornerRadius">18dp</item>
</style>

and use :

<android.support.v7.widget.CardView
        style="@style/CardViewRadius"
        android:layout_marginTop="15dip"
        android:layout_width="200dp"
        android:layout_height="100dp"
        android:layout_gravity="center_horizontal"/>

and result :

Answer 2

Use the following code, on a place where the context is available, in your custom implementation:

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

EDIT:

Use the following code for android versions lower then Lollipop to avoid the mentioned crash.

  if (android.os.Build.VERSION.SDK_INT < Build.VERSION_CODES.LOLLIPOP))
  {
     getBackground().setAlpha(0);
  }
  else
  {
     setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent));
  }

Answer 3

I was having similar issue with a darker area/background where the curved corners are as shown in this screenshot. .

I solved by setting the cardElevation to 0dp. This may not work for you if you need the shadow.

app:cardElevation="0dp"

Answer 4

After a few years I came to the conclusion that I was making a fundamental mistake when creating compound components.

When making a compound component that extends android.support.v7.widget.CardView the layout xml that's inflated shouldn't also contain a CardView. Basically you'll just be adding a CardView to another CardView which will result in the white corners behind my custom CardView.

The accepted answer will solve this problem. However it's not the perfect solution.

There are 2 ways to fix the real problem:

1. The compound view extends android.support.v7.widget.CardView and the layout xml doesn't contain android.support.v7.widget.CardView but a LinearLayout instead as the root. Styling will have to handled in the class.
2. The compound view extends LinearLayout and the layout xml contains android.support.v7.widget.CardView as the root.

I chose the 1st solution to fix this problem. I hope this helps people that made the same mistake.

Answer 5

It looks like you are creating a custom CardView form your layout file because of this

<some.private.namespace.CardView
        android:id="@+id/custom_card_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/default_margin" />

Your CardView might be extending something(say LinearLayout) and you may be creating another child view inside that parent View. So just try to set immediate parent of your card layout to transparent using

setBackground();

May be this helps.

Answer 6

You could try nesting your rounded corner view inside another view/layout. The outer view here could have a transparent background, so that even when the rounded corners of the inner leave space on the corners, that will not be seen since the outer view has a transparent background color. Something like this :

<RelativeLayout>
android:background = "@color/transparent"
< some.private.namespace.CardView
android:margin="8dp"
.....
/>
</RelativeLayout>