Configuring our app for the TV

image.png
We need to create a banner instead of an app icon, as TVs display a banner on the home screen. So we need to create a banner with a pixel size of 320x180. Once created, name it as banner.png, and copy it under the android/app/src/main/res/drawable folder.
In order to add a banner to our app, we need to mention the banner in the AndroidManifest.xml file:

  1. <application
  2. android:name="io.flutter.app.FlutterApplication"
  3. android:label="flutter_android_tv"
  4. android:banner="@drawable/banner"
  5. android:icon="@mipmap/ic_launcher">
  6. ...
  7. </application>

If we want to run an application on TV devices, we must declare a launcher activity for TV in the manifest file. The LEANBACK_LAUNCHER intent filter is used to do this. This filter identifies your app as being enabled for Android TV and lets the Google Play™ store identify it as a TV application. When the user selects your app on the TV Home screen, this helps identify which activity to trigger to match the user’s intent.
We need to add the bolded line to the intent-filter block in the AndroidManifest.xml file to enable this.

  1. <intent-filter>
  2. <action android:name="android.intent.action.MAIN"/>
  3. <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>
  4. <category android:name="android.intent.category.LAUNCHER"/>
  5. </intent-filter>

Mention that the app uses the Leanback UI required for Android TV. If you are developing an app that should run on both mobile (phones, tablets, etc.) as well as Android TV, we need to set the required attribute value to false. If you want to run your app only on the devices that use the Leanback UI, then you have to set the android:required attribute value to true.

  1. <manifest>
  2. <uses-feature android:name="android.software.leanback"
  3. android:required="false" />
  4. ...
  5. </manifest>

Apps that are meant to run on TV devices do not depend on touch screens for input. To do that, it should be declared in the manifest that the android.hardware.touchscreen feature is not required. This configuration identifies your app as being able to work on a TV device and is required for the app to be considered as an Android TV app in Google Play.

  1. <manifest>
  2. <uses-feature android:name="android.hardware.touchscreen"
  3. android:required="false" />
  4. ...
  5. </manifest>

That’s it! The initial configuration is done. Let’s deep dive into code now.
Here we will take an example of a video streaming app, in which you can play YouTube™ videos.

Enabling video streaming

  1. Add the dependency in the pubspec.yaml file