3

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 ?

android developer
  • 114,585
  • 152
  • 739
  • 1,270
  • In dark theme mode, you have to customize theme and specially shade/elevation color to show contrast in app UI – Androider Nov 07 '15 at 18:37
  • I got the clickable CardView functionality implemented recently using this answer as a guide: http://stackoverflow.com/questions/24475150/android-l-cardview-visual-touch-feedback/30192562#30192562 – Daniel Nugent Nov 07 '15 at 19:02
  • @DanielNugent Looks nice. Do you know what should be the cardCornerRadius and contentPadding standards? Is it possible to also make the cardView have a "checked" state? – android developer Nov 07 '15 at 21:00
  • I had to tweak those values in order to make it perfect, it will be different depending on your CardView layout. I used a ListView of CardViews, it worked out nicely. As for "selected" state, my solution there was a bit messy, but it works. I resorted to manually "selecting" a CardView on long click, and then keep a reference to the selected View in order to make sure that it appeared selected even when there was cell re-use using the view-holder pattern. – Daniel Nugent Nov 07 '15 at 21:16
  • @DanielNugent I succeed adding checkable state, using this: http://stackoverflow.com/questions/11775710/make-relativelayout-checkable , and add state_checked to the selector of card_foreground.xml . However, because it's the foreground, it changes the content of the card, so if I choose a completely opaque color, it hides the entire content of the card. – android developer Nov 08 '15 at 14:52
  • i tried your app and i think you can help [this](http://stackoverflow.com/questions/33886756/multi-select-cardview-in-listview) guy, i think he has a good question – Mohamed Nov 24 '15 at 08:55
  • @Mohamed Sure, I will help when it's ready. – android developer Nov 24 '15 at 09:44

2 Answers2

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.

Zomb
  • 911
  • 1
  • 7
  • 12
0

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>
Amit Vaghela
  • 22,772
  • 22
  • 86
  • 142