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<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 <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 </FrameLayout> 92</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<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 <<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 <<strong>android.support.wearable.view.CardFrame</strong> 149 android:layout_height="wrap_content" 150 android:layout_width="fill_parent"> 151 152 <LinearLayout 153 android:layout_height="wrap_content" 154 android:layout_width="match_parent" 155 android:orientation="vertical" 156 android:paddingLeft="5dp"> 157 <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 <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 </LinearLayout> 172 </android.support.wearable.view.CardFrame> 173 </android.support.wearable.view.CardScrollView> 174</android.support.wearable.view.BoxInsetLayout> 175</pre> 176 177<p>The 178<a href="{@docRoot}reference/android/support/wearable/view/CardScrollView.html><code><CardScrollView></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@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><CardScrollView></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><CardScrollView></code></a> 201element inside a 202<a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code><BoxInsetLayout></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