Flutter Android TV Apps checklist. Part 2 — user interface design.

In this part we will discuss user interface design and Google’s requirements and recommendations for TV app experience. The first part of this article can be found here.

TV app design should be consistent, logical, and predictable allowing navigating within app without getting lost or having to start over. User interface ought to be clear, colorful, and functional fitting nicely in Android TV and performs as users expect.

1. Set landscape orientation. This can be achieved by setting android:screenOrientation=”landscape” in AndroidManifest.xml

<activity
android:name=”.MainActivity”
android:exported=”true”
</application>

or programatically in your app

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
//Forced orientation
SystemChrome.setPreferredOrientations([
DeviceOrientation.landscapeRight,
DeviceOrientation.landscapeLeft,
]);

2. Ensure that all elements are properly visible from a distance. Text and controls should be large enough. Bitmaps and icons ought to be of high-resolution for HDTV screens.

3. Set an overscan in the layout. TV devices may clip the outside edge of an app layout in order to ensure that the entire display is fille, which is called an overscan. In order to make screen elements always visible you should add a 5% margin of 48dp on the left and right edges and 27dp on the top and bottom edges.

4. When actively playing user-initiated media playback, ensure that you prevent the device from entering Ambitne mode. Also when playing media or in a game, ensure that the screen remains on. In Flutter you can use Wakelock plugin.

@override
void initState(){
super.initState();
Wakelock.enable();
}

5. Every UI element should work with both D-pad and game controllers.

6. Make screen background changeable as user browses through content. This makes interaction with your app more cinematic and enjoyable.

7. Allow for ambience. Due to exposure to sunlight during the day some colors may seem washed out. You need to apply higher contrast for this. Keep in mind that the same app will be run also during night.

8. Run the app on real TV sets. Contrary to computer screens the range on colors on tv is much narrower which makes colors less saturated. It also may effect different colors it different way.

9. Test your app on a tv set from different angles as it may influence contrast and legibility of your design according to the sunlight exposure.

This concludes second part of Flutter Android TV Apps checklist