Card View background color affects shadow color

Question

I have my Card View set up like this:

android:layout_marginTop="2dp"
android:layout_marginLeft="6dp"
android:layout_marginRight="6dp"
card_view:cardCornerRadius="2dp"
card_view:cardElevation="6dp"
card_view:cardUseCompatPadding="true"
card_view:contentPadding="10p"

Without a background color my Card View looks perfect like this:

However, when I add the simple property:

card_view:cardBackgroundColor="#xxxxxxxx"

the shadows change significantly in terms of color, transparency, blur etc.

How might I go about fixing this? I tried using a RelativeLayout as the background and changing the color there, so it wouldn't affect the shadows... but that affected the rounded corners.

Any ideas? Thanks for the help!

score 1 · Answer 1 · answered Nov 24 '20 at 19:45

1

I ran into the exact same problem and solved it by removing the alpha portion of my hex code.

Example: #AA333333 removing the AA. Of course use the hex color that you need without the alpha.

answered Nov 24 '20 at 19:45

Danny Lui

11
1

That's exactly what caused the problem. Elimination of alpha part of color solved the issue for me. – Taras Lozovyi Dec 15 '20 at 09:49
Is there a way to solve it when the color is partly translucent(with some alpha)?? – yeshu Jul 24 '21 at 17:11

score 0 · Answer 2 · answered Feb 14 '16 at 13:59

0

Your idea of RelativeLayout is a good one. Instead of placing the card view in RelativeLayout, add RelativeLayout as CardView child, and than add its content to RelativeLayout, in your case it look like you got single child: TextView.

So change your TextView background color or place it in a RelativeLayout and change RelativeLayout background color.

answered Feb 14 '16 at 13:59

Ilya Gazman

31,250
24
137
216

That is exactly what I tried, except the `RelativeLayout` will fit inside the `CardView` but won't expand inside it. As a result I don't get my desired rounded corners. – Greg Peckory Feb 14 '16 at 14:07
2

@GregPeckory You can use a drawable shape to get rounded corners. Any way you should try more tower this direction, it should work. – Ilya Gazman Feb 14 '16 at 14:08

score 0 · Answer 3 · answered Jul 12 '22 at 06:37

0

As a workaround, since the alpha is the problem, you can try to brigthen the card color (or blend it with the underlying color)

ColorUtils.blendARGB(yourCardColor, Color.WHITE, 0.2f)

answered Jul 12 '22 at 06:37

Ingrid

1

score -3 · Answer 4 · answered Feb 14 '16 at 14:00

-3

Instead of that, set android:background="#hexColor"

answered Feb 14 '16 at 14:00

Nick Isaacs

172
11

how might I achieve this programatically ? – Greg Peckory Feb 14 '16 at 14:05
CardView card = findView... Card.setBackground() – Nick Isaacs Feb 14 '16 at 14:07
I need to create a `drawable` for this. Do I just set the color there? – Greg Peckory Feb 14 '16 at 14:13
Sorry, Please use card.setBackgroundColor(Color.rgb(255, 0, 0)); . Specify the RBG values inside the rgb() . setBackgroundColor takes int values – Nick Isaacs Feb 14 '16 at 14:20
I have tried this, and it results in a large rectangle with no shadow or rounded corners. – Greg Peckory Feb 14 '16 at 14:22
allright. Have you tried this : http://stackoverflow.com/questions/26561122/change-the-background-color-of-cardview-programmatically – Nick Isaacs Feb 14 '16 at 14:29
Yes, this was initially what was causing the issue – Greg Peckory Feb 14 '16 at 14:35
Not Exact solution. – Daxesh V Mar 30 '19 at 07:26

Card View background color affects shadow color

4 Answers4

Linked