Material Design Card Component

Create a reusable card component for a NativeScript Android application that implements Material Design styling using modern Android UI libraries.

Requirements

Your implementation should create a custom card view that:

1. Displays content with elevated surface styling following Material Design guidelines
2. Supports customizable corner radius and elevation values
3. Allows dynamic background color configuration
4. Properly manages nested content views

Implementation

The component should be implemented as a TypeScript class that wraps the appropriate native Android view components. The implementation should properly initialize native views, configure Material Design properties, and handle view lifecycle.

@generates

API

/**
 * A Material Design card component for NativeScript Android applications.
 * Wraps native Android views to provide elevated, styled containers.
 */
export class MaterialCard {
  /**
   * Creates a new MaterialCard instance with the specified configuration.
   * @param config - Configuration options for the card
   */
  constructor(config: CardConfig);

  /**
   * Gets the underlying native Android view.
   * @returns The native card view instance
   */
  getNativeView(): any;

  /**
   * Sets the corner radius of the card.
   * @param radius - Corner radius in density-independent pixels
   */
  setCornerRadius(radius: number): void;

  /**
   * Sets the elevation of the card.
   * @param elevation - Elevation in density-independent pixels
   */
  setElevation(elevation: number): void;

  /**
   * Sets the background color of the card.
   * @param color - Color value as Android color integer
   */
  setCardBackgroundColor(color: number): void;

  /**
   * Adds a child view to the card.
   * @param view - The native view to add as content
   */
  addContentView(view: any): void;
}

/**
 * Configuration options for MaterialCard
 */
export interface CardConfig {
  cornerRadius?: number;
  elevation?: number;
  backgroundColor?: number;
}

Test Cases

• Creating a MaterialCard with default configuration should return a valid instance with a native view @test
• Setting corner radius to 8dp should update the card's corner radius property @test
• Setting elevation to 4dp should update the card's elevation property @test
• Setting background color should update the card's background color property @test

Dependencies { .dependencies }

tns-platform-declarations { .dependency }

Provides TypeScript type definitions for accessing native Android APIs and AndroidX libraries.