Search code examples
androidandroid-layoutandroid-support-libraryandroid-custom-viewandroid-cardview

Cardview corner background not transparent


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?

example

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.


Solution

  • 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.