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