How to make a CardView have a clickable&checkable

Question

Background

Before CardView was introduced, I made some selectors on my app to mimic cards, and let the user also choose which theme to use for the app (some prefer a dark theme) :

The problem

I wanted to make it look&work more natively, so I tried using CardView.

Sadly, I fail to understand how to set the CardView have a clickable&checkable effect (the native one of each platform, maybe with a different color), and also have the ability to set it a dark theme.

The questions

1. How do I make a CardView have a clickable effect? On Lollipop it's a ripple effect. On previous ones it's full color changing within the boundaries of the CardView. I'd also like to customize the color of the clickable effect, and let it also be checkable.

2. How do I make a dark-theme CardView ?

Answer 1

You have to use the CardView.Dark style for the dark-theme CardView. You can also just use the colors as mentioned in the 11th and 12th comments of this bug.

Answer 2

This was requested on google at https://code.google.com/p/android/issues/detail?id=194497

But after release of Android Support Library, revision 23.2.1 (March 2016) This functionality is added.

Add dark theme for CardView

update Support Library to Android Support Library to 23.2.1

Example:

Add below attribute to your cardview

style="@style/CardView.Dark"

as shown here

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/cards"
        style="@style/CardView.Dark"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        card_view:cardCornerRadius="4dp">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentBottom="true"
            android:padding="10dp">

            <TextView
                android:id="@+id/usersName"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentTop="true"
                android:paddingTop="10dp"
                android:text="Username"
                android:textColor="#FFFFFF" />

            <TextView
                android:id="@+id/others"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@+id/usersName"
                android:layout_centerVertical="true"
                android:paddingTop="10dp"
                android:text="Others"
                android:textColor="#FFFFFF" />

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