1page.title=Creating Cards
2
3@jd:body
4
5<div id="tb-wrapper">
6<div id="tb">
7<h2>This lesson teaches you to</h2>
8<ol>
9  <li><a href="#card-fragment">Create a Card Fragment</a></li>
10  <li><a href="#card-layout">Add a Card to Your Layout</a></li>
11</ol>
12<h2>You should also read</h2>
13<ul>
14  <li><a href="{@docRoot}design/wear/index.html">Android Wear Design Principles</a></li>
15</ul>
16</div>
17</div>
18
19
20<p>Cards present information to users with a consistent look and feel across different apps.
21This lesson shows you how to create cards in your Android Wear apps.</p>
22
23<p>The Wearable UI Library provides implementations of cards specifically designed for wearable
24devices. This library contains the <code>CardFrame</code> class, which wraps views inside
25a card-styled frame with a white background, rounded corners, and a light-drop shadow.
26<code>CardFrame</code> can only contain one direct child, usually a layout manager, to which
27you can add other views to customize the content inside the card.</p>
28
29<p>You can add cards to your app in two ways:</p>
30
31<ul>
32  <li>Use or extend the <code>CardFragment</code> class.</li>
33  <li>Add a card inside a <code>CardScrollView</code> in your layout.</li>
34</ul>
35
36<p class="note"><strong>Note:</strong> This lesson shows you how to add cards to Android Wear
37activities. Android notifications on wearable devices are also displayed as cards. For more
38information, see <a href="{@docRoot}training/wearables/notifications/index.html">Adding Wearable
39Features to Notifications</a>.</p>
40
41
42<h2 id="card-fragment">Create a Card Fragment</h2>
43
44<p>The <code>CardFragment</code> class provides a default card layout with a title, a
45description, and an icon. Use this approach to add cards to your app if the default card layout
46shown in figure 1 meets your needs.</p>
47
48<img src="{@docRoot}wear/images/05_uilib.png" width="500" height="245" alt=""/>
49<p class="img-caption"><strong>Figure 1.</strong> The default <code>CardFragment</code> layout.</p>
50
51<p>To add a <code>CardFragment</code> to your app:</p>
52
53<ol>
54<li>In your layout, assign an ID to the element that contains the card</li>
55<li>Create a <code>CardFragment</code> instance in your activity</li>
56<li>Use the fragment manager to add the <code>CardFragment</code> instance to its container</li>
57</ol>
58
59<p>The following sample code shows the code for the screen display shown in Figure 1:</p>
60
61<pre>
62&lt;android.support.wearable.view.BoxInsetLayout
63xmlns:android="http://schemas.android.com/apk/res/android"
64xmlns:app="http://schemas.android.com/apk/res-auto"
65android:background="@drawable/robot_background"
66android:layout_height="match_parent"
67android:layout_width="match_parent">
68
69    &lt;FrameLayout
70        <strong>android:id="@+id/frame_layout"</strong>
71        android:layout_width="match_parent"
72        android:layout_height="match_parent"
73        app:layout_box="bottom">
74
75    &lt;/FrameLayout>
76&lt;/android.support.wearable.view.BoxInsetLayout>
77</pre>
78
79<p>The following code adds the <code>CardFragment</code> instance to the activity in Figure 1:</p>
80
81<pre>
82protected void onCreate(Bundle savedInstanceState) {
83    super.onCreate(savedInstanceState);
84    setContentView(R.layout.activity_wear_activity2);
85
86    FragmentManager fragmentManager = getFragmentManager();
87    FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
88    CardFragment cardFragment = CardFragment.create(getString(R.string.cftitle),
89                                                    getString(R.string.cfdesc),
90                                                    R.drawable.p);
91    fragmentTransaction.add(R.id.frame_layout, cardFragment);
92    fragmentTransaction.commit();
93}
94</pre>
95
96<p>To create a card with a custom layout using <code>CardFragment</code>, extend this class
97and override its <code>onCreateContentView</code> method.</p>
98
99
100<h2 id="card-layout">Add a CardFrame to Your Layout</h2>
101
102<p>You can also add a card directly to your layout definition, as shown in figure 2. Use this
103approach when you want to define a custom layout for the card inside a layout definition file.</p>
104
105<img src="{@docRoot}wear/images/04_uilib.png" width="500" height="248" alt=""/>
106<p class="img-caption"><strong>Figure 2.</strong> Adding a <code>CardFrame</code> to your
107layout.</p>
108
109<p>The following layout code sample demonstrates a vertical linear layout with two elements. You
110can create more complex layouts to fit the needs of your app.</p>
111
112<pre>
113&lt;android.support.wearable.view.BoxInsetLayout
114xmlns:android="http://schemas.android.com/apk/res/android"
115xmlns:app="http://schemas.android.com/apk/res-auto"
116android:background="@drawable/robot_background"
117android:layout_height="match_parent"
118android:layout_width="match_parent">
119
120    &lt;<strong>android.support.wearable.view.CardScrollView</strong>
121        android:id="@+id/card_scroll_view"
122        android:layout_height="match_parent"
123        android:layout_width="match_parent"
124        app:layout_box="bottom">
125
126        &lt;<strong>android.support.wearable.view.CardFrame</strong>
127            android:layout_height="wrap_content"
128            android:layout_width="fill_parent">
129
130            &lt;LinearLayout
131                android:layout_height="wrap_content"
132                android:layout_width="match_parent"
133                android:orientation="vertical"
134                android:paddingLeft="5dp">
135                &lt;TextView
136                    android:fontFamily="sans-serif-light"
137                    android:layout_height="wrap_content"
138                    android:layout_width="match_parent"
139                    android:text="@string/custom_card"
140                    android:textColor="@color/black"
141                    android:textSize="20sp"/>
142                &lt;TextView
143                    android:fontFamily="sans-serif-light"
144                    android:layout_height="wrap_content"
145                    android:layout_width="match_parent"
146                    android:text="@string/description"
147                    android:textColor="@color/black"
148                    android:textSize="14sp"/>
149            &lt;/LinearLayout>
150        &lt;/android.support.wearable.view.CardFrame>
151    &lt;/android.support.wearable.view.CardScrollView>
152&lt;/android.support.wearable.view.BoxInsetLayout>
153</pre>
154
155<p>The <code>CardScrollView</code> element in the example layout above lets you assign gravity to
156the card when its content is smaller than the container. This example aligns the card to the
157bottom of the screen:</p>
158
159<pre>
160&#64;Override
161protected void onCreate(Bundle savedInstanceState) {
162    super.onCreate(savedInstanceState);
163    setContentView(R.layout.activity_wear_activity2);
164
165    CardScrollView cardScrollView =
166        (CardScrollView) findViewById(R.id.card_scroll_view);
167    cardScrollView.setCardGravity(Gravity.BOTTOM);
168}
169</pre>
170
171<p><code>CardScrollView</code> detects the shape of the screen and displays the card differently
172on round and square devices, using wider side margins on round screens. However,
173placing the <code>CardScrollView</code> element inside a <code>BoxInsetLayout</code> and using the
174<code>layout_box="bottom"</code> attribute is useful to align the card to the bottom of round
175screens without cropping its content.</p>
176