Merge pull request #87 from gsmedley/master

Add optional ripple effect (Android only)

README.md

@@ -123,6 +123,11 @@ An attribute to control the 'border-radius' of the card.
 An attribute to set the elevation of the card. This will increase the 'drop-shadow' of the card.
 There can be some performance impact when using a very high elevation value.
 
+* **ripple** _optional_
+
+Set to 'true' to show a ripple when the card is tapped. Tap event handlers in the card content will prevent the ripple.
+
+
 #### iOS
 
 * **shadowOffsetWidth** _optional_

src/cardview-common.ts

@@ -50,6 +50,11 @@ export class CardViewCommon extends ContentView {
    * Set the shadow opacity of the card view. ** Valid only when running on iOS **
    */
   shadowOpacity: number;
+
+  /**
+   * Gets or set the ripple setting.
+   */
+  ripple: boolean;
 }
 
 export const radiusProperty = new Property<CardViewCommon, number>({
@@ -64,6 +69,12 @@ export const elevationProperty = new Property<CardViewCommon, number>({
 });
 elevationProperty.register(CardViewCommon);
 
+export const rippleProperty = new Property<CardViewCommon, boolean>({
+  name: 'ripple',
+  valueConverter: value => value == "true"
+});
+rippleProperty.register(CardViewCommon);
+
 export const shadowRadiusProperty = new Property<CardViewCommon, number>({
   name: 'shadowRadius',
   valueConverter: value => +value

src/cardview.android.ts

@@ -1,12 +1,14 @@
 /// <reference path="./node_modules/tns-platform-declarations/android.d.ts" />
 
 import { Color } from 'tns-core-modules/color';
+var application = require("tns-core-modules/application");
 import {
   backgroundColorProperty,
   backgroundInternalProperty,
   CardViewCommon,
   elevationProperty,
-  radiusProperty
+  radiusProperty,
+  rippleProperty
 } from './cardview-common';
 
 export class CardView extends CardViewCommon {
@@ -25,6 +27,30 @@ export class CardView extends CardViewCommon {
     this.nativeView.setCardElevation(value);
   }
 
+  [rippleProperty.setNative](value: boolean) {
+
+    if( !value ){
+      this.nativeView.setClickable(false); 
+    } else { 
+      let attr = java.lang.Class.forName("android.support.v7.appcompat.R$attr");
+      let field = attr.getField("selectableItemBackground");
+
+      if( field ) {
+        let resId = field.getInt(null);
+
+        let attrs =  Array.create("int", 1);
+        attrs[0] = resId
+        let activity = application.android.foregroundActivity;
+        let typedValue = activity.obtainStyledAttributes(attrs);
+        let selectedItemDrawable = typedValue.getDrawable(0);
+
+        this.nativeView.setForeground(selectedItemDrawable);
+        this.nativeView.setClickable(true);  
+      }
+    }
+  } 
+
+
   public createNativeView() {
     return new (android.support.v7.widget as any).CardView(this._context);
   }

src/index.d.ts

@@ -48,4 +48,9 @@ export class CardView extends ContentView {
    * Set the shadow opacity of the card view. ** Valid only when running on iOS **
    */
   shadowOpacity: number;
+
+  /**
+   * Gets or set the ripple setting.
+   */
+  ripple: boolean;
 }

src/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nativescript-cardview",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "A NativeScript plugin for Material Design CardView component.",
   "main": "cardview",
   "typings": "index.d.ts",