android developer
android developer

Reputation: 115982

How to make a CardView have a clickable&checkable effect, and how to make it dark themed?

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) :

enter image description here

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 ?

Upvotes: 3

Views: 3144

Answers (2)

Amit Vaghela
Amit Vaghela

Reputation: 22955

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>

Upvotes: 0

Zomb
Zomb

Reputation: 911

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.

Upvotes: 1

Related Questions