BrowseFragment Header customization
– Android TV application hands on tutorial 17

icon_header_item_presenter

More customization of BrowseFragment
– Showing icon beside the Header title

The basic implementation of BrowseFragment is already explained in this tutorial. I’m going to proceed some advanced customization in following chapters.

Aim is to change the design of header, to show icons on the left of header title text, as shown in the above image.

How to customize header design

Leanback support library adopts MVP (Model-View-Presenter) architecture*, and HeaderItem (Model) is not an exception. We can prepare our own View and Presenter to customize the design of header.
* MVP is explained in Chapter 14

Step is as follows,

  1. Make own Model (If necessary): Java class which extends HeaderItem.
  2. Make own View: xml layout resource file
  3. Make own Presenter: Java class which extends RowHeaderPresenter, to use own view.
  4. Call setHeaderPresenterSelector method to specify which Presenter to be used.

Let’s take a look one by one.

Making own Model

HeaderItem class is used for Header model as default, however it has only 2 members id and name. We want to show image icon so we need a new class IconHeaderItem class to hold an image resource id.

Create new Java class IconHeaderItem in model package, extend HeaderItem class and declare a member mImageResId.

Icon resource id can be set at the constructor of IconHeaderItem.
It is also allowed to not specify icon resource id, if you don’t want to show icon.

Making own View

Create a layout file called “icon_header_item.xml”. (Right click on res/layout → [New] > [File] → type “icon_header_item.xml” and press [OK].

Here, I will just use the code provided by Google’s sample.

 

From https://github.com/googlesamples/androidtv-Leanback

I modified ImageView’s width & height to 24dp, and TextView’s width as 140dp.

Making own RowHeaderPresenter

Create a new class “IconHeaderPresenter” in ui.presenter package.

Again, it is based on Google’s sample, but I slightly modified. Main point is following,

  • View: layout file, icon_header_item.xml, is extracted in onCreateViewHolder method as
  • Model: IconHeaderItem instance is obtained at onBindViewHolder, and resource icon id is converted to Drawable to set image on iconView.

     

Implementation in MainFragment

Now we’ve done for preparing MVP of header class. Remaining task is update MainFragment. setHeaderPresenterSelector method is used to specify Presenter class to be used for Header of BrowseFragment.

Change our header model from HeaderItem to IconHeaderItem.

1. GridItemListRow

2. VideoListRow(s)

Icon images are downloaded from Material icon library. (Maybe icon and header title is not matching, but this is just workaround for developing practice)

 

Build and run

icon_header_item_presenter

You can see icon on the left of header title if successful.

By modifying icon_header_item.xml, you can easily customize header’s layout.

Source code is on github.

Sponsored Links

5 responses

  1. Woow – Your tutorials are very helpful and more pretty written rather then Google’s ones. Thank you, sir.
    Could you please add the tutorial about Card customization to make it like CAROUSEL VIEW? Is it possible by default to make auto-switchable but at the same time to stay on the same place without traversing left or right by row?
    It would be very appreciative to see how to implement such valuable component right like carousel view on Android TV.
    Thanks in advance!

    • Hi,
      I looked Bloomberg TV app, yes it is nice. But I think Bloomberg is not using BrowseFragment but their own UI design for implementation.

      As a quick reply, if you want to do it with BrowseFragment, I don’t know whether we can show some header icon even when header is closed by using BrowseFragment.
      Also you need to know when Headers are opening & closing.
      BrowseFragment have BrowseTransitionListener inner class with onHeadersTransitionStart & onHeadersTransitionStart, you may utilize this to change headers icon here.

Leave a Reply

Your email address will not be published.