diff options
| author | Joe Fernandez <joefernandez@google.com> | 2014-10-02 10:13:16 -0700 |
|---|---|---|
| committer | Joe Fernandez <joefernandez@google.com> | 2014-10-12 19:06:55 -0700 |
| commit | f666355b2d9dbffffa640aff7731a8ba8309eaaa (patch) | |
| tree | 5547b6c444af0bd0c55b42f3f6161c39a77e67d6 /docs/html/preview | |
| parent | d86a2f5b344a6c3520ab05c02df8a5b3fdfa5aea (diff) | |
| download | frameworks_base-f666355b2d9dbffffa640aff7731a8ba8309eaaa.zip frameworks_base-f666355b2d9dbffffa640aff7731a8ba8309eaaa.tar.gz frameworks_base-f666355b2d9dbffffa640aff7731a8ba8309eaaa.tar.bz2 | |
docs: migrate TV Playback app content
Change-Id: I851dac6423cba3b76c85e1ac5b6c03a98272d868
Diffstat (limited to 'docs/html/preview')
| -rw-r--r-- | docs/html/preview/tv/ui/browse.jd | 198 | ||||
| -rw-r--r-- | docs/html/preview/tv/ui/details.jd | 214 |
2 files changed, 0 insertions, 412 deletions
diff --git a/docs/html/preview/tv/ui/browse.jd b/docs/html/preview/tv/ui/browse.jd deleted file mode 100644 index d6b97c1..0000000 --- a/docs/html/preview/tv/ui/browse.jd +++ /dev/null @@ -1,198 +0,0 @@ -page.title=BrowseFragment - -@jd:body - -<div id="qv-wrapper"> -<div id="qv"> - <h2>In this document</h2> - <ol> - <li><a href="#layout">Media Browse Layout</a></li> - <li><a href="#lists">Displaying Media Lists</a></li> - <li><a href="#background">Updating the Background</a></li> - </ol> - -</div> -</div> - -<p>The <a href="{@docRoot}preview/tv/start/index.html#tv-libraries">Leanback support library</a> - provides several APIs for displaying and browsing media catalogs - on the TV devices. This guide discusses how to use the classes provided by this library to - implement a user interface for browsing music or videos from your app's media catalog.</p> - - -<h2 id="layout">Media Browse Layout</h2> - -<p>The {@code BrowseFragment} class in the Leanback support library allows you to create a primary - layout for browsing categories and rows of media items with a minimum of code. The following - example shows how to create a layout that contains a {@code BrowseFragment}:</p> - -<pre> -<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" - android:layout_width="match_parent" - android:layout_height="match_parent" - android:orientation="vertical" - > - - <fragment - <strong>android:name="android.support.v17.leanback.app.BrowseFragment"</strong> - android:id="@+id/browse_fragment" - android:layout_width="match_parent" - android:layout_height="match_parent" - /> -</LinearLayout> -</pre> - -<p>In order to work with this layout in an activity, retrieve the {@code BrowseFragment} element - from the layout. Use the methods in {@code BrowseFragment} to set display parameters such as the - icon, title and whether category headers are enabled. The following code sample demonstrates how - to set the layout parameters for a {@code BrowseFragment} in a layout:</p> - -<pre> -public class BrowseMediaActivity extends Activity { - - public static final String TAG ="BrowseActivity"; - - protected BrowseFragment mBrowseFragment; - - @Override - protected void onCreate(Bundle savedInstanceState) { - super.onCreate(savedInstanceState); - setContentView(R.layout.browse_fragment); - - final FragmentManager fragmentManager = getFragmentManager(); - <strong>mBrowseFragment = (BrowseFragment) fragmentManager.findFragmentById( - R.id.browse_fragment);</strong> - - // Set display parameters for the BrowseFragment - mBrowseFragment.setHeadersState(BrowseFragment.HEADERS_ENABLED); - mBrowseFragment.setTitle(getString(R.string.app_name)); - mBrowseFragment.setBadgeDrawable(getResources().getDrawable(R.drawable.ic_launcher)); - mBrowseFragment.setBrowseParams(params); - - } -} -</pre> - - -<h2 id="lists">Displaying Media Lists</h2> - -<p>The {@code BrowseFragment} allows you to define and display browsable media content categories and - media items from a media catalog using adapters and presenters. Adapters enable you to connect to - local or online data sources that contain your media catalog information. Presenter classes hold - data about media items and provide layout information for displaying an item on screen.</p> - -<p>The following example code shows an implementation of a presenter for displaying string - data:</p> - -<pre> -public class StringPresenter extends Presenter { - private static final String TAG = "StringPresenter"; - - public ViewHolder onCreateViewHolder(ViewGroup parent) { - TextView textView = new TextView(parent.getContext()); - textView.setFocusable(true); - textView.setFocusableInTouchMode(true); - textView.setBackground( - parent.getContext().getResources().getDrawable(R.drawable.text_bg)); - return new ViewHolder(textView); - } - - public void onBindViewHolder(ViewHolder viewHolder, Object item) { - ((TextView) viewHolder.view).setText(item.toString()); - } - - public void onUnbindViewHolder(ViewHolder viewHolder) { - // no op - } -} -</pre> - -<p>Once you have constructed a presenter class for your media items, you can build and attach an - adapter to the {@code BrowseFragment} to display those items on screen for browsing by the user. The - following example code demonstrates how to construct an adapter to display categories and items - in those categories using the StringPresenter class shown in the previous code example:</p> - -<pre> -private ArrayObjectAdapter mRowsAdapter; -private static final int NUM_ROWS = 4; - -@Override -protected void onCreate(Bundle savedInstanceState) { - ... - - buildRowsAdapter(); -} - -private void buildRowsAdapter() { - mRowsAdapter = new ArrayObjectAdapter(new ListRowPresenter()); - - for (int i = 0; i < NUM_ROWS; ++i) { - 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(i, "Category " + i, null); - mRowsAdapter.add(new ListRow(header, listRowAdapter)); - } - - mBrowseFragment.setAdapter(mRowsAdapter); -} -</pre> - -<p>This example shows a static implementation of the adapters. A typical media browsing - application uses data from an online database or web service. For an example of a browsing - application that uses data retrieved from the web, see the - <a href="http://github.com/googlesamples/androidtv-leanback">Android TV</a> sample app.</p> - - -<h2 id="background">Updating the Background</h2> - -<p>In order to add visual interest to a media-browsing app on TV, you can update the background - image as users browse through content. This technique can make interaction with your app feel more - cinematic and enjoyable for users.</p> - -<p>The Leanback support library provides a {@code BackgroundManager} class for changing the - background of your TV app activity. The following example shows how to create a simple method - for updating the background within your TV app activity:</p> - -<pre> -protected void updateBackground(Drawable drawable) { - BackgroundManager.getInstance(this).setDrawable(drawable); -} -</pre> - -<p>Many of the existing media-browse apps automatically update the background as the user - navigates through media listings. In order to do this, you can set up a selection listener to - automatically update the background based on the user's current selection. The following example - shows you how to set up an {@code OnItemSelectedListener} - class to catch selection events and update the background:</p> - -<pre> -protected void clearBackground() { - BackgroundManager.getInstance(this).setDrawable(mDefaultBackground); -} - -protected OnItemSelectedListener getDefaultItemSelectedListener() { - return new OnItemSelectedListener() { - @Override - public void onItemSelected(Object item, Row row) { - if (item instanceof Movie ) { - URI uri = ((Movie)item).getBackdropURI(); - updateBackground(uri); - } else { - clearBackground(); - } - } - }; -} -</pre> - -<p class="note"> - <strong>Note:</strong> The implementation above is a simple example shown for purposes of - illustration. When creating this function in your own app, you should consider running the - background update action in a separate thread for better performance. In addition, if you are - planning on updating the background in response to users scrolling through items, consider adding - a time to delay a background image update until the user settles on an item. This technique avoids - excessive background image updates. -</p> diff --git a/docs/html/preview/tv/ui/details.jd b/docs/html/preview/tv/ui/details.jd deleted file mode 100644 index 8b8fa8b5..0000000 --- a/docs/html/preview/tv/ui/details.jd +++ /dev/null @@ -1,214 +0,0 @@ -page.title=DetailFragment - -@jd:body - -<div id="qv-wrapper"> -<div id="qv"> - <h2>In this document</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">Creating a Details Activity</a></li> - <li><a href="#item-listener">Listener for Clicked Items</a></li> - </li> - </ol> -</div> -</div> - -<p>The media browsing interface classes provided by the - <a href="{@docRoot}preview/tv/start/index.html#tv-libraries">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. This - section discusses how to create a presenter class for media item details and extend the - {@code 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 {@code DetailsFragment}. However, it is possible to avoid creating a second activity - by replacing the current {@code BrowseFragment} with a {@code 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 for by the leanback support library, you use - presenter objects to control the display of data on screen, including media item details. The - framework provides the {@code 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 {@code 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 you use the {@code DetailsFragment} class for displaying your media item details, you - 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 you created in the - previous section, 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">Creating a Details Activity</h3> - -<p>Fragments such as the {@code 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 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 {@code 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">Listener for Clicked Items</h3> - -<p>After you have implemented the {@code DetailsFragment}, you must 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 {@code OnItemClickedListener} object to the 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.setOnItemClickedListener( - new OnItemClickedListener() { - @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> |
