# Titanium.UI.Android.CardView

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

- Source: https://titaniumsdk.com/docs/sdk/12.6.3/Titanium.UI.Android.CardView
- Titanium SDK version: 12.6.3
- Kind: view
- Platforms: Android
- Since: Titanium SDK 5.1.0
- Extends: Titanium.UI.View
- Inheritance: Titanium.UI.View > Titanium.Proxy

| Android |
| ------- |
| ![Android](./cardview_android.png) |

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 [ListView](https://titaniumsdk.com/docs/sdk/Titanium.UI.ListView.md) or [TableView](https://titaniumsdk.com/docs/sdk/Titanium.UI.TableView.md) instead.

For design guidelines, see
[Google Design Guidelines: Cards](http://www.google.com/design/spec/components/cards.html)

CardView does not support [Titanium.UI.View.backgroundImage](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#backgroundImage), [Titanium.UI.View.borderColor](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#borderColor), or [Titanium.UI.View.backgroundGradient](https://titaniumsdk.com/docs/sdk/Titanium.UI.View.md#backgroundGradient).

## Example: Simple Alloy example

``` xml
<Alloy>
    <Window >
        <CardView height="100" width="200">
          <Label text="CardView example"/>
        </CardView>
    </Window>
</Alloy>
```

## Example: CardView used in a ScrollView

The following example creates a CardView used in a ScrollView.

``` js
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

- Type: String
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

For information about color values, see the "Colors" section of [Titanium.UI](https://titaniumsdk.com/docs/sdk/Titanium.UI.md).

### borderRadius

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

Corner radius for CardView.

### elevation

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

Elevation for CardView.

### maxElevation

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

Maximum Elevation for CardView.

### padding

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

### paddingBottom

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

### paddingLeft

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

### paddingRight

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

### paddingTop

- Type: Number
- Platforms: Android
- Since: Titanium SDK 5.1.2

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

### preventCornerOverlap

- Type: Boolean
- Platforms: Android
- Since: Titanium SDK 5.1.2
- Default: `false`

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

### useCompatPadding

- Type: Boolean
- Platforms: Android
- Since: Titanium SDK 5.1.2
- Default: `false`

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

## Inherited members

85 members are inherited. Each is documented on the type that declares it.

- [Titanium.Proxy](https://titaniumsdk.com/docs/sdk/12.6.3/Titanium.Proxy.md): `addEventListener`, `apiName`, `applyProperties`, `bubbleParent`, `fireEvent`, `lifecycleContainer`, `removeEventListener`
- [Titanium.UI.View](https://titaniumsdk.com/docs/sdk/12.6.3/Titanium.UI.View.md): `accessibilityDisableLongPress`, `accessibilityHidden`, `accessibilityHint`, `accessibilityLabel`, `accessibilityValue`, `add`, `anchorPoint`, `animate`, `backgroundDisabledColor`, `backgroundDisabledImage`, `backgroundFocusedColor`, `backgroundFocusedImage`, `backgroundSelectedColor`, `backgroundSelectedImage`, `borderWidth`, `bottom`, `center`, `children`, `click`, `convertPointToView`, `dblclick`, `doubletap`, `filterTouchesWhenObscured`, `focus`, `focusable`, `getViewById`, `height`, `hiddenBehavior`, `hide`, `horizontalWrap`, `id`, `insertAt`, `keepScreenOn`, `keypressed`, `layout`, `left`, `longclick`, `longpress`, `opacity`, `overrideCurrentAnimation`, `pinch`, `postlayout`, `rect`, `remove`, `removeAllChildren`, `replaceAt`, `right`, `rotation`, `rotationX`, `rotationY`, `scaleX`, `scaleY`, `show`, `singletap`, `size`, `softKeyboardOnFocus`, `stopAnimation`, `swipe`, `toImage`, `tooltip`, `top`, `touchEnabled`, `touchFeedback`, `touchFeedbackColor`, `touchcancel`, `touchend`, `touchmove`, `touchstart`, `transform`, `transitionName`, `translationX`, `translationY`, `translationZ`, `twofingertap`, `viewShadowColor`, `visible`, `width`, `zIndex`

---

- This corpus documents Titanium SDK 13.4.1. Anything here that does not name a version describes 13.4.1.
- Titanium is maintained by TiDev. The Appcelerator toolchain is retired: there is no `appc` CLI, no Appcelerator Studio and no hosted build service. The supported CLI is `titanium` on npm, invoked as `ti`.