Introduction to Android TV application development

Right now, we don’t have enough Android TV app development coverage. In this series of tutorials, I’ll show you how to develop Android TV applications. The purpose of this article is to understand the specific code implementation of Android “TV,” with a particular focus on UI implementation.

Because UI is one of the biggest differences between an Android mobile app and an Android TV app. We need to make the UI suitable for TV use, for example we should make an application so that we can use ↑↓→← arrow keys to navigate the application instead of touchpad navigation. Because the user uses a remote control, and cannot use the “touch screen” function with the TV. In order to achieve this requirement, the Android open source project is to provide Leanback support library (Android. Support. V17. Leanback), so that developers can easily implement UI to meet those requirements, thus suitable for TV. This tutorial focuses on the use of Leanback library.

This post is targeted at those who:

  • I have developed Android apps before, but I am not familiar with Android TV apps.
  • Developer – Intermediate

Google discontinued Support for Eclipse at the end of 2015, so develop Android TV applications using Android Studio for the IDE (download and install Android Studio if you don’t already use it). Note that most of the code presented here comes from the AOSP Android TV sample source code leanback. This tutorial is basically just a detailed explanation of the sample source code. Let’s get started.

Start writing an Android TV app

1. Open Android Studio

New Project

App name: AndroidTVappTutoria

Specifying an Android Device

Add the activity to the TV

Select Add No Activity and finish

Android Studio automatically generates the source code.

The source code for this stage is uploaded to Github.

2. Add the activity

First, let’s carry out activities. Right click on the “com. Corochann. Androidtvapptutorial”, then choose

New -> Activity -> Blank activity

Click “Launcher Activity”.

I’ll start with a blank activity called “MainActivity.” This Activity inherits activities rather than AppCompatActivity.

Android Studio now generates two files, Java Class&Layout/activity_main.xml. (We don’t use res/menu/menu_main.xml)

* Note: We also found an “Android TV Activity” option. When selected, it will create too many files at once. This is a very useful reference, but it is difficult to understand what functionality each file handles. So I will create these files from scratch in this article so that we can understand the responsibility of each piece of code. Many of the implementations in this article reference this official sample program. Next, we’ll design the UI for MainActivity by creating the MainFragment.

3. Add fragments

Right-click the package Name (in my here is com. Corochann. Androidtvapptutorial) New – > Java Class – > Name: MainFragment * In addition to the above procedures, if we choose New – > Fragment – > Blank Fragment, please uncheck “Create Layout XML?” , which would create too much sample code. First, modify activity_main.xml as shown below to show only mainFragment.

<? xml version="1.0" encoding="utf-8"? > <fragment xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_browse_fragment"
    android:name="com.corochann.androidtvapptutorial.MainFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    tools:context=".MainActivity" 
    tools:deviceIds="tv"
    tools:ignore="MergeRootFrame" />
Copy the code

Then, modify the MainFragment as follows.

We’ll call this MainFragment a subclass of BrowseFragment.

The BrowseFragment class, provided by the Android SDK Leanback library, creates the standard UI for Android TV applications that we’ll see in this tutorial.

package com.corochann.helloandroidtvfromscrach; import android.os.Bundle; import android.support.v17.leanback.app.BrowseFragment; import android.util.Log; public class MainFragment extends BrowseFragment { private static final String TAG = MainFragment.class.getSimpleName();  @Override public void onActivityCreated(Bundle savedInstanceState) { Log.i(TAG,"onActivityCreated"); super.onActivityCreated(savedInstanceState); }}Copy the code

4. Modify Android Mainifest file:

<? xml version="1.0" encoding="utf-8"? > <manifest package="com.songwenju.androidtvapptutoria"
          xmlns:android="http://schemas.android.com/apk/res/android"> <! -- TV app need todeclare touchscreen not required -->
    <uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false"/ > <! --true:  your app runs on only TV
     false: your app runs on phone and TV -->
    <uses-feature
        android:name="android.software.leanback"
        android:required="true"/>

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Leanback">
        <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company">
            <intent-filter>
                <action android:name="android.intent.action.MAIN"/>

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

</manifest>
Copy the code

There are a few things to note: 1) The reason why the touchscreen is set as false is that the TV app does not need to touch.

<uses-feature
        android:name="android.hardware.touchscreen"
        android:required="false"/>
Copy the code

2) Set dependency leanBack library.

<uses-feature
        android:name="android.software.leanback"
        android:required="true"/>
Copy the code

Set to true only on TV and false on TV and phone. The theme of the application

<application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/Theme.Leanback">
Copy the code

Display the Activity icon on the normal desktop and Leanback desktop. Declared in intent-filter.

  <category android:name="android.intent.category.LAUNCHER"/>
  <category android:name="android.intent.category.LEANBAC
Copy the code

Add both icon and logo to the activity tag.

 <activity
            android:name=".MainActivity"
            android:icon="@drawable/app_icon_your_company"
            android:label="@string/app_name"
            android:logo="@drawable/app_icon_your_company">...Copy the code

Run the application here, and the result is shown as follows:

You can see that BrowseFragments consist of HeadersFragment&rowsFragments. Here, you can see the HeaderFragment (Header) section on the right and the RowsFragment (contents) section on the left. We will design the Header&Row combination below.

Before we do that, let’s implement the UI for the main colors and titles of the application.

5. Add setupUIElements() to mainFragment.java

Add the setupUIElements () method to mainFragment.java to set application information.

 @Override
    public void onActivityCreated(Bundle savedInstanceState) {
        LogUtil.i(this,"MainFragment.onActivityCreated.");
        super.onActivityCreated(savedInstanceState);
        setupUIElements();

    }

    private void setupUIElements() {

//        setBadgeDrawable(getActivity() // .getResources() // .getDrawable(R.drawable.app_icon_your_company)); // The image displayed in the title bar (the image hides the title)setTitle("Hello Android TV!"); // Set title //HEADERS_ENABLED to display the left navigation bar, and HEADERS_DISABLED not to display HEADERS_HIDDEN to hide. Press the left key to display the left navigation barsetHeadersState(HEADERS_HIDDEN);
        setHeadersTransitionOnBackEnabled(true); // Set the fast navigation (or headers) background colorsetBrandColor(getResources().getColor(R.color.fastlane_background)); // Set the search colorsetSearchAffordanceColor(getResources().getColor(R.color.search_opaque));
    }
Copy the code

We’ve set it up

  • The title or icon of the application
  • On the left side of the color

The color information is referenced from colors.xml, which we haven’t provided yet. Right-click RES/Values and select

New – > VALUES Resource file name: colors.xml – > “OK”

<? xml version="1.0" encoding="utf-8"? > <resources> <color name="fastlane_background">#0096e6</color>
    <color name="search_opaque">#ffaa3f</color>
</resources>
Copy the code

After running, you can see the color change.

You can also use the setBadgeDrawable () method instead of the setTitle () method. If setBadgeDrawable () is used, the title changes to logo (see figure below).