1page.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}
24widgets.</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
30version of {@link android.widget.ListView}. This widget is a container for displaying large data
31sets 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
33change 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
36large 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
44android.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
52adapter and a layout manager. To create an adapter, extend the {@link
53android.support.v7.widget.RecyclerView.Adapter RecyclerView.Adapter} class. The details
54of the implementation depend on the specifics of your dataset and the type of views. For more
55information, 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
65android.support.v7.widget.RecyclerView} and determines when to reuse item views that are no
66longer visible to the user. To reuse (or <em>recycle</em>) a view, a layout manager may ask the
67adapter to replace the contents of the view with a different element from the dataset. Recycling
68views in this manner improves performance by avoiding the creation of unnecessary views or
69performing 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
75scrolling 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
81android.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
86android.support.v7.widget.RecyclerView}. To customize these animations, extend the
87{@link android.support.v7.widget.RecyclerView.ItemAnimator RecyclerView.ItemAnimator} class and use
88the {@link android.support.v7.widget.RecyclerView#setItemAnimator RecyclerView.setItemAnimator()}
89method.</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&lt;!-- A RecyclerView with some commonly used attributes -->
98&lt;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,
106obtain a handle to the object, connect it to a layout manager, and attach an adapter for the data
107to be displayed:</p>
108
109<pre>
110public class MyActivity extends Activity {
111    private RecyclerView mRecyclerView;
112    private RecyclerView.Adapter mAdapter;
113    private RecyclerView.LayoutManager mLayoutManager;
114
115    &#64;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
138replaces the content of some of the views with new data items when the original item is no longer
139visible. The following code example shows a simple implementation for a data set that consists
140of an array of strings displayed using {@link android.widget.TextView} widgets:</p>
141
142<pre>
143public class MyAdapter extends RecyclerView.Adapter&lt;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    &#64;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    &#64;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    &#64;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
204and lets you show information inside cards that have a consistent look across the platform. {@link
205android.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.
210For more information, see <a href="{@docRoot}training/material/compatibility.html">Maintaining
211Compatibility</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>
221attribute.</li>
222</ul>
223
224<p>The following code example shows you how to include a {@link android.support.v7.widget.CardView}
225widget in your layout:</p>
226
227<pre>
228&lt;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    &lt;!-- A CardView that contains a TextView -->
233    &lt;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        &lt;TextView
242            android:id="@+id/info_text"
243            android:layout_width="match_parent"
244            android:layout_height="match_parent" />
245    &lt;/android.support.v7.widget.CardView>
246&lt;/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}
255widgets are part of the <a href="{@docRoot}tools/support-library/features.html#v7">v7 Support
256Libraries</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
258app's module:</p>
259
260<pre>
261dependencies {
262    ...
263    compile 'com.android.support:cardview-v7:21.0.+'
264    compile 'com.android.support:recyclerview-v7:21.0.+'
265}
266</pre>
267