BrowseFragment ListRow customization
– Android TV application hands on tutorial 18

More customization of BrowseFragment
– Multiple rows icon alignment on ListRow

Continuing from the previous chapter, BrowseFragment Header customization, I proceed to customizing ListRow.


Multiple rows are shown when the number of installed app increased. I want to achieve this!

Leanback Launcher app shows multiple rows in Apps, Games bar if the number of icon is many (2 rows are used for “Apps” category in above picture). But original ListRow provided by Leanback support library only allows to show contents in one line. In this chapter, goal is to allow ListRow to show multiple rows in each header, by making customized class of ListRow (Model) and ListRowPresenter (Presenter).

Explanation: Dig in source code 

ListRow (Model), ListRowView (View), ListRowPresenter (Presenter) is used for MVP architecture of ListRow. When you read the source code of ListRowPresenter, you can find member of HorizontalGridView in ViewHolder.

This mGridView is the container for showing icon contents of ListRow. And Also, This HorizontalGridView supports a method setNumRows, to specify how many number of rows should be used for the layout of HorizontalGridView.

So we only need to call setNumRows method for mGridView, implementation is easy as follows.

Making CustomListRow

Create a new class, CustomListRow class, at model package. This is a subclass of ListRow, and the only one difference from the parent class is that it has a member called mNumRows which specifies the number of rows.


Making CustomListRowPresenter

In the same way, create a new class called CustomListRowPresenter, at ui.presenter package. This is a subclass of ListRowPresenter, it calls ViewHolder‘s getGridView().setNumRows() method to apply the number of rows for mGridView.


Shadow customization

If you want to change the shadow effect for ListRow, you can modify Presenter class. setShadowEnabled method is used to enable/disable shadow effect.

You can try uncommenting above source code to see the effect.


Modification in MainFragment

Remaining task is to use CustomListRow and CustomListRowPresenter in MainFragment.

To set Presenter, you can specify it in the constructor of rows adapter

Change ListRow to CustomListRow, and set the number of rows.


Build and run


Video contents are shown with 2 rows by using CustomListRowPresenter

2 rows are used to display video contents, with CustomListRow & CustomListRowPresenter as shown in image.

Source code is on github.

Comment – ListRowHoverCardView

Just to note. In the AOSP source code, I could find ListRowHoverCardView class. There is also a javadoc comment in ListRowPresenter which says

* <h3>Hover card</h3>
* Optionally, {@link #setHoverCardPresenterSelector(PresenterSelector)} can be used to
* display a view for the currently focused list item below the rendered
* list. This view is known as a hover card

However, I couldn’t find how to use it. Maybe its implementation is not complete?




Sponsored Links

3 responses

  1. Hi corochann,

    I have found your posts very helpful, thank you 🙂 I noticed the same thing about the ListRowHoverCard. Set it up like this and didn’t see the hover card triggered:

    ListRowPresenter rowPresenter = new ListRowPresenter();
    rowPresenter.setHoverCardPresenterSelector(new PresenterSelector() {
    public Presenter getPresenter(Object item) {
    return new MyHoverPresenter();
    ); … // set ClassPresenterSelector, etc.

    // MyHoverPresenter() is a simple text view presenter:
    public class EmojiHoverPresenter extends Presenter {
    public ViewHolder onCreateViewHolder(ViewGroup parent) {
    TextView countText = new TextView(parent.getContext());
    return new ViewHolder(countText);

    public void onBindViewHolder(Presenter.ViewHolder viewHolder, Object item) {

    public void onUnbindViewHolder(Presenter.ViewHolder viewHolder) {

    Let me know if you uncover anything related to this!

  2. hi.
    first i want to thank you for your amazing tutorial, this is help me a lot 😀
    i have an question. do you have any idea how i can add two row presenter to on row in browser fragment? for example i want of them has 1 row and other one has 2 rows.


Leave a Reply

Your email address will not be published.