Titanium Mobile

# Titanium.UI.Android.CardView

CardView provides a layout container with rounded corners and a shadow indicating the view is elevated.

Availability
5.1.0
Extends
Titanium.UI.View

# Overview

Use a CardView to layout content that:

  • Comprises multiple data types
  • Does not require direct comparison
  • Supports variable length content or displays more than three lines of text
  • Contains rich content or interactive elements, such as comments or a favorite button

If you are displaying a collection of the same type in a uniform layout without many actions, use a Titanium.UI.ListView or Titanium.UI.TableView instead.

For design guidelines, see Google Design Guidelines: Cards (opens new window)

CardView does not support Titanium.UI.View.backgroundImage, Titanium.UI.View.borderColor, or Titanium.UI.View.backgroundGradient.

# Examples

# CardView used in a ScrollView

The following example creates a CardView used in a ScrollView.

var win = Ti.UI.createWindow({
    title: 'Card Demo'
});
var scrollView = Ti.UI.createScrollView({
    layout: 'vertical'
});
for (var index = 1; index <= 10; index++) {
    var cardView = Ti.UI.Android.createCardView({
        layout: 'vertical',
        padding: '16dp',
        top: '10dp',
        left: '10dp',
        right: '10dp',
    });
    cardView.add(Ti.UI.createLabel({
        text: 'Card ' + index,
        maxLines: 1,
        font: {
            fontSize: '20dp',
            fontWeight: 'bold'
        },
        width: Ti.UI.FILL
    }));
    cardView.add(Ti.UI.createLabel({
        text: 'This is the card view description text.\nThis is the 2nd line of text.',
        textAlign: Ti.UI.TEXT_ALIGNMENT_LEFT,
        width: Ti.UI.FILL
    }));
    scrollView.add(cardView);
}
win.add(scrollView);
win.open();

# Properties

# backgroundColor

Availability
5.1.2
backgroundColor :String

Background color for CardView as a color name or hex triplet.

For information about color values, see the "Colors" section of Titanium.UI.

# borderRadius

Availability
5.1.2
borderRadius :Number

Corner radius for CardView.

Each corner is rounded using an arc of a circle. Values for each corner can be specified. For example, '20px 20px' will set both left and right corners to 20px. Specifying '20px 20px 20px 20px' will set top-left, top-right, bottom-right and bottom-left corners in that order.

Default: 0

# elevation

Availability
5.1.2
elevation :Number

Elevation for CardView.

The elevation of a view determines the appearance of its shadow. Higher elevations produce larger and softer shadows.

Note: The elevation property only works on Titanium.UI.View objects. Many Android components have a default elevation that cannot be modified. For more information, see Google design guidelines: Elevation and shadows.

# maxElevation CREATION ONLY

Availability
5.1.2
maxElevation :Number

Maximum Elevation for CardView.

# padding

Availability
5.1.2
padding :Number

Inner padding between the edges of the Card and children of the CardView.

# paddingBottom

Availability
5.1.2
paddingBottom :Number

Inner padding between the bottom edge of the Card and children of the CardView.

# paddingLeft

Availability
5.1.2
paddingLeft :Number

Inner padding between the left edge of the Card and children of the CardView.

# paddingRight

Availability
5.1.2
paddingRight :Number

Inner padding between the right edge of the Card and children of the CardView.

# paddingTop

Availability
5.1.2
paddingTop :Number

Inner padding between the top edge of the Card and children of the CardView.

# preventCornerOverlap

Availability
5.1.2
preventCornerOverlap :Boolean

Add padding to CardView on API level 20 and before to prevent intersections between the Card content and rounded corners.

Default: false

# useCompatPadding

Availability
5.1.2
useCompatPadding :Boolean

Add padding on API level 21 and above to have the same measurements with previous versions.

Default: false

Contents