1 page.title=Creating Lists and 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="#RecyclerView">Create Lists</a></li> 10 <li><a href="#CardView">Create Cards</a></li> 11 <li><a href="#Dependencies">Add Dependencies</a></li> 12 </ol> 13 <h2>You should also read</h2> 14 <ul> 15 <li><a href="http://www.google.com/design/spec">Material design specification</a></li> 16 <li><a href="{@docRoot}design/material/index.html">Material design on Android</a></li> 17 </ul> 18 </div> 19 </div> 20 21 22 <p>To create complex lists and cards with material design styles in your apps, you can use the 23 {@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView} 24 widgets.</p> 25 26 27 <h2 id="RecyclerView">Create Lists</h2> 28 29 <p>The {@link android.support.v7.widget.RecyclerView} widget is a more advanced and flexible 30 version of {@link android.widget.ListView}. This widget is a container for displaying large data 31 sets that can be scrolled very efficiently by maintaining a limited number of views. Use the 32 {@link android.support.v7.widget.RecyclerView} widget when you have data collections whose elements 33 change at runtime based on user action or network events.</p> 34 35 <p>The {@link android.support.v7.widget.RecyclerView} class simplifies the display and handling of 36 large data sets by providing:</p> 37 38 <ul> 39 <li>Layout managers for positioning items</li> 40 <li>Default animations for common item operations, such as removal or addition of items</li> 41 </ul> 42 43 <p>You also have the flexibility to define custom layout managers and animations for {@link 44 android.support.v7.widget.RecyclerView} widgets.</p> 45 46 <img src="{@docRoot}training/material/images/RecyclerView.png" alt="" width="550" height="106"/> 47 <p class="img-caption"> 48 <strong>Figure 1</strong>. The <code>RecyclerView</code> widget. 49 </p> 50 51 <p>To use the {@link android.support.v7.widget.RecyclerView} widget, you have to specify an 52 adapter and a layout manager. To create an adapter, extend the {@link 53 android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} class. The details 54 of the implementation depend on the specifics of your dataset and the type of views. For more 55 information, see the <a href="#RVExamples">examples</a> below.</p> 56 57 <div style="float:right"> 58 <img src="{@docRoot}design/material/images/list_mail.png" alt="" width="250" height="426"/> 59 <p class="img-caption" style="margin-left:8px"> 60 <strong>Figure 2</strong> - Lists with <code>RecyclerView</code>. 61 </p> 62 </div> 63 64 <p>A <strong>layout manager</strong> positions item views inside a {@link 65 android.support.v7.widget.RecyclerView} and determines when to reuse item views that are no 66 longer visible to the user. To reuse (or <em>recycle</em>) a view, a layout manager may ask the 67 adapter to replace the contents of the view with a different element from the dataset. Recycling 68 views in this manner improves performance by avoiding the creation of unnecessary views or 69 performing expensive {@link android.app.Activity#findViewById findViewById()} lookups.</p> 70 71 <p>{@link android.support.v7.widget.RecyclerView} provides these built-in layout managers:</p> 72 73 <ul> 74 <li>{@link android.support.v7.widget.LinearLayoutManager} shows items in a vertical or horizontal 75 scrolling list.</li> 76 <li>{@link android.support.v7.widget.GridLayoutManager} shows items in a grid.</li> 77 <li>{@link android.support.v7.widget.StaggeredGridLayoutManager} shows items in a staggered grid.</li> 78 </ul> 79 80 <p>To create a custom layout manager, extend the {@link 81 android.support.v7.widget.RecyclerView.LayoutManager RecyclerView.LayoutManager} class.</p> 82 83 <h3>Animations</h3> 84 85 <p>Animations for adding and removing items are enabled by default in {@link 86 android.support.v7.widget.RecyclerView}. To customize these animations, extend the 87 {@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} class and use 88 the {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()} 89 method.</p> 90 91 <h3 id="RVExamples">Examples</h3> 92 93 <p>The following code example demonstrates how to add the 94 {@link android.support.v7.widget.RecyclerView} to a layout:</p> 95 96 <pre> 97 <!-- A RecyclerView with some commonly used attributes --> 98 <android.support.v7.widget.RecyclerView 99 android:id="@+id/my_recycler_view" 100 android:scrollbars="vertical" 101 android:layout_width="match_parent" 102 android:layout_height="match_parent"/> 103 </pre> 104 105 <p>Once you have added a {@link android.support.v7.widget.RecyclerView} widget to your layout, 106 obtain a handle to the object, connect it to a layout manager, and attach an adapter for the data 107 to be displayed:</p> 108 109 <pre> 110 public class MyActivity extends Activity { 111 private RecyclerView mRecyclerView; 112 private RecyclerView.Adapter mAdapter; 113 private RecyclerView.LayoutManager mLayoutManager; 114 115 @Override 116 protected void onCreate(Bundle savedInstanceState) { 117 super.onCreate(savedInstanceState); 118 setContentView(R.layout.my_activity); 119 mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view); 120 121 // use this setting to improve performance if you know that changes 122 // in content do not change the layout size of the RecyclerView 123 mRecyclerView.setHasFixedSize(true); 124 125 // use a linear layout manager 126 mLayoutManager = new LinearLayoutManager(this); 127 mRecyclerView.setLayoutManager(mLayoutManager); 128 129 // specify an adapter (see also next example) 130 mAdapter = new MyAdapter(myDataset); 131 mRecyclerView.setAdapter(mAdapter); 132 } 133 ... 134 } 135 </pre> 136 137 <p>The adapter provides access to the items in your data set, creates views for items, and 138 replaces the content of some of the views with new data items when the original item is no longer 139 visible. The following code example shows a simple implementation for a data set that consists 140 of an array of strings displayed using {@link android.widget.TextView} widgets:</p> 141 142 <pre> 143 public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> { 144 private String[] mDataset; 145 146 // Provide a reference to the views for each data item 147 // Complex data items may need more than one view per item, and 148 // you provide access to all the views for a data item in a view holder 149 public static class ViewHolder extends RecyclerView.ViewHolder { 150 // each data item is just a string in this case 151 public TextView mTextView; 152 public ViewHolder(TextView v) { 153 super(v); 154 mTextView = v; 155 } 156 } 157 158 // Provide a suitable constructor (depends on the kind of dataset) 159 public MyAdapter(String[] myDataset) { 160 mDataset = myDataset; 161 } 162 163 // Create new views (invoked by the layout manager) 164 @Override 165 public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, 166 int viewType) { 167 // create a new view 168 View v = LayoutInflater.from(parent.getContext()) 169 .inflate(R.layout.my_text_view, parent, false); 170 // set the view's size, margins, paddings and layout parameters 171 ... 172 ViewHolder vh = new ViewHolder(v); 173 return vh; 174 } 175 176 // Replace the contents of a view (invoked by the layout manager) 177 @Override 178 public void onBindViewHolder(ViewHolder holder, int position) { 179 // - get element from your dataset at this position 180 // - replace the contents of the view with that element 181 holder.mTextView.setText(mDataset[position]); 182 183 } 184 185 // Return the size of your dataset (invoked by the layout manager) 186 @Override 187 public int getItemCount() { 188 return mDataset.length; 189 } 190 } 191 </pre> 192 193 194 <div style="float:right;margin-top:15px;margin-left:30px"> 195 <img src="{@docRoot}design/material/images/card_travel.png" alt="" width="225" height="383"> 196 <p class="img-caption" style="margin-left:12px"> 197 <strong>Figure 3</strong>. Card examples. 198 </p> 199 </div> 200 201 <h2 id="CardView">Create Cards</h2> 202 203 <p>{@link android.support.v7.widget.CardView} extends the {@link android.widget.FrameLayout} class 204 and lets you show information inside cards that have a consistent look across the platform. {@link 205 android.support.v7.widget.CardView} widgets can have shadows and rounded corners.</p> 206 207 <p>To create a card with a shadow, use the <code>card_view:cardElevation</code> attribute. 208 {@link android.support.v7.widget.CardView} uses real elevation and dynamic shadows on Android 5.0 209 (API level 21) and above and falls back to a programmatic shadow implementation on earlier versions. 210 For more information, see <a href="{@docRoot}training/material/compatibility.html">Maintaining 211 Compatibility</a>.</p> 212 213 <p>Use these properties to customize the appearance of the 214 {@link android.support.v7.widget.CardView} widget:</p> 215 216 <ul> 217 <li>To set the corner radius in your layouts, use the <code>card_view:cardCornerRadius</code> 218 attribute.</li> 219 <li>To set the corner radius in your code, use the <code>CardView.setRadius</code> method.</li> 220 <li>To set the background color of a card, use the <code>card_view:cardBackgroundColor</code> 221 attribute.</li> 222 </ul> 223 224 <p>The following code example shows you how to include a {@link android.support.v7.widget.CardView} 225 widget in your layout:</p> 226 227 <pre> 228 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 229 xmlns:tools="http://schemas.android.com/tools" 230 xmlns:card_view="http://schemas.android.com/apk/res-auto" 231 ... > 232 <!-- A CardView that contains a TextView --> 233 <android.support.v7.widget.CardView 234 xmlns:card_view="http://schemas.android.com/apk/res-auto" 235 android:id="@+id/card_view" 236 android:layout_gravity="center" 237 android:layout_width="200dp" 238 android:layout_height="200dp" 239 card_view:cardCornerRadius="4dp"> 240 241 <TextView 242 android:id="@+id/info_text" 243 android:layout_width="match_parent" 244 android:layout_height="match_parent" /> 245 </android.support.v7.widget.CardView> 246 </LinearLayout> 247 </pre> 248 249 <p>For more information, see the API reference for {@link android.support.v7.widget.CardView}.</p> 250 251 252 <h2 id="Dependencies">Add Dependencies</h2> 253 254 <p>The {@link android.support.v7.widget.RecyclerView} and {@link android.support.v7.widget.CardView} 255 widgets are part of the <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support 256 Libraries</a>. To use these widgets in your project, add these 257 <a href="{@docRoot}sdk/installing/studio-build.html#dependencies">Gradle dependencies</a> to your 258 app's module:</p> 259 260 <pre> 261 dependencies { 262 ... 263 compile 'com.android.support:cardview-v7:21.0.+' 264 compile 'com.android.support:recyclerview-v7:21.0.+' 265 } 266 </pre> 267
