CardView Strange Behaviour

Question

I have a simple layout with CardView

<android.support.v7.widget.CardView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/cv_tag"
android:layout_width="wrap_content"
android:layout_height="@dimen/tag_height"
android:layout_margin="4dp"
android:clickable="true"
app:cardCornerRadius="20dp"
app:cardElevation="2dp">

<FrameLayout
    android:id="@+id/fl_selection_indicator"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/tv_tag"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:padding="8dp"
        android:textAppearance="@style/PrimaryWhiteText.Tiny"
        tools:text="Hard"/>

</FrameLayout>

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

And it's rendering not as I expect it to. It looks like system wraps this layout into FrameLayout with elevation and white background. Interesting thing is if I wrap this layout into FrameLayout by myself elevation goes away but white background is still there (Background of frame layout not CardView)

How to remove elevation and white background and why is it happening?

Thanks in advance!

some time back i also face same problem. In my case its due to android:hardwareAccelerated="false" this property in menifest file — Pankaj Sharma, Jun 07 '17 at 09:22
hope this will help you....https://stackoverflow.com/questions/44407057/android-onclick-inside-gridview-row/44407767?noredirect=1#comment75815533_44407767 — Aniruddh Parihar, Jun 07 '17 at 09:25
@IvBaranov it's card's elevation and should affect only cardview (colored part) but not its background (white part) — Olexii Muraviov, Jun 07 '17 at 09:35
@PankajSharma this property in manifest removed elevation but on all views (( so it doesn't work — Olexii Muraviov, Jun 07 '17 at 09:40

vadkou · Answer 1 · 2017-06-07T10:03:07.763

1

Might be a quirk of pre-API 21 implementation.

In the mean time, you probably don't need the CardView altogether. Consider using DrawableResource.

Refer to How do I set the rounded corner radius of a color drawable using xml?

Old answer:

By default CardView has a background color set depending on your theme. Here's an exempt from styles

<color name="cardview_dark_background">#FF424242</color>
<color name="cardview_light_background">#FFFFFFFF</color>

And from the initialization of the view

if (a.hasValue(R.styleable.CardView_cardBackgroundColor)) {
            backgroundColor = a.getColorStateList(R.styleable.CardView_cardBackgroundColor);
} else {
     // There isn't one set, so we'll compute one based on the theme
     final TypedArray aa = getContext().obtainStyledAttributes(COLOR_BACKGROUND_ATTR);
     final int themeColorBackground = aa.getColor(0, 0);
     aa.recycle();

     // If the theme colorBackground is light, use our own light color, otherwise dark
     final float[] hsv = new float[3];
     Color.colorToHSV(themeColorBackground, hsv);
     backgroundColor = ColorStateList.valueOf(hsv[2] > 0.5f
                    ? getResources().getColor(R.color.cardview_light_background)
                    : getResources().getColor(R.color.cardview_dark_background));
 }

To change the color, use the app:cardBackgroundColor attribute

edited Jun 07 '17 at 10:03

answered Jun 07 '17 at 09:25

vadkou

390
2
9

Actually, I'm changing card background color with 'app:cardBackgroundColor' and its working goog (you can see colored part of view). But the problem is that it's look like the system wraps my layout inside another frame layout with elevation and white background. And if I wrap this layout in frame layout by myself elevation goes away but the white background is still there (I mean white background of Frame Layout not CardView). – Olexii Muraviov Jun 07 '17 at 09:45
@OlexiiMuraviov It's definitely not FrameLayout's white background, since it doesn't have rounded corners by default. It would help if you told us what API level does your device have, since there are different implementations of CardView used for pre-21 and pre-17. Also, see new edit for an alternative. If nothing helps, you may dump XML hierarchy with Android Device Monitor and post it here. – vadkou Jun 07 '17 at 10:06
1

I have solved this issue. Found answer in this question https://stackoverflow.com/questions/34810447/cardview-corner-background-not-transparent . Thank you for your efforts! My layout is a custom view and when I set in its constructors setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent)) elevation and white background have gone. – Olexii Muraviov Jun 09 '17 at 06:50
Yea, that answer makes sense, considering how it works across different versions of Android. Thanks for the follow-up! – vadkou Jun 10 '17 at 11:05

score 1 · Accepted Answer · answered Jun 09 '17 at 06:54

1

Original answer is here

My latout is for custom view and when I add setBackgroundColor(ContextCompat.getColor(context, android.R.color.transparent)); to its contructors elevation and white background have gone.

answered Jun 09 '17 at 06:54

Olexii Muraviov

1,456
1
12
36

CardView Strange Behaviour

2 Answers2