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