Android TV App Development Fundamentals

 

The Leanback Support library provides all the libraries for creating Android TV apps. It includes APIs, resources and widgets to build apps for TV. 

It makes building high-quality user experiences for big screen super easy. 

Lets check out the Steps in detail while creating Android TV Apps. 

1. Leanback Support Library is automatically added to our project when we create a Android TV project form the template using Android Studio. 

dependencies {

    implementation "org.jetbrains.kotlin:kotlin-stdlib:$kotlin_version"
    implementation 'androidx.core:core-ktx:1.3.2'
    implementation 'androidx.leanback:leanback:1.0.0'
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'com.github.bumptech.glide:glide:3.8.0'
}

2. We must declare an Activity for TV in the manifest using the Leanback Launcher Intent Filter. 

<activity
    android:name=".MainActivity"
    android:banner="@drawable/app_icon_your_company"
    android:icon="@drawable/app_icon_your_company"
    android:label="@string/app_name"
    android:logo="@drawable/app_icon_your_company"
    android:screenOrientation="landscape">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />

        <category android:name="android.intent.category.LEANBACK_LAUNCHER" />
    </intent-filter>
</activity>

3. LeanBack Library also provides prebuilt fragments for browsing and interacting with media catalogs, and you can take advantage of this when you're building your own media browsing apps. 

The BrowseFragment allows you to create a primary layout for browsing categories and rows of media items with minimum effort.  Just adding this class to the layout has created a multi plane layout along with standard navigational design and polished transition animations. 

So how we populate the layout of the fragment with some content? 

• A single ArrayObjectAdapter is used to define a list of ListRow objects.  
• A ListRow presenter is used to display them. 
• Categories are automatically displayed vertically on the left. 
• Media for each category is horizontally scrolling list. 
• As the user drills deeper into the category. The category themselves will collapse and will be displayed as per row as a header item. 
• Each ListRow object is composed of one header item and another ArrayObjectAdapter. 
• The header item describes the metadata of this row -- in this case, the category name. 
• And the ArrayObjectAdapter contains the media items for each category. 
• Here a user defined CardPresenter is used to display each media item. You need to present this yourself. 
• All of these classes -- ArrayObjectAdapter, ListRepresenter and ListRow are provided by the Leanback Support Library. 

The only thing you need to implement yourself is a presenter for displaying your media items. 

When we create our ListRow object you can pass your own custom presenter to define how each individual item will look. 

class CardPresenter : Presenter() {
    
    override fun onCreateViewHolder(parent: ViewGroup): Presenter.ViewHolder {
        Log.d(TAG, "onCreateViewHolder")

        val cardView = object : ImageCardView(parent.context) {
            override fun setSelected(selected: Boolean) {
                updateCardBackgroundColor(this, selected)
                super.setSelected(selected)
            }
        }

        cardView.isFocusable = true
        cardView.isFocusableInTouchMode = true
        updateCardBackgroundColor(cardView, false)
        return Presenter.ViewHolder(cardView)
    }

    override fun onBindViewHolder(viewHolder: Presenter.ViewHolder, item: Any) {
        .....
    }

}

CardPresenter display each media item as a card filled with a thumbnail image. The CardPresenter extends the Presenter class, overriding onCreateViewHolder to generate Views and unBindViewHolder to bind objects to views on demand. 

One thing you should keep in mind is that every interactive view in Android TV should be navigable by the directional pad. 

To achieve this we need to set the isFocusable = true and isFocusableInTouchMode = true, 

In order to interact with user item you need to add the OnItemClick listener to the BrowserFragment. 

During the callback you can fire an intent to start ItemsDetailsActivity or replace the BrowseFragment with DetailsFragment via FragmentManager. 

The DetailsFragment also found in the LeanBack Support library allows you to create a primary layout for displaying detailed information, it does with minimum effort on your part. A single ArrayObjectAdapter is used to define a list of rows. The Details OverviewRow is the row which contains the specifics of a media item. In order to render the DetailsOverview object itself you use the DetailsOverviewRow presenter. 

This row consist of the image, description view and a series of actions.  You can easily preview the image or add action to the objects by calling the methods setImageBitmap or addAction. 

For displaying the Description View we can use the AbstractDetailsDescription presenter class. It is also possible to add more content such as related videos. To do so you can add an additional row into the ArrayObjectAdapter with a presenter to display them. 

Here the additional ListRow object is at the end of the ArrayObjectAdapter with the list of related videos. And again, the ListRow presenter is used to display this row.