1page.title=Providing a Card View
2page.tags="card"
3
4trainingnavtop=true
5
6@jd:body
7
8<div id="tb-wrapper">
9<div id="tb">
10  <h2>This lesson teaches you to</h2>
11  <ol>
12    <li><a href="#presenter">Create a Card Presenter</a></li>
13    <li><a href="#card-view">Create a Card View</a></li>
14  </ol>
15  <h2>Try it out</h2>
16  <ul>
17    <li><a class="external-link" href="https://github.com/googlesamples/androidtv-Leanback">Android
18    Leanback sample app</a></li>
19  </ul>
20</div>
21</div>
22
23<p>In the previous lesson, you created a catalog browser, implemented in a browse fragment, that
24displays a list of media items. In this lesson, you create the card views for your media items and
25present them in the browse fragment.</p>
26
27<p>The {@link android.support.v17.leanback.widget.BaseCardView} class and subclasses display the meta
28data associated with a media item. The {@link android.support.v17.leanback.widget.ImageCardView}
29class used in this lesson displays an image for the content along with the media item's title.</p>
30
31<p>This lesson describes code from the <a href="https://github.com/googlesamples/androidtv-Leanback">
32Android Leanback sample app</a>, available on GitHub. Use this sample code to start your own
33app.</p>
34
35<img itemprop="image" src="{@docRoot}images/tv/card-view.png" alt="App card view" id="collapsed"/>
36<p class="img-caption"><b>Figure 1.</b> The <a href="https://github.com/googlesamples/androidtv-Leanback">
37Leanback sample app</a> image card view when selected.</p>
38
39
40<h2 id="presenter">Create a Card Presenter</h2>
41
42<p>A {@link android.support.v17.leanback.widget.Presenter} generates views and binds objects to them
43on demand. In the browse fragment where your app presents its content to the user, you create a
44{@link android.support.v17.leanback.widget.Presenter} for the content cards and pass it to the adapter
45that adds the content to the screen. In the following code, the <code>CardPresenter</code> is created
46in the {@link android.support.v4.app.LoaderManager.LoaderCallbacks#onLoadFinished(android.support.v4.content.Loader, java.lang.Object) onLoadFinished()}
47callback of the {@link android.support.v4.app.LoaderManager}.</p>
48
49<pre>
50&#64;Override
51public void onLoadFinished(Loader&lt;HashMap&lt;String, List&lt;Movie&gt;&gt;&gt; arg0,
52                           HashMap&lt;String, List&lt;Movie&gt;&gt; data) {
53
54    mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter());
55    CardPresenter cardPresenter = new CardPresenter();
56
57    int i = 0;
58
59    for (Map.Entry&lt;String, List&lt;Movie&gt;&gt; entry : data.entrySet()) {
60        ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(cardPresenter);
61        List&lt;Movie&gt; list = entry.getValue();
62
63        for (int j = 0; j &lt; list.size(); j++) {
64            listRowAdapter.add(list.get(j));
65        }
66        HeaderItem header = new HeaderItem(i, entry.getKey(), null);
67        i++;
68        mRowsAdapter.add(new ListRow(header, listRowAdapter));
69    }
70
71    HeaderItem gridHeader = new HeaderItem(i, getString(R.string.more_samples),
72            null);
73
74    GridItemPresenter gridPresenter = new GridItemPresenter();
75    ArrayObjectAdapter gridRowAdapter = new ArrayObjectAdapter(gridPresenter);
76    gridRowAdapter.add(getString(R.string.grid_view));
77    gridRowAdapter.add(getString(R.string.error_fragment));
78    gridRowAdapter.add(getString(R.string.personal_settings));
79    mRowsAdapter.add(new ListRow(gridHeader, gridRowAdapter));
80
81    setAdapter(mRowsAdapter);
82
83    updateRecommendations();
84}
85</pre>
86
87<h2 id="card-view">Create a Card View</h2>
88
89<p>In this step, you build the card presenter with a view holder for the card view that describes
90your media content items. Note that each presenter must only create one view type. If you have two
91different card view types then you need two different card presenters.</p>
92
93<p>In the {@link android.support.v17.leanback.widget.Presenter}, implement an
94{@link android.support.v17.leanback.widget.Presenter#onCreateViewHolder(android.view.ViewGroup) onCreateViewHolder()}
95callback that creates a view holder that can be used to display a content item.</p>
96
97<pre>
98&#64;Override
99public class CardPresenter extends Presenter {
100
101    private Context mContext;
102    private static int CARD_WIDTH = 313;
103    private static int CARD_HEIGHT = 176;
104    private Drawable mDefaultCardImage;
105
106    &#64;Override
107    public ViewHolder onCreateViewHolder(ViewGroup parent) {
108        mContext = parent.getContext();
109        mDefaultCardImage = mContext.getResources().getDrawable(R.drawable.movie);
110...
111</pre>
112
113<p>In the {@link android.support.v17.leanback.widget.Presenter#onCreateViewHolder(android.view.ViewGroup)
114onCreateViewHolder()} method, create a card view for content items. The sample below uses an
115{@link android.support.v17.leanback.widget.ImageCardView}.</p>
116
117<p>When a card is selected, the default behavior expands it to a larger size. If you want to designate
118a different color for the selected card, call {@link android.support.v17.leanback.widget.BaseCardView#setSelected(boolean)
119setSelected()}
120as shown here.</p>
121
122<pre>
123...
124    ImageCardView cardView = new ImageCardView(mContext) {
125        &#64;Override
126        public void setSelected(boolean selected) {
127            int selected_background = mContext.getResources().getColor(R.color.detail_background);
128            int default_background = mContext.getResources().getColor(R.color.default_background);
129            int color = selected ? selected_background : default_background;
130            findViewById(R.id.info_field).setBackgroundColor(color);
131            super.setSelected(selected);
132        }
133    };
134...
135</pre>
136
137<p>When the user opens your app, the {@link android.support.v17.leanback.widget.Presenter.ViewHolder}
138displays the <code>CardView</code> objects for your content items. You need to set these to receive
139focus from the D-pad controller by calling {@link android.view.View#setFocusable(boolean) setFocusable(true)}
140and {@link android.view.View#setFocusableInTouchMode(boolean) setFocusableInTouchMode(true)}.</p>
141
142<pre>
143...
144    cardView.setFocusable(true);
145    cardView.setFocusableInTouchMode(true);
146    return new ViewHolder(cardView);
147}
148</pre>
149
150<p>When the user selects the {@link android.support.v17.leanback.widget.ImageCardView}, it expands
151to reveal its text area with the background color you specify, as shown in figure 1.</p>
152
153
154
155