Developing for the Living Room: How to Build an Android App for Amazon Fire TV — Part 3

BROWSING THE CONTENT OF A LEANBACK-ENABLED ANDROID APP: THE BROWSEFRAGMENT

In the previous episode of this series we discussed the anatomy of a Leanback-enabled Android App for Amazon Fire TV, discovering what its main components are and how they are tightly tied to the Media Streaming Interaction Model.

We’ll now take a close look into the first and most basic component of an Android App for Amazon Fire TV: the BrowseFragment.

The BrowseFragment

After we launch our freshly created TV Android App, built using the Android Studio App Wizard, we will encounter an interface that will look very similar to this:

Everything we see in this Activity is generated inside a class called BrowseFragment. The BrowseFragment creates an interface to allow the user to easily browse content within the app, most typically videos or movies.

The BrowseFragment itself is actually composed by two sub-fragments: the HeadersFragment and the RowsFragment.

The HeadersFragment shows the header of each row of content, and it can be shown or hidden. Typically it contains the “category” of the content contained in that specific row.

The RowsFragment contains the rows of contents, usually displayed as video thumbnails. We will see how to populate these content rows using ObjectAdapters.

Populating the BrowseFragment

Content rows are horizontal lists populated through Adapters, which arrange the content using classes dedicated to define the look and feel of the app called Presenters.

In order to populate a single row of content we will use an ArrayObjectAdapter, which we’ll call listRowAdapter. This adapter will be responsible for displaying the content of a single row.

For this example, let’s also assume we defined a class called “Movie” that contains all the information of a movie, like title and description.

Finally, we have a HeaderItem that we will use to define the header of the row. We could, for example, define the “Comedy” category.

Here is a visual representation of what a listRowAdapter + HeaderItem would look like:

Let’s assume to have a method “SetupMovies” which will populate a list of movies that we can then pass to the Adapter. The code below is what we will use to populate a single row and define the header item.

public class MainFragment extends BrowseFragment {

    private void loadRows() {

     //let’s generate the list of movies
        List list = MovieList.setupMovies();

     //The CardPresenter defines the UI of the items in the row
        CardPresenter cardPresenter = new CardPresenter();

     //Create the adapter for the row
        ArrayObjectAdapter listRowAdapter 
                      = new ArrayObjectAdapter(cardPresenter);
        
	//let’s populate the Adapter
	for (Movie movie:list) {
            listRowAdapter.add(movie);
        }

        //Create the header of this row    
        HeaderItem header = new HeaderItem(0, "Comedy");

At the end of this, we have created and populated the Adapter and therefore the first row of the BrowseFragment.

Now, usually a Media Streaming App would have more than a single row of content, right? So we need to add multiple Adapters to our BrowseFragment. In order to do this, the easiest way is to have a higher-level Adapter that can manage multiple ListRowAdapters. We’ll call this class RowsAdapter.

The RowsAdapter will contain multiple ListRowAdapters and will have its own Presenter to define how the rows of content should be displayed.

We will populate the RowsAdapter adding to it multiple listRows, combining listRowAdapters and relative HeaderItems. Note that to do that we use the class ListRow that receives HeaderItem and ArrayObjectAdapter as parameters.

public class MainFragment extends BrowseFragment {
 ...

    //create a RowsAdapter
     ArrayObjectAdapter rowsAdapter 
		= new ArrayObjectAdapter(new ListRowPresenter());
     
    //add multiple rows  
     rowsAdapter.add(new ListRow(headerItem1, listRowAdapter1));
     rowsAdapter.add(new ListRow(headerItem2, listRowAdapter2));
     
     setAdapter(mRowsAdapter);

When we call setAdapter() we populate all the rows in the BrowseFragment and it show us the main interface.

In Part 4 of this Series: Presenters — How to Define the Look & Feel of the Widgets in a Leanback-Enabled Android App.

In the next episode of this series we’ll make a further step towards fully understanding how a Leanback-enabled project works. We’ll deep dive into the Presenter classes, understanding how we can define the look and feel of the widgets shown in the main interface of a Leanback-enabled Android App.

Stay tuned!
Mario Viviani (@mariuxtheone)

Originally published at developer.amazon.com.