The next piece we'll add to our app is a Leanback details fragment.
When the user selects one of our movies, we'd like to bring it front and center.
And we'll use the details fragment to do just this.
The details fragment has three sections.
The first is an overview row, which contains text fields like a title,
an author, and a description.
Below that is an actions row.
In our sample app, we've used the said actions to watch a trailer, and
to buy and rent movies.
These actions of course, are fully customizable.
Finally, if you scroll down you can see a list of related movies.
Pretty cool, right?
The details fragment works in a similar way as the browse fragment in
the previous lesson, it provides the smooth animations and most of
the functionality behind the scenes, all we have to do is add our content to it.
The pattern is the same as in our previous lesson.
First, we create a details activity class.
And it's only job will be to apply
a layout that contains the details fragment.
As before, this layout does little else except specify our details fragment.
But before we see how that works, let's look at how we can start it up.
Here I am back in the browse fragment.
When the user selects a movie, we'd like to show our details fragment.
And to do so, we're going to add an ItemViewClickListener
to the browse fragment.
In the on activity created method, uncomment set up event listeners.
And let's see how that method works.
Let's look inside the ItemViewClickListener.
We have two different types of cards in our display,
and this listener contains logic to handle each.
The important part is that if a movie's clicked, we fire an intent to start up
our details activity class, and we include the selected movie as an extra,
so we can retrieve it later from our details fragment.
The second listener on the browse fragment is used to detect when a user
selects a movie.
These names can be a little bit confusing, so
by select, I actually mean that certain card has focus.
A neat trick is that inside this listener we can update the background
image of the browse fragment to reflect the selected movie.
To do so, return to on activity created and
uncomment prepared background manager, and setupEventListeners.
Let's run the project now and see what we get.
Here, you can see the background's changing to reflect the currently
selected card.
Pretty cool, right?
I won't go into the logic of how the BackgroundManager, works but
there is one note.
Notice that if I scroll very quickly,
the background doesn't immediately change.
Instead we wait for about a second after a card has been selected
before adjusting the background.
This provides a much smoother user experience.
Now let's see how to set up the details fragment.
The pattern to set up this class is pretty much
the same as the browse fragment.
I'll focus just on the new concepts, and you can find more details in the notes.
We'll start by populating the DetailsOverviewRow,
which is a class provided by Leanback.
And this is going to contain the title, the author, and the description.
First, we'll pass it a reference to the selected movie.
The DetailsOverviewRow will store this as an object that we can access later.
Next we add actions.
The actions class is also provided by Leanback.
To respond when one of our action buttons is clicked,
we'll setup all callback later on.
First, it's important to understand the DetailsOverviewRow will be presented
by DetailsOverviewRowPresenter.
Aren't Java naming conventions just great?
They're so concise.
This presenter already knows how to layout our actions row,
because that's built in to Leanback.
But we need to add our callbacks to it.
Here's where we do that, and take a look at how these are handled.
The most important action starts at the video playing activity
via the play back overlay fragment.
This is also provided by pingback,
and we'll see how it works later in our lesson on the Universal Media Player.
Last, although our presenter knows how to present actions,
we have to tell it how to display our movie.
To do so, we create a DetailsDescriptionPresenter.
This is a very simple class, which binds our movie data to the details fragment.
One last new concept.
Our details fragment uses two different presenters, one for
the overview row, and another for the related videos row.
And by the way, if you look through the code, the related videos row is built
identically to how a row of videos was created in the browse fragment,
by using list rows and a ListRowPresenter.
We'll need a way to collect these two presenters into a single object adapter
before passing them to the browse fragment.
And to do so, we'll use a ClassPresenterSelector.
This is a simple class that associates presenters with the classes they should
be used to present, like this.
Once we created an ObjectAdapter with our class presenter,
we can add different types of objects to it as long as it knows how to present
these classes.
And finally, we can set this ObjectAdapter as the main adapter for
the details fragment.
Let's run the project now and see what we get.
Watch what happens if you select an action now.
Here the playback fragment appears.
Pretty cool, right?
Now, I know there was a lot of code here and few new concepts.
But if you think about how much functionality you got in return,
I hope you'll agree that it's a good trade-off.
And one last tip,
here we use the Leanback support library to build a catalog browser.
But you could easily use it for
something else other than displaying movies.
For example, you might have cards that just play weather information,
as in the Sunshine app.