Demystifying RowsSupportFragment and BrowseSupportFragment

Preamble

The first thing that you potentially want to know before you take some technology in use is how it looks and if it solves your problem.

In the current article, I am going to show you RowsSupportFragment and BrowseSupportFragment. Their basic appearance, how they work under the scene, and the relation between each other.

RowsSupportFragment

It is a fragment that provides you with a base implementation that you can use if you wish to display categorized rows with titles.

RowsSupportFragment appearance

The thing that you should remember during Android TV development is that it is a regular Android development with additional widgets.

Under the hood, the layout of that fragment is pretty simple. It is the only VerticalGridView(more details about that will be covered in my next article). If we look at the VerticalGridViewimplementation it is simple RecyclerViewwith some additional stuff.

In other words, we have vertical RecyclerViewwith ViewHolders that turns to be:

1. TextView that represents the title
2. HorizontalGridView(that is the inheritor of RecyclerView as well) and represents the horizontal list of the elements.

RowsSupportFragment — is a list of horizontal rows.

Row

The greatest thing is that we don’t need to create adapters that choose between different ViewHoldersin accordance with the data type(e.g. getViewType()) it is already implemented inside of ObjectAdapter and we only need to provide Presenterimplementation.

Presenter

A Presenter is used to generate Views and bind Objects to them on demand. It is closely related to the concept of an RecyclerView.Adapter, but is not position-based. The leanback framework implements the adapter concept using ObjectAdapter which refers to a Presenter or PresenterSelectorinstance.

From the documentation, we see that we need a Presenter as a bridge between the adapter and the view that will display provided data.

In the context of rows, RowPresenter implementation should create a row ViewHolder that has a title and a horizontal list. Leanback SDK provides a default implementation for that purpose: ListRowPresenter

In case if the view is inside a row it is a simple Presenterand BaseCardViewimplementation:

Card example

In Leanback we have ObjectAdapter and his extension ArrayObjectAdapter that is based on ArrayList.

ObjectAdapteris base class adapter to be used in leanback activities. Provides access to a data model and is decoupled from the presentation of the items via PresenterSelector. This is a bridge between real RecyclerView.Adapter and Presenter .

You have to remember that if you wish to display data usingObjectAdapter you have to provide Presenter or PresenterSelector to it.

PresenterSelector

In real projects, it is common to show different items in one RecyclerView . And Leanback provides PresenterSelector concept for that purpose.

From the source code, we see that it is an entity that serves to provide Presenter according to the data entity that we receive as a parameter. Using PresenterSelector we can define which Presenter the adapter should use to draw a card according to some statements. That statement can be from the instance of provided data item to any other statement that you wish. PresenterSelector and existing and custom implementations is the topic of the next blog post.

Sum up

To recap all information from that first part we have the next statements:

1. RowsSupportFragment is a Fragment that contains only vertical RecyclerView
2. In basic implementation vertical RecyclerView recycleViewHolders that display titles and horizontal RecyclerView
3. Presenter is a thing that serves to create an instance of View
4. PresenterSelector the entity that is used to select Presenter
5. ObjectAdapter use PresenterSelector to select the view that should be displayed

BrowseSupportFragment

From another hand we have BrowseSupportFragment. It is a fragment that shows rows with titles + side menu with a list of titles

BrowseSupportFragment appearance

That fragment consists of 2 parts:

1. Side menu
2. Rows

Side menu

Side menu appearance

The view that responsible for displaying the side menu is nothing but a simple Fragment. Actually, it is HeadersSupportFragment. And again that fragment contains the only VerticalGridView in its layout(for more info look at lb_headers_fragment.xml).

Part of BrowseSupportFragment implementation

From code, we see that BrowseSupportFragment.onCreateHeadersSupportFragment method is public and we can easily override it to customize the side menu in the way we wish it just simply extending HeadersSupportFragment.

More details about HeadersSupportFragment will be highlighted in my next blog post.

Rows

Rows appearance

Look at the code from BrowseSupportFragment it just a simple RowsSupportFragment and all the logic behind the scene is absolutely equal to the first part of this article.

Back to the Earth

Photo by Simon Fanger on Unsplash

Now we discussed all that technical questions and know how these fragments work under the hood. In this chapter, we will look at how to use them to display our data.

You remember that we have verticalRecyclerViewwith the list of elements that have RecyclerViewas well. From this, it is clear that we need 2 types of adapters:

1. RowAdapter — an adapter that responsible for displaying rows
2. RowItemAdapter — an adapter that responsible for representing items in rows

RowAdapter and RowItemAdapter is the only names that I made for clear understanding

Here is a sample usage:

If you look closely you can see several new classes here:

1. ListRowPresenter — is a presenter that implemented inside Leanback SDK and serves to create a view that represents rows(title + horizontal RecyclerView) for you. That class should be provided to the RowAdapter.
2. HeaderItem — is a data holder that contains the title for the row
3. ListRow — is a data holder which contains both a list of elements that should be displayed in a row and header data.
4. CardPresenter — our custom Presenter . Used to build cards in a row. That class should be provided to the RowItemAdapter.

ListRow and HeaderItem in use

Last words

In this article, we overviewed the difference and relations between BrowseSupportFragment and RowSupportFragment , found out which components were used to build them and how they work under the hood without any additional customization.

In the next articles, we will look at how their appearance and behavior can be customized so Subscribe to me and wait for the next articles!

Please leave improvement suggestions if you have any in the comments section.

Happy Coding!

Parent article: