cardColor

[x4080]

Hi Brad, I added cardColor on the android side that you can use if you like cardview-common.ts

import definition = require("cardview");
import contentView = require("ui/content-view");

import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");
import dcolor = require("color");

var cardColorProperty = new dependencyObservable.Property(
    "cardColor",
    "GridLayoutExt",
    new proxy.PropertyMetadata("", dependencyObservable.PropertyMetadataSettings.None)
);

export class CardView extends contentView.ContentView implements definition.CardView {
    public static cardColorProperty = cardColorProperty;

    get cardColor(): string {
        return this._getValue(CardView.cardColorProperty);
    }

    set cardColor(value: string) {
        this._setValue(CardView.cardColorProperty, value);
    }

  constructor() {
    super();
  }

  get android(): any {
    return;
  }

  get ios(): any {
    return;
  }
}

cardview-android.ts

import common = require("./cardview-common");
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";
import dcolor = require("color");

global.moduleMerge(common, exports);

import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");

function oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var c = <CardView>data.object;
    c._oncardColorPropertyChanged(data);
}

(<proxy.PropertyMetadata>common.CardView.cardColorProperty.metadata).onSetNativeValue = oncardColorPropertyChanged;

var radiusProp = new Property(
    "radius",
    "CardView",
    new PropertyMetadata(undefined, PropertyMetadataSettings.None)
);
var elevationProp = new Property(
    "elevation",
    "CardView",
    new PropertyMetadata(undefined, PropertyMetadataSettings.None)
);

export class CardView extends common.CardView {
    public _oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
        var c = new dcolor.Color(data.newValue);
        this._android.setCardBackgroundColor(c.android);
    }
    private _androidViewId: any;
    public static radiusProp = radiusProp;
    public static elevationProp = elevationProp;
    private _android: android.support.v7.widget.CardView;

    constructor() {
        super();
    }

    get android(): android.support.v7.widget.CardView {
        return this._android;
    }

    get _nativeView(): android.support.v7.widget.CardView {
        return this._android;
    }

    get radius(): number {
        return this._getValue(CardView.radiusProp);
    }
    set radius(value: number) {
        this._setValue(CardView.radiusProp, value);
    }

    get elevation(): number {
        return this._getValue(CardView.elevationProp);
    }
    set elevation(value: number) {
        this._setValue(CardView.elevationProp, value);
    }

    public _createUI() {
        this._android = new android.support.v7.widget.CardView(this._context);

        if (!this._androidViewId) {
            this._androidViewId = android.view.View.generateViewId();
        }
        this._android.setId(this._androidViewId);

        if (this.radius)
            this._android.setRadius(this.radius);

        if (this.elevation)
            this._android.setCardElevation(this.elevation);

    }
}

Usage :

        <Card:CardView cardColor="yellow">
        </Card:CardView>

[x4080]

cardview.ios.ts update for cardColor property

import common = require("./cardview-common");
import uiUtils = require("ui/utils");
import {PropertyMetadata} from "ui/core/proxy";
import {Property, PropertyMetadataSettings} from "ui/core/dependency-observable";

global.moduleMerge(common, exports);

import dependencyObservable = require("ui/core/dependency-observable");
import proxy = require("ui/core/proxy");

function oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
    var c = <CardView>data.object;
    c._oncardColorPropertyChanged(data);
}

(<proxy.PropertyMetadata>common.CardView.cardColorProperty.metadata).onSetNativeValue = oncardColorPropertyChanged;

export class CardView extends common.CardView {
    public _oncardColorPropertyChanged(data: dependencyObservable.PropertyChangeData) {
        this.backgroundColor = data.newValue;
    }
  private _ios: MaterialCardView;

  constructor() {
    super();
    this._ios = new MaterialCardView({
      x: 10,
      y: uiUtils.ios.getStatusBarHeight() + 10,
      w: UIApplication.sharedApplication().statusBarFrame.size.width - 20
    }, null);

    // XML props are set after construction
    // update appearance at next VM turn
    setTimeout(() => {
        this._ios.materialize();
    });    
  }

  get ios(): MaterialCardView {
    return this._ios;
  }

  get _nativeView(): MaterialCardView {
    return this._ios;
  }

}

[bradmartin]

Hi @x4080 - could you wrap this into a PR?

[x4080]

Just use the code as much as you like. Its yours

[bradmartin]

Fair enough @x4080 - I'll try to work on that later this week. Thanks 👍

[NathanWalker]

@bradmartin @x4080 I'm not sure this is needed anymore actually with the new ios MaterialCard in play... backgroundColor just works now (last time I checked).

<Card:CardView backgroundColor="#efefef">
           ...
</Card:CardView>

[bradmartin]

@NathanWalker - yea background color has always worked on the android version but it wasn't the native method for the cardview which is better than the default NS backgroundColor styler. I'll add that little bit to the android side if it's not already there.

[firecube]

Hi,

It would be great to get this change merged in as using BackgroundColor crashes on Android 4.4. From what I have read using CardColor would work.

Thanks, Simon

[bradmartin]

I'll look at it in a few hours and get everything updated. Thanks for using the plugin.

[bradmartin]

Working to update this, should have something soon to incorporate the native backgroundColor method for android side.

[bradmartin]

Just added the backgroundColor styler to the android side. So now it's not a custom property on the component or any hack. When you set the backgroundColor of the <CardView> the styler kicks in and uses the native .setCardBackgroundColor() method 👍

[x4080]

Cool

[firecube]

Hi Brad,

I am seeing the following in the logs on my Nexus 5x. I will try on the Android 4.4 device I was having problems with later today and let you know how I get on.

I am setting the background-color with CSS if that makes a difference?

Thanks, Simon

JS: Style: Error setting property: backgroundColor on CardView(37)@file:///app/pages/home/home.xml:34:25;: Error: java.lang.ClassCastException: com.tns.gen.android.graphics.drawable.ColorDrawable_frnal_ts_helpers_l47_c38__BorderDrawable cannot be cast to android.support.v7.widget.RoundRectDrawable JS: android.support.v7.widget.CardViewApi21.setBackgroundColor(CardViewApi21.java:107) JS: android.support.v7.widget.CardView.setCardBackgroundColor(CardView.java:234) JS: com.tns.Runtime.callJSMethodNative(Native Method) JS: com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:861) JS: com.tns.Runtime.callJSMethodImpl(Runtime.java:726) JS: com.tns.Runtime.callJSMethod(Runtime.java:712) JS: com.tns.Runtime.callJSMethod(Runtime.java:693) JS: com.tns.Runtime.callJSMethod(Runtime.java:683) JS: com.tns.FragmentClass.onCreateView(FragmentClass.java:43) JS: android.app.Fragment.performCreateView(Fragment.java:2220) JS: android.app.FragmentManagerImpl.moveToState(FragmentManager.java:973) JS: android.app.FragmentManagerImpl.moveToState(FragmentManager.java:1148) JS: android.app.BackStackRecord.run(BackStackRecord.java:793) JS: android.app.FragmentManagerImpl.execPendingActions(FragmentManager.java:1535) JS: android.app.FragmentManagerImpl$1.run(FragmentManager.java:482) JS: android.os.Handler.handleCallback(Handler.java:739) JS: android.os.Handler.dispatchMessage(Handler.java:95) JS: android.os.Looper.loop(Looper.java:148) JS: android.app.ActivityThread.main(ActivityThread.java:5422) JS: java.lang.reflect.Method.invoke(Native Method) JS: com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:726) JS: com.android.internal.os.ZygoteInit.main(ZygoteInit.java:616)

[bradmartin]

Try removing the platform and adding it back, then doing an install of the plugin again. Uninstall the app from the device/emulator throwing the error. Then do a new build of the app. Finally run it and should work fine. Let me know.

[firecube]

Hi Brad,

I did all of these steps and got the same error. I changed from using a css class specifying the background-color to adding the property backgroundColor on the card itself and that fixes it.

Do you think it would be possible to support the CSS property?

Thanks for the fix! Simon

[bradmartin]

That's what the update does. You must not be running the latest or have a conflict in your build.

On Thu, May 5, 2016, 4:19 AM firecube notifications@github.com wrote:

Hi Brad,

I did all of these steps and got the same error. I changed from using a css class specifying the background-color to adding the property backgroundColor on the card itself and that fixes it.

Do you think it would be possible to support the CSS property?

Thanks for the fix! Simon

— You are receiving this because you modified the open/close state. Reply to this email directly or view it on GitHub https://github.com/bradmartin/nativescript-cardview/issues/11#issuecomment-217110280