1 page.title=Providing a Card View 2 page.tags="card" 3 4 trainingnavtop=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 24 displays a list of media items. In this lesson, you create the card views for your media items and 25 present them in the browse fragment.</p> 26 27 <p>The {@link android.support.v17.leanback.widget.BaseCardView} class and subclasses display the meta 28 data associated with a media item. The {@link android.support.v17.leanback.widget.ImageCardView} 29 class 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"> 32 Android Leanback sample app</a>, available on GitHub. Use this sample code to start your own 33 app.</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"> 37 Leanback 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 43 on 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 45 that adds the content to the screen. In the following code, the <code>CardPresenter</code> is created 46 in the {@link android.support.v4.app.LoaderManager.LoaderCallbacks#onLoadFinished(android.support.v4.content.Loader, java.lang.Object) onLoadFinished()} 47 callback of the {@link android.support.v4.app.LoaderManager}.</p> 48 49 <pre> 50 @Override 51 public void onLoadFinished(Loader<HashMap<String, List<Movie>>> arg0, 52 HashMap<String, List<Movie>> data) { 53 54 mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter()); 55 CardPresenter cardPresenter = new CardPresenter(); 56 57 int i = 0; 58 59 for (Map.Entry<String, List<Movie>> entry : data.entrySet()) { 60 ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter(cardPresenter); 61 List<Movie> list = entry.getValue(); 62 63 for (int j = 0; j < 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 90 your media content items. Note that each presenter must only create one view type. If you have two 91 different 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()} 95 callback that creates a view holder that can be used to display a content item.</p> 96 97 <pre> 98 @Override 99 public 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 @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) 114 onCreateViewHolder()} 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 118 a different color for the selected card, call {@link android.support.v17.leanback.widget.BaseCardView#setSelected(boolean) 119 setSelected()} 120 as shown here.</p> 121 122 <pre> 123 ... 124 ImageCardView cardView = new ImageCardView(mContext) { 125 @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} 138 displays the <code>CardView</code> objects for your content items. You need to set these to receive 139 focus from the D-pad controller by calling {@link android.view.View#setFocusable(boolean) setFocusable(true)} 140 and {@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 151 to reveal its text area with the background color you specify, as shown in figure 1.</p> 152 153 154 155
