- O novo widget CardView permite exibir informações importantes dentro de
+
O novo widget CardView permite exibir informações importantes dentro de
cartões que têm aparência consistente.
O Material Design é um guia abrangente para design visual, de movimento e de +
O Material Design é um guia abrangente para design visual, de movimento e de interação para diversas plataformas e dispositivos. O Android agora é compatível com -aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas -nas especificações do Material Design e use os novos +aplicativos do Material Design. Para usar o Material Design nos aplicativos Android, siga as orientações definidas +nas especificações do Material Design e use os novos componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e em posteriores.
O Android fornece os seguintes elementos para criar aplicativos do Material Design:
@@ -59,7 +59,7 @@ componentes e funcionalidades disponíveis no Android 5.0 (API de nível 21) e eO tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem +
O tema do Material fornece um novo estilo para o seu aplicativo, widgets de sistema que permitem definir a paleta de cores e as animações padrão para feedback de toque e transições de atividades.
@@ -79,13 +79,13 @@ definir a paleta de cores e as animações padrão para feedback de toque e tranPara obter mais informações, consulte Como usar o tema
+ Para obter mais informações, consulte Como usar o tema
do Material. O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do
+ O Android fornece dois novos widgets para exibir cartões e listas com estilos e animações do
Material Design:Listas e cartões
-
- O novo widget CardView permite exibir informações importantes dentro de
+
O novo widget CardView permite exibir informações importantes dentro de
cartões que têm aparência consistente.
Para obter mais informações, consulte Como criar
+ Para obter mais informações, consulte Como criar
listas e cartões. Além das propriedades X e Y, vistas no Android agora têm uma propriedade
+ Além das propriedades X e Y, vistas no Android agora têm uma propriedade
Z. Essa nova propriedade representa a elevação de uma vista, que determina:Sombras de vistas
-
@@ -130,7 +130,7 @@ Z. Essa nova propriedade representa a elevação de uma vista, que determina:
Para obter mais informações, consulte Como
+ Para obter mais informações, consulte Como
definir sombras e recortar visualizações. Animações de feedback de toque são integradas em várias vistas padrões, como botões. As novas APIs
permitem personalizar essas animações e adicioná-las às vistas personalizadas. Para obter mais informações, consulte Como definir
+ Para obter mais informações, consulte Como definir
animações personalizadas. Para obter mais informações, consulte Como trabalhar
+ Para obter mais informações, consulte Como trabalhar
com desenháveis. Анимация для реакции на касание встроена а некоторые стандартные представления, например, кнопки. Новые API-интерфейсы
позволяют разработчику настраивать эти анимации и добавлять их в свои нестандартные представления. Дополнительные сведения, см. в разделе Определение настраиваемой
+ Дополнительные сведения, см. в разделе Определение настраиваемой
анимации. Дополнительные сведения см. в разделе Работа с
+ Дополнительные сведения см. в разделе Работа с
элементами дизайна. These classes teach you how to build apps for TV devices. Note: For details on how to publish your TV apps in Google Play,
-see Distribute to Android TV.
- Media apps that run on TV need to allow users to browse its content offerings, make a
+ A media app that runs on a TV needs to allow users to browse its content offerings, make a
selection, and start playing content. The content browsing experience for apps of this type
should be simple and intuitive, as well as visually pleasing and engaging.
This lesson discusses how to use the classes provided by the v17 leanback support library to
- implement a user interface for browsing music or videos from your app's media catalog.
+ "{@docRoot}tools/support-library/features.html#v17-leanback">v17 leanback support library Figure 1. The
+Leanback sample app browse fragment displays video catalog data. The application's main activity sets this view, as shown in the following example: The {@link android.support.v17.leanback.app.BrowseFragment} methods populate the view with the
+video data and UI elements and set the layout parameters such as the icon, title, and whether
+category headers are enabled. The application's subclass that implements the
+{@link android.support.v17.leanback.app.BrowseFragment} methods also sets
+up event listeners for user actions on the UI elements, and prepares the background
+manager, as shown in the following example: In the sample above, the private method The browse fragment shown in figure 1 lists the video category names (the row headers) in the
+left pane. Text views display these category names from the video database. You can customize the
+header to include additional views in a more complex layout. The following sections show how to
+include an image view that displays an icon next to the category name, as shown in figure 2. Figure 2. The row headers in the browse fragment, with both an icon
+and a text label. The layout for the row header is defined as follows:
- In order to work with this layout in an activity, retrieve the {@link
- android.support.v17.leanback.app.BrowseFragment} element from the layout. Use the methods in this
- class 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 {@link
- android.support.v17.leanback.app.BrowseFragment} in a layout:
+ Use a {@link android.support.v17.leanback.widget.Presenter} and implement the
+abstract methods to create, bind, and unbind the view holder. The following
+example shows how to bind the viewholder with two views, an
+{@link android.widget.ImageView} and a {@link android.widget.TextView}.
This example shows how to define the presenter for a complex layout with
+multiple views, and you could use this pattern to do something even more complex.
+However, an easier way to combine a {@link android.widget.TextView} with a
+drawable resource is to use the
+{@code TextView.drawableLeft} attribute. Doing it this way, you don't need the
+{@link android.widget.ImageView} shown here. In the {@link android.support.v17.leanback.app.BrowseFragment} implementation that displays the
+catalog browser, use the {@link android.support.v17.leanback.app.BrowseFragment#setHeaderPresenterSelector(android.support.v17.leanback.widget.PresenterSelector) setHeaderPresenterSelector()}
+method to set the presenter for the row header, as shown in the following example. Sometimes you may not want the row headers to appear: when there aren't enough categories to
+require a scrollable list, for example. Call the {@link android.support.v17.leanback.app.BrowseFragment#setHeadersState(int) BrowseFragment.setHeadersState()}
+method during the fragment's {@link android.app.Fragment#onActivityCreated(android.os.Bundle) onActivityCreated()}
+method to hide or disable the row headers. The {@link android.support.v17.leanback.app.BrowseFragment#setHeadersState(int) setHeadersState()}
+method sets the initial state of the headers in the browse fragment given one of the following
+constants as a parameter: If either {@link android.support.v17.leanback.app.BrowseFragment#HEADERS_ENABLED} or
+{@link android.support.v17.leanback.app.BrowseFragment#HEADERS_HIDDEN} is set, you can call
+{@link android.support.v17.leanback.app.BrowseFragment#setHeadersTransitionOnBackEnabled(boolean) setHeadersTransitionOnBackEnabled()}
+to support moving back to the row header from a selected content item in the row. This is enabled by
+default (if you don't call the method), but if you want to handle the back movement yourself, you
+should pass the value
- The {@link android.support.v17.leanback.app.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. Presenters hold data about media items and provide layout information
- for displaying an item on screen.
+ The {@link android.support.v17.leanback.app.BrowseFragment} class 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.
+ Adapters use presenters to create views and bind data to those views for
+ displaying an item on screen.
@@ -131,11 +342,12 @@ public class StringPresenter extends Presenter {
- Once you have constructed a presenter class for your media items, you can build and attach an
- adapter to the {@link android.support.v17.leanback.app.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 {@code StringPresenter}
- class shown in the previous code example:
+ Once you have constructed a presenter class for your media items, you can build
+ an adapter and attach it to the {@link android.support.v17.leanback.app.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 {@code StringPresenter} class shown in the
+ previous code example:
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.
+ image as users browse through content. This technique can make interaction with your app more
+ cinematic and enjoyable.
@@ -211,8 +423,8 @@ protected OnItemViewSelectedListener getDefaultItemViewSelectedListener() {
@Override
public void onItemSelected(Object item, Row row) {
if (item instanceof Movie ) {
- URI uri = ((Movie)item).getBackdropURI();
- updateBackground(uri);
+ Drawable background = ((Movie)item).getBackdropDrawable();
+ updateBackground(background);
} else {
clearBackground();
}
diff --git a/docs/html/training/tv/playback/card.jd b/docs/html/training/tv/playback/card.jd
index 8ac75fd35f2af..a3a987252a8ae 100644
--- a/docs/html/training/tv/playback/card.jd
+++ b/docs/html/training/tv/playback/card.jd
@@ -32,9 +32,10 @@ class used in this lesson displays an image for the content along with the media
Android Leanback sample appThis lesson teaches you to
+ Try it out
+
+Create a Media Browse Layout
@@ -37,69 +47,270 @@ trainingnavtop=true
The {@link android.support.v17.leanback.app.BrowseFragment} class in the leanback 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 {@link
- android.support.v17.leanback.app.BrowseFragment}:
+ android.support.v17.leanback.app.BrowseFragment} object:
-<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- android:orientation="vertical"
- >
+<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ android:id="@+id/main_frame"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent">
+
+ <fragment
+ android:name="com.example.android.tvleanback.ui.MainFragment"
+ android:id="@+id/main_browse_fragment"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent" />
+
+</FrameLayout>
+
+
+
+public class MainActivity extends Activity {
+ @Override
+ public void onCreate(Bundle savedInstanceState) {
+ super.onCreate(savedInstanceState);
+ setContentView(R.layout.main);
+ }
+...
+
+
+
+
+
+
+public class MainFragment extends BrowseFragment implements
+ LoaderManager.LoaderCallbacks<HashMap<String, List<Movie>>> {
+
+...
+
+ @Override
+ public void onActivityCreated(Bundle savedInstanceState) {
+ super.onActivityCreated(savedInstanceState);
+
+ loadVideoData();
+
+ prepareBackgroundManager();
+ setupUIElements();
+ setupEventListeners();
+ }
+...
+
+ private void prepareBackgroundManager() {
+ mBackgroundManager = BackgroundManager.getInstance(getActivity());
+ mBackgroundManager.attach(getActivity().getWindow());
+ mDefaultBackground = getResources()
+ .getDrawable(R.drawable.default_background);
+ mMetrics = new DisplayMetrics();
+ getActivity().getWindowManager().getDefaultDisplay().getMetrics(mMetrics);
+ }
+
+ private void setupUIElements() {
+ setBadgeDrawable(getActivity().getResources()
+ .getDrawable(R.drawable.videos_by_google_banner));
+ // Badge, when set, takes precedent over title
+ setTitle(getString(R.string.browse_title));
+ setHeadersState(HEADERS_ENABLED);
+ setHeadersTransitionOnBackEnabled(true);
+ // set headers background color
+ setBrandColor(getResources().getColor(R.color.fastlane_background));
+ // set search icon color
+ setSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
+ }
+
+ private void loadVideoData() {
+ VideoProvider.setContext(getActivity());
+ mVideosUrl = getActivity().getResources().getString(R.string.catalog_url);
+ getLoaderManager().initLoader(0, null, this);
+ }
+
+ private void setupEventListeners() {
+ setOnSearchClickedListener(new View.OnClickListener() {
+
+ @Override
+ public void onClick(View view) {
+ Intent intent = new Intent(getActivity(), SearchActivity.class);
+ startActivity(intent);
+ }
+ });
+
+ setOnItemViewClickedListener(new ItemViewClickedListener());
+ setOnItemViewSelectedListener(new ItemViewSelectedListener());
+ }
+...
+
+
+Set UI Elements
+
+
setupUIElements() calls several of the
+{@link android.support.v17.leanback.app.BrowseFragment} methods to style the media catalog browser:
+
+
+
+Customize the Header Views
+
+
+
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+ android:orientation="horizontal"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent">
+
+ <ImageView
+ android:id="@+id/header_icon"
+ android:layout_width="32dp"
+ android:layout_height="32dp" />
+ <TextView
+ android:id="@+id/header_label"
+ android:layout_marginTop="6dp"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content" />
- <fragment
- android:name="android.support.v17.leanback.app.BrowseFragment"
- android:id="@+id/browse_fragment"
- android:layout_width="match_parent"
- android:layout_height="match_parent"
- />
</LinearLayout>
-
-public class BrowseMediaActivity extends Activity {
+public class IconHeaderItemPresenter extends Presenter {
+ @Override
+ public ViewHolder onCreateViewHolder(ViewGroup viewGroup) {
+ LayoutInflater inflater = (LayoutInflater) viewGroup.getContext()
+ .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
- public static final String TAG ="BrowseActivity";
+ View view = inflater.inflate(R.layout.icon_header_item, null);
- protected BrowseFragment mBrowseFragment;
+ return new ViewHolder(view);
+ }
@Override
- protected void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- setContentView(R.layout.browse_fragment);
+ public void onBindViewHolder(ViewHolder viewHolder, Object o) {
+ HeaderItem headerItem = ((ListRow) o).getHeaderItem();
+ View rootView = viewHolder.view;
- final FragmentManager fragmentManager = getFragmentManager();
- mBrowseFragment = (BrowseFragment) fragmentManager.findFragmentById(
- R.id.browse_fragment);
+ ImageView iconView = (ImageView) rootView.findViewById(R.id.header_icon);
+ Drawable icon = rootView.getResources().getDrawable(R.drawable.ic_action_video, null);
+ iconView.setImageDrawable(icon);
- // 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);
+ TextView label = (TextView) rootView.findViewById(R.id.header_label);
+ label.setText(headerItem.getName());
+ }
+ @Override
+ public void onUnbindViewHolder(ViewHolder viewHolder) {
+ // no op
}
}
+Displaying Media Lists
+
+setHeaderPresenterSelector(new PresenterSelector() {
+ @Override
+ public Presenter getPresenter(Object o) {
+ return new IconHeaderItemPresenter();
+ }
+});
+
+
+Hide or Disable Headers
+
+
+
+
+false to {@link android.support.v17.leanback.app.BrowseFragment#setHeadersTransitionOnBackEnabled(boolean) setHeadersTransitionOnBackEnabled()}
+and implement your own back stack handling.Display Media Lists
@@ -158,7 +370,7 @@ private void buildRowsAdapter() {
listRowAdapter.add("Media Item 1");
listRowAdapter.add("Media Item 2");
listRowAdapter.add("Media Item 3");
- HeaderItem header = new HeaderItem(i, "Category " + i, null);
+ HeaderItem header = new HeaderItem(i, "Category " + i);
mRowsAdapter.add(new ListRow(header, listRowAdapter));
}
@@ -170,15 +382,15 @@ private void buildRowsAdapter() {
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
- Android TV sample app.
+ Android Leanback sample app.
Update the Background
+
Figure 1. The -Leanback sample app browse fragment with a card presenter displaying card view objects.
+Leanback sample app image card view when selected. +When the user selects the {@link android.support.v17.leanback.widget.ImageCardView}, it expands -to reveal its text area with the background color you specify, as shown in figure 2.
- -
-Figure 2. The -Leanback sample app image card view when selected.
+to reveal its text area with the background color you specify, as shown in figure 1. +