CardView background color states not being respected

Question

In brief:

How can we define color states of CardView's cardBackgroundColor property (in a ListView layout, in this case)?

(I am using RC1 of Android L developer preview, on a phone with 4.4 installed, and "com.android.support:cardview-v7:21.0.0-rc1" in build.gradle)

Longer:

In CardView layout, we set the corner radius and background color of the CardView via cardCornerRadius and cardBackgroundColor.

However, the background color doesn't repect selected states, i.e. if the list item is pressed, for example.

If, in the inner view of the CardView, you set a background colour, and associated states, which are respected, however, it will display over the corners you defined in the CardView.

So, how can we ensure the states in CardView's cardBackgroundColor are respected?

Here's the color used for the cardBackgroundColor, colour_with_states.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_focused="true"  android:state_enabled="false" android:state_pressed="true" android:color="@android:color/holo_green_dark" />
    <item android:state_focused="true"  android:state_enabled="false"                              android:color="@android:color/holo_green_dark" />
    <item android:state_focused="true"                                android:state_pressed="true" android:color="@android:color/holo_green_dark" />
    <item android:state_focused="false"                               android:state_pressed="true" android:color="@android:color/holo_green_dark" />
    <item android:state_focused="true"                                                             android:color="@android:color/holo_green_dark" />
    <!-- Only this below is seen in the cardview dispaly -->
    <item android:color="@android:color/holo_blue_bright" />
</selector>

And the layout that uses the CardView:

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    cardview:cardCornerRadius="10dp"
    cardview:cardBackgroundColor="@color/colour_with_states"
    >

<!-- If we set a background color below, it will overwrite our radius defined above -->
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:text="Lorem ipsum"
    android:id="@android:id/text1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textAppearance="?android:attr/textAppearanceListItem"
    android:background="@null"
    android:gravity="center_vertical"
    android:paddingTop="8dip"
    android:paddingBottom="8dip"
    android:paddingStart="8dip"
    android:paddingEnd="8dip"
    />

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

Does using the same background color in a regular `FrameLayout` respect the selected states? I take it you are calling `setOnClickListener` on your `CardView`? — ianhanniballake, Aug 17 '14 at 20:06
I think the answer is in your question: `If, in the inner view of the CardView, you set a background colour, and associated states, which are respected, however, it will display over the corners you defined in the CardView.` . The parent ViewGroup (card) is routing focus and events to child view. Also, `ListView` has its own `selector` for highlighting selected items. — S.D., Sep 22 '14 at 18:15
@S.D. "Routing" is not how it works. You should test android:duplicateParentState. By this means both the parent AND any interested children can implicitly respond with XML selectors to events of interest. CardView breaks this pattern, and cannot 'hear' the parent selection state change, probably because the attribute in question is the special cardview:cardBackgroundColor, not the generic android:background. — Merk, Oct 21 '14 at 21:30
Hope [this][1] may help [1]: http://stackoverflow.com/questions/24518376/override-android-l-cardview-state-pressed-for-older-versions-of-android — Tabrej Khan, Oct 31 '14 at 13:36

Etienne Lawlor · Accepted Answer · 2015-12-14T22:56:36.137

68

Though this is not ideal, since the edges are not rounded, you can add touch feedback to a CardView like this :

<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:cardCornerRadius="4dp"
    android:clickable="true"
    android:foreground="?android:attr/selectableItemBackground">

    //Nested View ...

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

Adding the android:foreground and android:clickable attributes to the CardView.

Also this has a negative side effect in that the android:clickable attribute overrides any clickListener, and therefore those clickListeners don't get triggered.

Update

I have some examples of CardView implementations

Loop (https://github.com/lawloretienne/Loop) - https://github.com/lawloretienne/Loop/blob/master/app/src/main/res/layout/category_card.xml

QuickReturn (https://github.com/lawloretienne/QuickReturn) - https://github.com/lawloretienne/QuickReturn/blob/master/sample/src/main/res/layout/activity_quick_return.xml

Update 2

After more research I have come up with a good solution for CardViews on all API versions including pre-Lollipop.

https://medium.com/@etiennelawlor/layout-tips-for-pre-and-post-lollipop-bcb2e4cdd6b2#.9h0v1gmaw

edited Dec 14 '15 at 22:56

answered Sep 15 '14 at 21:00

Etienne Lawlor

6,817
18
77
89

You should be able to achieve the same effect using android:onClick="someMethod" in place of android:clickable="true" above. – Lorne Laliberte Oct 30 '14 at 19:53
3

Not applicable solution. Ugly. – dasar Dec 12 '14 at 13:12
2

Actually this does work in either Kit Kat or Lollipop. Just tested and confirmed working! Besides that, it's an perfect simple solution. – Jul 07 '15 at 12:03
to change the colour of the ripple you can add @color/your_color to your theme. – Stimsoni Feb 23 '16 at 03:58
This is a good solution. It does not override the View's OnClickListener as mentioned in answer, at least not as of support library 24+. – ashishduh Nov 07 '16 at 23:20
We don't need to add the clickable attribute if we are already handling the onclick – cammando Jan 26 '17 at 13:42
1

Perfect answer. Thanks a lot. Works like a charm. – Gerson C Filho Jun 19 '17 at 00:08

score 12 · Answer 2 · answered Mar 27 '15 at 22:40

Sometimes, you may want the CardView to have visual touch feedback. The android:foreground="?android:attr/selectableItemBackground" solution is perfect for this.

However, you may consider using drawSelectorOnTop(true) with your ListView. This will require no change on your CardView at all.

Let me know if further clarification is needed.

score 6 · Answer 3 · edited Oct 18 '17 at 08:38

Here's my way to solve your problem.

First, create a custom class named CustomCardView extends CardView

Then override the drawableStateChanged() method, change the card background color by call setCardBackgroundColor() method when card's press status changed.

Last, replace the CardView with this CustomCardView in you layout file.

the only one disadvantage of this solution is cardview can't display ripple press effect on Android 5.0 and above.

here's my code:

public class CustomCardView extends CardView {

public CustomCardView(Context context) {
    super(context);
    // TODO Auto-generated constructor stub
}

public CustomCardView(Context context, AttributeSet attrs) {
    super(context, attrs);
    // TODO Auto-generated constructor stub
}

public CustomCardView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    // TODO Auto-generated constructor stub
}

@Override
protected void drawableStateChanged() {
    super.drawableStateChanged();
    if (isPressed()) {
        this.setCardBackgroundColor(getContext().getResources().getColor(R.color.card_view_pressed));
    } else {
        this.setCardBackgroundColor(getContext().getResources().getColor(R.color.card_view_normal));
    }
}

}

score 4 · Answer 4 · answered Mar 04 '15 at 22:12

One workaround which I used was to do the UI changes programmatically by overriding the View.OnTouchListener OnTouch() event handler within my custom ViewHolder.

@Override
public boolean onTouch (View v, MotionEvent event) 
{
    int action = event.getActionMasked();
    if (action == MotionEvent.ACTION_DOWN) 
    {
        mCardView.setCardBackgroundColor(STATE_PRESSED_COLOR);
    } 
    else if (action == MotionEvent.ACTION_UP || action == MotionEvent.ACTION_CANCEL) 
    {
        mCardView.setCardBackgroundColor(DEFAULT_COLOR);
    }
    return false;
}

score 3 · Answer 5 · answered Mar 02 '16 at 09:49

3

**Just add there lines inside card view **

    android:clickable="true"
    android:focusableInTouchMode="true"
    android:foreground="?android:attr/selectableItemBackground"

answered Mar 02 '16 at 09:49

Prashant Maheshwari Andro

1,686
14
12

Mohammad Reza Khahani · Answer 6 · 2019-11-26T05:21:42.170

You can use color state in code and it work perfectly.

cardView.setCardBackgroundColor(context.getColorStateList(R.color.card_view_selectable))

in color > card_view_selectable.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#4fc3f7" android:state_activated="true" />
    <item android:color="#fff" />
</selector>

Then use isActivated cause background color changed to state_activated or default.

cardView.isActivated = true    // or false

score 0 · Answer 7 · answered Nov 18 '15 at 16:43

I used a rectangle shape with the same corner radius as the cardview. And then used the xml drawable as a background for the inner view of the cardview. The background does not display over cardview corner, though i still get a small padding between the card and its inner view.

score 0 · Answer 8 · answered Jan 30 '17 at 14:26

If you look at the definition of carBackgroundColor property, at least in android support library it is:

<resources>
    <declare-styleable name="CardView">
        <!-- Background color for CardView. -->
        <attr name="cardBackgroundColor" format="color" />
    </declare-styleable>
</resource>

Here it says it takes only color for cardBackgroundValue. I guess this means selector is not respected but falls through to the default value ie. color at the bottom of your selector.

score 0 · Answer 9 · answered Apr 12 '17 at 05:35

Use android:foreground instead of android:background in your <CardView/>. below are sample code of a CardView .

 <android.support.v7.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        app:cardCornerRadius="2dp"
        app:cardElevation="2dp">

// others view component 

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

CardView background color states not being respected

9 Answers9

Update

Update 2