In our upcoming webinar, will deep dive into the peculiarities of developing for the 10-foot experience and how developers can leverage Amazon Fire TV developer tools to create a compelling TV experience.

Last week, we presented a webinar about How to Add In-App Purchasing and Subscriptions to your Android Apps. We demonstrated how easy it is to use the Amazon IAP and Subscription API in order to offer subscriptions and digital content in your Android Apps.

Do you want to add in-app purchasing (IAP) or subscriptions to your apps but don’t know where to start? Join me on Friday, July 28^th, to learn how to integrate these monetization features into your apps and games.

On February 23rd we presented a webinar focused on using Amazon Web App Starter Kit (WASK) to build and test web-based Apps for Fire TV. WASK is a web-based template designed for the 10-foot user experience and includes UI controls, support for the Fire TV remote, sample UI components, support for various data formats and more. To get started, all you need is a feed from Youtube or Brightcove or a media RSS or JSON feed. Then you can customize the look and feel of the app using CSS tags and add/remove features using the Javascript files included in the project.

During the webinar we covered these topics:

In our upcoming webinar, Build and Test Web-based Apps for TV using Amazon Web App Starter Kit, Amazon Technology Evangelist, Mario Viviani will share how easy it is to deploy a fully fledged TV app on Fire TV using WASK.  

Today we are excited to announce that the all-new Fire TV Stick with Alexa Voice Remote, the most powerful streaming media stick available, is coming to the UK and Germany. The next generation Fire TV Stick with Voice Remote will also be available in Japan this April.

In parts 1-5 of this series we followed the user journey on Fire TV from browsing and content discovery to reading the details of specific content and performing an action. Now we end our journey on the best part: how to play the video!

The PlaybackOverlayActivity

In a Leanback-enabled project, playing video content is performed within the PlaybackOverlayActivity.

The UI of the PlaybackOverlayActivity is simple. We have a full-screen video player that is responsible for playing the content. On top of the video player is the PlaybackOverlayFragment, which is responsible for displaying all the media controls and managing the underlying content play back.

Providing the Details of the App Content through the DetailsFragment

In Part 1 of this series we analyzed the TV Interaction Model, based on three steps: Browsing for Content, Reading Description and Details, and Playing the Content. The first action, Browsing for Content, as we have seen in Part 3 of this series, is achieved through the BrowseFragment.

Now let’s see how we can provide information about a specific piece of content, following the second step of the user journey, Reading Description and Details. To do this we’ll use one of the main components of a Leanback-enabled project: the DetailsFragment.

The DetailsFragment

The DetailsFragment is displayed when the user selects a specific piece of content on the BrowseFragment. It contains information like Title, Subtitle, Description, and is accompanied by a preview of the content. It also contains Actions that we can prompt our user to perform.

One of the most important classes used in the DetailsFragment is DetailsOverViewRow. This class defines which content is displayed in the fragment (as seen in the previous episode, DetailsOverViewRow takes advantage of a Presenter, called DescriptionPresenter) and, most importantly, is responsible for defining the Actions that we can prompt our user to perform.

private void setupDetailsOverviewRow() {
    
    final DetailsOverviewRow row 
			= new DetailsOverviewRow(mSelectedMovie);
    ...
    row.setImageDrawable(R.drawable.default_background));
    row.addAction(new Action(ACTION_WATCH_TRAILER, 
				“Watch Trailer”, “FREE”)));
    
    mAdapter.add(row);
}

In the highlighted row we demonstrate how easy it is to add a specific Action to the DetailsFragment. Just by coding addAction() we can add a new Action for the user to perform. In this case we added the unique ID ACTION_WATCH_TRAILER, for the Action and two Strings “Watch Trailer”, “FREE” to define the text field of the button.

Once we have added this line, the Action will be displayed on the DetailsFragment.

By using Actions we can easily add IAP items like “Rent the Content”, “Buy”, or “Subscribe”. It is just a matter of attaching a Listener to the Actions to perform consequent tasks.

When we deploy a Leanback-enabled project, the only Action that is defined by default is the “Watch Trailer” that prompts the trailer of the content to play.

Stay tuned for Part 6: How to Play Video Content using the PlaybackOverlayFragment

In the next and final episode of this series we’ll show how to play the content, leverage the Remote Control, and how to show the on-screen controls using the PlaybackOverlayFragment.

Stay tuned!

Mario Viviani (@mariuxtheone)

Editing the user interface of a Leanback-enabled TV app through Presenters

In the previous episode of this series we discussed how to create the main interface of our Leanback-enabled project through the BrowseFragment. Now let’s take a closer look into the Presenter class. The Presenter class allows us to define the look and feel of our Leanback-enabled app without editing the underlying data structure. 

The Presenter class

The Leanback template we created was built following a custom version of the common development pattern, Model-view-controller (MVC), in which the Presenter class acts as the View. The Presenters are passed to the ArrayObjectAdapter as arguments and define how the content of the Adapter should be displayed

The Leanback approach provides a variety of predefined Presenters:

• CardPresenter defines singular content
• ListRowPresenter defines how various content in a row should be displayed and arranged
• DetailsDescriptionPresenter defines the UI of the DetailsFragment

Implementing the Presenters are quite similar: they all follow the ViewHolder pattern and are mostly composed by Custom Views with methods to set the fields of the views. Let’s take a close look at the customizing the CardPresenter as an example:

Part 3: Browsing the Content of a Leanback-Enabled Android App

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: