Construction of BrowseFragment – Android TV application hands on tutorial 2

[Update 2015.11.17: revise]

Construction of BrowseFragment

In this chapter, we will implement a combination of header and selectable objects (so called “cards”). But before going to real implementation, it’s good to understand the construction of BrowseFragment. You can also read the source code in the sdk (android/support/v17/leanback/app/) by yourself.

Let’s start explaination by using Android TV sample application. When you launch application, the contents are aligned in a grid structure. Each header title on the left have a each contents row, and this header – contents row relationship is one to one. This “header + contents row” combination is represented by ListRow. Body of BrowseFragment is a set of ListRow (I will use the term RowsAdapter in this post).

In the below picture, ListRow is represented by blue circle. And a blue square is a RowsAdapter, which is as set of blue circle.

Set of ListRow constructs RowsAdapter, which makes main body UI of BrowseFragment.

Next, let’s look inside the ListRow in more detail. The contents of the header is specified by ArrayObjectAdapter (I call RowAdapter in this post), which is a set of Object (I call CardInfo or Item in this post).

This CardInfo can be any object, and as it will be explained in detail later, how to show this CardInfo can be specified by Presenter class.

Construction of each ListRow.

To summarize,

ArrayObjectAdapter (RowsAdapter) ← A set of ListRow
ListRow = HeaderItem + ArrayObjectAdapter (RowAdapter)
ArrayObjectAdapter (RowAdapter) ← A set of Object (CardInfo/Item)

Presenter class

The design of card is determined by Presenter. Presenter defines how to show/present cardInfo. Presenter class itself is an abstract class, so you need to extend this class for your app’s suitable UI design.

When you extend Presenter, you need to override at least below 3 methods.

• onCreateViewHolder(Viewgroup parent)
• onBindViewHolder(ViewHolder viewHolder, Object cardInfo/item)
• onUnbindViewHolder(ViewHolder viewHolder)

For the details of methods, I encourage you to refer source code of Presenter class. Presenter has innerclass ViewHolder which has the reference to the View. You may access the View via viewHolder at specific event (onBind, onUnbind, etc.) listener callback method.

Let’s proceed to hands on. Here, we will implement GridItemPresenter class.
In this sample application, Object (CardInfo/item) is String type and viewHolder holds TextView reference to show this String

The layout of view is defined in the onCreateViewHolder().
Argument of onBindViewHolder(), we can access viewHolder created by onCreateViewHolder and also Object (CardInfo/item), which stores card information (In this example, just a String).

After defining your own Presenter, you only need to set RowsAdapter at the start time of Activity. You can do so in onActivityCreated() in MainFragment,

So whole source code of MainFragment will be.

so that MainFragment can refer the background color setting.

(III) Build and Run!

Now you can see header & contents combination is implemented.

Note that we only defined Presenter, and load items to show. Other animaiton, e.g. when you select item, it will be bigger, is already implemented in SDK. So even non-designer, it’s easy to make certain level of UI for Android TV application.

Source code is uploaded on github.

See next post,How to use Presenter and ViewHolder? – Android TV application hands on tutorial 3, for CardPresenter implementation which uses ImageCardView to present a card with main image, title, and sub-text.