Android CardView - background color problem

[matt4446]

I've added the card view to a project using NativeScript-Angular but adding backgroundColor="#fff" or cardView.backgroundColor = new Color("#FFFFFF"); causes the following error... Does the error make sense or could it be a NativeScript-Angular thing?

If I get rid of the background color the element works again defaulting to a light grey.

Thanks, Matt

java.lang.ClassCastException: com.tns.gen.android.graphics.drawable.ColorDrawable_frnal_prepareExtend_l62_c37__BorderDrawable cannot be cast to android.support.v7.widget.RoundRectDrawableWithShadow
    at android.support.v7.widget.CardViewEclairMr1.getShadowBackground(CardViewEclairMr1.java:159)
    at android.support.v7.widget.CardViewEclairMr1.getMinWidth(CardViewEclairMr1.java:150)
    at android.support.v7.widget.CardView.onMeasure(CardView.java:181)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.StackLayout.onMeasure(StackLayout.java:83)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.VerticalScrollView.onMeasure(VerticalScrollView.java:80)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at 

[bradmartin]

Likely an angular/NativeScript issue. However, Google updated the support library last week and I haven't tested the plugin since so it could be caused by that. I'll check later on and see if it's the support library or not. If you have a non angular {N} app try it there and see if it works, if so then that would help narrow down the cause :)

[matt4446]

:+1: Thanks @bradmartin. I will attempt to take a look on an evening this week (with the same dependences), but it will probably later on the weekend at my current rate.

[bradmartin]

You find a fix @matt4446 ?

[matt4446]

Honestly ... I completely forgot. BUCS, ISTO and too much to do in the evenings... I have more free time in the evenings now so I will check with the newer versions of native-script & angular-nativescript over the next couple of days. Possibly this evening.

[matt4446]

Simple plain version works

<CardView #item>
        <StackLayout>
            <ng-content></ng-content>
        </StackLayout>
</CardView>

This doesnt work:

<CardView #item backgroundColor="#000000">
        <StackLayout>
            <ng-content></ng-content>
        </StackLayout>
</CardView>

Also this doesnt work (change color by code):

import { Control } from "../../decorators/control";
import { ViewChild, ElementRef, Directive, Input, Output, EventEmitter, ContentChildren } from "angular2/core";
import { Logger } from "../../providers/logger";
import { CardView } from "cardview";
//var observable = require("data/observable");
import { Observable, Subscription, Subject} from 'rxjs/Rx';
import { Color } from "color"
@Control({
    selector: "nx-card",
    //templateUrl: "controls/list/list.html",
    template:`
    <CardView #item>
        <StackLayout>
            <ng-content></ng-content>
        </StackLayout>
    </CardView>
    `
})
export class NxCard {
    constructor() 
    {
    }

    @ViewChild('item') 
    set _listItems(item: ElementRef){
        let cardView: CardView = item.nativeElement;
        cardView.backgroundColor = new Color("#FFFFFF"); //lets bring you back. 
    }
}

Both end up in the same 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.RoundRectDrawableWithShadow
    at android.support.v7.widget.CardViewEclairMr1.getShadowBackground(CardViewEclairMr1.java:159)
    at android.support.v7.widget.CardViewEclairMr1.getMinWidth(CardViewEclairMr1.java:150)
    at android.support.v7.widget.CardView.onMeasure(CardView.java:181)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.StackLayout.onMeasure(StackLayout.java:83)
    at android.view.View.measure(View.java:16497)
    at org.nativescript.widgets.CommonLayoutParams.measureChild(CommonLayoutParams.java:229)
    at org.nativescript.widgets.MeasureHelper.measureChildFixedColumnsAndRows(GridLayout.java:1059)
    at org.nativescript.widgets.MeasureHelper.measure(GridLayout.java:869)
    at org.nativescript.widgets.GridLayout.onMeasure(GridLayout.

If I believe my package file then:

"dependencies": {
    "tns-core-modules": "^2.0.0-angular-2",
    "nativescript-angular": "~0.0.40",
    "nativescript-intl": "^0.0.2",
    "angular2": "2.0.0-beta.9",
    ... others
  }

and

"tns-android": {
   "version": "1.7.1"
}

I'll try and fit in a normal nativescript project soon.

[matt4446]

I created a normal project. tns create ... same problem.

Which led me to the device. API version 19 doesn't work. API version 21+ does work :D ... note to self ... run many emulators at the same time.

Ok ... boring and obvious.

but sadly...

This uses the internal backgroundColor stying provided by NativeScript, but I wanted to point out that if you apply this you will lose any elevation and radius property set. This could be enhanced in the future to override the NativeScript styling to use the native method available on the CardView component.

The default background colour it is then. I could put a container over the top to colour it in like the header... Sounds easy enough.

[BlackBlind567]

app:cardBackgroundColor="#488747"

use this in your xml file