DetailsOverviewRowPresenter & FullWidthDetailsOverviewRowPresenter
– Android TV application hands on tutorial 5

FullWidthDetailsOverviewRowPresenter1-2015-07-07-102152

[Update 2015.12.14: revise & add DetailsOverviewRowPresenter sample implementation, see bottom of this post.]

Aim of this chapter – DetailsActivity implementation

Implementing

  1. setOnItemViewClickedListener onItemClicked callback function in MainFragment
    After implementation, we can click cards to go to next action. We show content detail information for each Movie item in this chapter.
  2. DetailsActivity, VideoDetailsFragment, and DetailsDescriptionPresenter
    DetailsActivity is invoked by clicking card in MainActivity. It shows VideoDetailsFragment, which is a layout to show card content.

Implementing click listener in MainFragment

To register a next action when user clicked certain card, we can use setOnItemViewClickedListener method defined in BrowseFragment class (MainFragment class is a sub class of BrowseFragment). 

Sample implementation is as follows. This is almost same with setOnItemViewSelectedListener introduced in previous chapter.

DetailsActivity & VideoDetailsFragment – Explanation

Below is a picture from AOSP sample applicaton.  

DetailsFragment_combined_picture_explain

In the Android sample application, we have 2 rows in VideoDetailsFragment. First row is DetailsOverviewRow and second row is ListRow (which is already explained in MainFragment). DetailsOverviewRow shows the content details including picture in the lect, description and some actions are set in the left-bottom.

We can prepare our own Presenter to specify the design layout of DetailsOverviewRow. There are 2 pre-implemented presenters we can use in Leanback support library. 

  1. DetailsOverviewRowPresenter: Shown in the above picture, but it is already deprecated in leanback library version 22.2.0.
  2. FullWidthDetailsOverviewRowPresenter: Instead of DetailsOverviewRowPresenter, use this presenter is recommended in the AOSP document.

In the following, I will try to introduce this new FullWidthDetailsOverviewRowPresenter (*updated 2015.12.4: you can also check DetailsOverviewRowPresenter, see bottom of this post). It will specify the design layout of DetailsOverviewRow, which is usually used in the first row of your DetailsFragment to show item details information.

FullWidthDetailsOverviewRowPresenter is consisting of 3 parts, namely

  1. Logo view – customizable (option), by implementing DetailsOverViewLogoPresenter
  2. Action list view
  3. Detailed description view – customizable (MUST), implement subclass of AbstractDetailsDescriptionPresenter

FullWidthDetailsOverviewRowPresenter-explain-2015-07-07-102152

We define “DetailsDescriptionPresenter” which extends AbstractDetailsDescriptionPresenter defined in Leanback libarary. AbstractDetailsDescriptionPresenter decides the design layout of descrption view.

DetailsActivity & VideoDetailsFragment – Implementation

We proceed to create DetailsActivity for showing the UI of content details. The design is specified in VideoDetailsFragment, which is a subclass of DetailsFragment.

Creating DetailsActivity & VideoDetailsFragment is done in the same way with MainActivity & MainFragment introduced in chapter 1.

DetailsActivity

New → Activity → BlankActivity

Activity Name: DetailsActivity
Layout Name: activity_details
Title: DetailsActivity
Menu Resource Name: menu_details
Hierarchical Parent: blank 

VideoDetailsFragment

New -> Java Class -> Name: VideoDetailsFragment

First, modify activity_details.xml as follows so that it only displays VideoDetailsFragment.

Second modify VideoDetailsFragment. We will make this VideoDetailsFragment as a sub-class of DetailsFragment. DetailsFragment class is in leanback support library to create UI for content details. In the VideoDetailsFragment, declared private member mFwdorPresenter is the instance of FullWidthDetailsOverviewRowPresenter.

Note that AsyncTask is for executing some tasks in background thread (“doInBackground“)  followed by executing some tasks in UI thread (“onPostExecute“). Here, we load a picture image in background, and updating UI in UI thread. You can find information of AsyncTask below.

Note that constructor of adapter is defferent between MainFragment and VideoDetailsFragment. We are only using ListRowListRowPresenter in the MainFragment. In that case we can instantiate adapter by setting Presenter itself like 

However, we are using DetailsOverviewRowFullWidthDetailsOverviewRowPresenter & ListRow – ListRowPresenter in VideoDetails Fragment. ClassPresenterSelector defines this correspondence, and we can use it in the argument of constructor of adapter. 

 

Next, add description member in Movie class, you can implement Getter and Setter method by [Alt]+[Insert] in Android studio. Also, make Movie Serializable so that we can pass this object through intent. Because we pass Movie object through intent from MainActivity to DetailsActivity

* See also: Fast, easy Parcelable implementation with Android studio Parcelable plugin for better performance implementation.

Copy DetailsDescriptionPresenter from AOSP sample source code as follows. Again, DetailsDescriptionPresenter extends AbstractDetailsDescriptionPresenter, which decides the design layout of descrption view.

Finally, modify MainFragment to send intent to launch DetailsActivity.

 

Build and Run!

Now you can see the content details by clicking card. 

Initial Display, Logo is on the left, background is on the top half, and description is on the bottom half.

FullWidthDetailsOverviewRowPresenter1-2015-07-07-102152

When user press “down” key, description view will take full screen.

FullWidthDetailsOverviewRowPresenter2-2015-07-07-102231

When user press “down” key again, next row (ListRow in this example) will appear. 

FullWidthDetailsOverviewRowPresenter3-2015-07-07-102258

Source code is on github.

 

 

——- Update: 2015.12.14 Add DetailsOverviewRowPresenter implementation —————-

Build and Run 2!

detailsoverviewrowpresenter01

DetailsOverviewRowPresenter

fullwidthdetailsoverviewrowpresenter01

FullWidthDetailsOverviewRowPresenter

Please check updated source code on github if you are interested in (already deprecated) DetailsOverviewRowPresenter implementation. Why I updated this code? Because it seems still some developer prefers DetailsOverviewRowPresenter design, even if it was deprecated!

 

Sponsored Links

8 responses

  1. Hello, first of all, very nice tutorial GJ.
    I have two questions about the DetailsFragment class if you can help me :
    1- how can we put some other objects like “stars”, “small icon”…etc. beside the title?
    2- how can we focus the text (the synopsis)?
    To resume how can we have a DetailsFragment like Google Play.
    Thank you and good luck for the next…

  2. I have implemented the code just as you have here and on both my android emulator and my galaxy tab s2 running android 5.1, I cannot get the card to pop up with content details.

    What am i doing wrong??

    Isma’il

  3. Hello Kheirus, thanks for the comment. Let me clarify your question more detail.

    Question 1. Showing objects like “stars” means that you want to show some small icon like Google’s sample application’s BrowseFragment header title?

    Question 2. how can we focus the text → Text means description area? What do you want to do after focusing text?

  4. Hi Ismail, thanks for feedback.
    Did you build my code in github above? If I can get your log (exception is happening during runtime??), I may investigate a little bit more…

  5. Hello! First of all, great tutorial! I really learned a lot about Android TV development! I have a question about the Android TV framework though: I implemented the cursor loader pattern for the MainFragment and MovieDetailFragment. But there seems to be some problems with the loader callbacks. For instance, for my app’s case, there is a Favorite section to showcase the users’ starred movie items. When users have starred a movie, the movie’s info gets inserted into the local content provider and then the loader’s onLoadFinished() callback is expected to get triggered. But it doesn’t seem so. Also I’ve noticed that a lot of the Fragment lifecycles of the BrowseFragment is quite different from those of a normal Android phone fragment. Can you elaborate more on this? Thanks in advance.

    • Hi,
      for understanding loader, please check Background data loading
      – Android TV application hands on tutorial 15
      .

      1. onLoadFinished()
      This is called when data load has finished, and when data loading will be triggered is a different notion.
      When you call initLoader() then onLoadFinished() will be called after data load finished.
      But when you insert data into your content provider, it does not trigger data re-loading I guess.

      2. data loading after content provider updated.
      So, I guess you need a observer to inform cursor loader to re-load data.
      You may be looking for this info: How do CursorLoader automatically updates the view even if the app is inactive?.

      3. Activity/Fragment lifecycle and Loader lifecycle
      In my understanding, Loader is introduced that its lifecycle is independent from Activity’s lifecycle.
      Also I think BrowseFragment is a Fragment, which is following the usual lifecycle, same with other Fragment.

  6. Hi Corochan! Thank you for your great tutorial!
    Anyway, I want to ask a question:
    1. a same question with khairus, how to add more views in detail description? the viewholder only provides title, subtitle, and body(main description). probably add some buttons or small icons
    2. I tried to use holder.getBody().setMaxLines() because 5 lines are too short for me but it somehow doesnt work. how to change the body in detailsdescriptionpresenter so it can has more than 5 lines?
    thanks in advanced!

    • You can create a custom “AbstractDetailsDescriptionPresenter” without “addPreDrawListener” method (which is causing it) and use it in your “DetailsDescriptionPresenter”

Leave a Reply

Your email address will not be published.