| page.title=Building a Details View |
| page.tags=tv, detailsfragment |
| helpoutsWidget=true |
| |
| trainingnavtop=true |
| |
| @jd:body |
| |
| <div id="tb-wrapper"> |
| <div id="tb"> |
| <h2>This lesson teaches you to</h2> |
| <ol> |
| <li><a href="#details-presenter">Build a Details Presenter</a></li> |
| <li><a href="#details-fragment">Extend the Details Fragment</a> |
| <li><a href="#activity">Create a Details Activity</a></li> |
| <li><a href="#item-listener">Define a Listener for Clicked Items</a></li> |
| </ol> |
| </div> |
| </div> |
| |
| <p> |
| The media browsing interface classes provided by the <a href= |
| "{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support library</a> |
| include classes for displaying additional information about a media item, such as a description |
| or reviews, and for taking action on that item, such as purchasing it or playing its content. |
| </p> |
| |
| <p> |
| This lesson discusses how to create a presenter class for media item details, and how to extend |
| the {@link android.support.v17.leanback.app.DetailsFragment} class to implement a details view |
| for a media item when it is selected by a user. |
| </p> |
| |
| <p class="note"> |
| <strong>Note:</strong> The implementation example shown here uses an additional activity to |
| contain the {@link android.support.v17.leanback.app.DetailsFragment}. However, it is possible to |
| avoid creating a second activity by replacing the current {@link |
| android.support.v17.leanback.app.BrowseFragment} with a {@link |
| android.support.v17.leanback.app.DetailsFragment} within the <em>same</em> activity using |
| fragment transactions. For more information on using fragment transactions, see the <a href= |
| "{@docRoot}training/basics/fragments/fragment-ui.html#Replace">Building a Dynamic UI with |
| Fragments</a> training. |
| </p> |
| |
| |
| <h2 id="details-presenter">Build a Details Presenter</h2> |
| |
| <p> |
| In the media browsing framework provided by the leanback library, you use presenter |
| objects to control the display of data on screen, including media item details. The framework |
| provides the {@link android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter} |
| class for this purpose, which is a nearly complete implementation of the presenter for media item |
| details. All you have to do is implement the {@link |
| android.support.v17.leanback.widget.AbstractDetailsDescriptionPresenter#onBindDescription |
| onBindDescription()} method to bind the view fields to your data objects, as shown in the |
| following code sample: |
| </p> |
| |
| <pre> |
| public class DetailsDescriptionPresenter |
| extends AbstractDetailsDescriptionPresenter { |
| |
| @Override |
| protected void onBindDescription(ViewHolder viewHolder, Object itemData) { |
| MyMediaItemDetails details = (MyMediaItemDetails) itemData; |
| // In a production app, the itemData object contains the information |
| // needed to display details for the media item: |
| // viewHolder.getTitle().setText(details.getShortTitle()); |
| |
| // Here we provide static data for testing purposes: |
| viewHolder.getTitle().setText(itemData.toString()); |
| viewHolder.getSubtitle().setText("2014 Drama TV-14"); |
| viewHolder.getBody().setText("Lorem ipsum dolor sit amet, consectetur " |
| + "adipisicing elit, sed do eiusmod tempor incididunt ut labore " |
| + " et dolore magna aliqua. Ut enim ad minim veniam, quis " |
| + "nostrud exercitation ullamco laboris nisi ut aliquip ex ea " |
| + "commodo consequat."); |
| } |
| } |
| </pre> |
| |
| |
| <h2 id="details-fragment">Extend the Details Fragment</h2> |
| |
| <p> |
| When using the {@link android.support.v17.leanback.app.DetailsFragment} class for displaying |
| your media item details, extend that class to provide additional content such as a preview |
| image and actions for the media item. You can also provide additional content, such as a list of |
| related media items. |
| </p> |
| |
| <p> |
| The following example code demonstrates how to use the presenter class shown in the |
| previous section, to add a preview image and actions for the media item being viewed. This example |
| also shows the addition of a related media items row, which appears below the details listing. |
| </p> |
| |
| <pre> |
| public class MediaItemDetailsFragment extends DetailsFragment { |
| private static final String TAG = "MediaItemDetailsFragment"; |
| private ArrayObjectAdapter mRowsAdapter; |
| |
| @Override |
| public void onCreate(Bundle savedInstanceState) { |
| Log.i(TAG, "onCreate"); |
| super.onCreate(savedInstanceState); |
| |
| buildDetails(); |
| } |
| |
| private void buildDetails() { |
| ClassPresenterSelector selector = new ClassPresenterSelector(); |
| // Attach your media item details presenter to the row presenter: |
| DetailsOverviewRowPresenter rowPresenter = |
| new DetailsOverviewRowPresenter(new DetailsDescriptionPresenter()); |
| |
| selector.addClassPresenter(DetailsOverviewRow.class, rowPresenter); |
| selector.addClassPresenter(ListRow.class, |
| new ListRowPresenter()); |
| mRowsAdapter = new ArrayObjectAdapter(selector); |
| |
| Resources res = getActivity().getResources(); |
| DetailsOverviewRow detailsOverview = new DetailsOverviewRow( |
| "Media Item Details"); |
| |
| // Add images and action buttons to the details view |
| detailsOverview.setImageDrawable(res.getDrawable(R.drawable.jelly_beans)); |
| detailsOverview.addAction(new Action(1, "Buy $9.99")); |
| detailsOverview.addAction(new Action(2, "Rent $2.99")); |
| mRowsAdapter.add(detailsOverview); |
| |
| // Add a Related items row |
| ArrayObjectAdapter listRowAdapter = new ArrayObjectAdapter( |
| new StringPresenter()); |
| listRowAdapter.add("Media Item 1"); |
| listRowAdapter.add("Media Item 2"); |
| listRowAdapter.add("Media Item 3"); |
| HeaderItem header = new HeaderItem(0, "Related Items", null); |
| mRowsAdapter.add(new ListRow(header, listRowAdapter)); |
| |
| setAdapter(mRowsAdapter); |
| } |
| } |
| </pre> |
| |
| |
| <h3 id="activity">Create a Details Activity</h3> |
| |
| <p> |
| Fragments such as the {@link android.support.v17.leanback.app.DetailsFragment} must be contained |
| within an activity in order to be used for display. Creating an activity for your details view, |
| separate from the browse activity, enables you to invoke your details view using an |
| {@link android.content.Intent}. This |
| section explains how to build an activity to contain your implementation of the detail view for |
| your media items. |
| </p> |
| |
| <p> |
| Start creating the details activity by building a layout that references your implementation of |
| the {@link android.support.v17.leanback.app.DetailsFragment}: |
| </p> |
| |
| <pre> |
| <!-- file: res/layout/details.xml --> |
| |
| <fragment xmlns:android="http://schemas.android.com/apk/res/android" |
| <strong>android:name="com.example.android.mediabrowser.MediaItemDetailsFragment"</strong> |
| android:id="@+id/details_fragment" |
| android:layout_width="match_parent" |
| android:layout_height="match_parent" |
| /> |
| </pre> |
| |
| <p> |
| Next, create an activity class that uses the layout shown in the previous code example: |
| </p> |
| |
| <pre> |
| public class DetailsActivity extends Activity |
| { |
| @Override |
| public void onCreate(Bundle savedInstanceState) { |
| super.onCreate(savedInstanceState); |
| <strong>setContentView(R.layout.details);</strong> |
| } |
| } |
| </pre> |
| |
| <p> |
| Finally, add this new activity to the manifest. Remember to apply the Leanback theme to ensure |
| that the user interface is consistent with the media browse activity: |
| </p> |
| |
| <pre> |
| <application> |
| ... |
| |
| <activity android:name=".DetailsActivity" |
| android:exported="true" |
| <strong>android:theme="@style/Theme.Leanback"/></strong> |
| |
| </application> |
| </pre> |
| |
| |
| <h3 id="item-listener">Define a Listener for Clicked Items</h3> |
| |
| <p> |
| After you have implemented the {@link android.support.v17.leanback.app.DetailsFragment}, |
| modify your main media browsing view to move to your details view when a user clicks on a media |
| item. In order to enable this behavior, add an |
| {@link android.support.v17.leanback.widget.OnItemViewClickedListener} object to the |
| {@link android.support.v17.leanback.app.BrowseFragment} that fires an intent to start the item |
| details activity. |
| </p> |
| |
| <p> |
| The following example shows how to implement a listener to start the details view when a user |
| clicks a media item in the main media browsing activity: |
| </p> |
| |
| <pre> |
| public class BrowseMediaActivity extends Activity { |
| ... |
| |
| @Override |
| protected void onCreate(Bundle savedInstanceState) { |
| ... |
| |
| // create the media item rows |
| buildRowsAdapter(); |
| |
| // add a listener for selected items |
| mBrowseFragment.OnItemViewClickedListener( |
| new OnItemViewClickedListener() { |
| @Override |
| public void onItemClicked(Object item, Row row) { |
| System.out.println("Media Item clicked: " + item.toString()); |
| Intent intent = new Intent(BrowseMediaActivity.this, |
| DetailsActivity.class); |
| // pass the item information |
| intent.getExtras().putLong("id", item.getId()); |
| startActivity(intent); |
| } |
| }); |
| } |
| } |
| </pre> |