1 page.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. 21 This 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 24 devices. This library contains the 25 <a href="{@docRoot}reference/android/support/wearable/view/CardFrame.html"><code>CardFrame</code></a> 26 class, which wraps views inside a card-styled frame with a white background, rounded corners, and a 27 light-drop shadow. A 28 <a href="{@docRoot}reference/android/support/wearable/view/CardFrame.html"><code>CardFrame</code></a> 29 instance can only contain one direct child, usually a layout manager, to which 30 you 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 44 activities. Android notifications on wearable devices are also displayed as cards. For more 45 information, see <a href="{@docRoot}training/wearables/notifications/index.html">Adding Wearable 46 Features 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> 53 class provides a default card layout with a title, a description, and an icon. Use this approach to 54 add 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> 59 layout.</p> 60 61 <p>To add a 62 <a href="{@docRoot}reference/android/support/wearable/view/CardFragment.html"><code>CardFragment</code></a> 63 instance 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> 69 instance 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> 72 instance 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 79 xmlns:android="http://schemas.android.com/apk/res/android" 80 xmlns:app="http://schemas.android.com/apk/res-auto" 81 android:background="@drawable/robot_background" 82 android:layout_height="match_parent" 83 android: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> 97 instance to the activity in figure 1:</p> 98 99 <pre> 100 protected 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> 116 class, 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> 118 method.</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 124 approach 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> 129 to your layout.</p> 130 131 <p>The following layout code sample demonstrates a vertical linear layout with two elements. You 132 can create more complex layouts to fit the needs of your app.</p> 133 134 <pre> 135 <android.support.wearable.view.BoxInsetLayout 136 xmlns:android="http://schemas.android.com/apk/res/android" 137 xmlns:app="http://schemas.android.com/apk/res-auto" 138 android:background="@drawable/robot_background" 139 android:layout_height="match_parent" 140 android: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> 179 element in the example layout above lets you assign gravity to 180 the card when its content is smaller than the container. This example aligns the card to the 181 bottom of the screen:</p> 182 183 <pre> 184 @Override 185 protected 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> 197 element detects the shape of the screen and displays the card differently 198 on round and square devices, using wider side margins on round screens. However, 199 placing the 200 <a href="{@docRoot}reference/android/supprot/wearable/view/CardScrollView.html"><code><CardScrollView></code></a> 201 element inside a 202 <a href="{@docRoot}reference/android/support/wearable/view/BoxInsetLayout.html"><code><BoxInsetLayout></code></a> 203 and using the <code>layout_box="bottom"</code> attribute is useful to align the card to the bottom 204 of round screens without cropping its content.</p> 205
