Introduction à Android TV

Share Button

Les applications TV sont aujourd’hui présentes pour mettre en avant du contenu en accès rapide et avec très peu de contraintes. Afin de conserver la meilleure expérience possible il est nécessaire de respecter certains aspects.

Au début, le développement d’une application TV est assez proche du développement d’une application smartphone et tablette. Cependant la documentation pour ce type d’appareil est très pauvre.

Pour aider les développeurs, Google recommande de respecter une certaine ergonomie, expliquée dans une documentation de base (https://www.google.com/design/spec-tv/android-tv/introduction.html). Ce qui change globalement c’est la navigation. En effet, sur TV, la navigation dans l’application se fait par l’intermédiaire de la télécommande, sans contact tactile avec l’écran. C’est pourquoi l’ergonomie des applications TV ressemble finalement assez peu à ce dont on a l’habitude et possède ses propres codes, gestes.

La librairie Leanback, mise à disposition par Google, propose plusieurs composants et différents types de fragments. Certains de ces composants sont présentés dans la documentation précédemment évoquée. Malheureusement celle-ci ne propose pas d’exemple de code. Pour vraiment pouvoir vous lancer dans la création de votre première application TV, il faut se référer au tutoriel officiel suivant : https://codelabs.developers.google.com/codelabs/androidtv-adding-leanback/index.html?index=..%2F..%2Findex#0

Ce tutoriel présente les composants et fragments de base via des exemples de code bien expliqués, bien utile pour se familiariser rapidement avec les applications TV.

Pour aller plus loin, le DIY est de mise. En effet, le développement d’applications TV n’étant pas encore très répandu il faut chercher ce que l’on souhaite faire dans des exemples d’applications proposés par Google. Les deux meilleurs samples de code disponibles et mis à jour régulièrement sur GitHub sont :

atv-leanback-all

Fragments et vues abordés dans l’exemple Github androidtv-Leanback

Figure 2 : Fragments et vues abordés dans l'exemple Github leanback-showcase

Fragments et vues abordés dans l’exemple Github leanback-showcase

Ces deux projets se complètent bien même si le deuxième présente plus de diversité.

 

Ça donne quoi en vrai ?

Dans notre cas, nous avons développé une application présentant différents quiz regroupés par thèmes.

Cette application nous a servi d’expérience pour tester certaines fonctionnalités d’Android TV.

Nous avons commencé par implémenter un BrowseFragment (https://developer.android.com/reference/android/support/v17/leanback/app/BrowseFragment.html) pour l’affichage des quiz de chaque thème. L’ajout de listes de quiz se fait via un ArrayObjectAdapter utilisant un ListRowPresenter (adapter permettant d’ajouter plusieurs élements de type ListRow contenant un header et une liste de card).

Ensuite pour chaque élément de la liste il est possible d’utiliser des CardViews prédéfinis ou des CardViews custom selon le besoin. Le BrowseFragment est au début aisé à prendre en main de part les exemples cités précédemment. En effet, l’adapter permettant d’ajouter des lignes de Cards dans le fragment est plutôt intuitif. En revanche lorsque l’on essaie de customiser les vues la complexité s’accroit car il faut se débrouiller par soi-même pour arriver au but que l’on s’est donné. Il y a en effet très peu d’informations sur les vues personnalisées dans les tutoriels.

Figure 3 : BrowseFragment présentant la liste des thèmes et les quiz correspondant

Le BrowseFragment présente la liste des thèmes et les quiz correspondants

Nous avons également utilisé le DetailFragment afin d’afficher le détail d’un quiz. Par défaut la description et l’image adoptent des layouts prédéfinis, mais il est bien entendu possible d’utiliser les nôtres. Dans ce fragment il est possible d’ajouter des listes de suggestions d’éléments. Dans notre cas, nous avons suggéré les quiz du même thème. Le DetailFragment est le plus difficile à mettre en place car aucun exemple n’explique concrètement comment mettre en place l’adapter afin de réaliser une apparence personnalisée. Notre conseil pour réussir une page sympa est d’utiliser un ArrayObjectAdapter avec en paramètre un ClassPresenterSelector (cela permet d’ajouter et d’ordonner plusieurs adapter différents afin, par exemple, de pouvoir proposer des suggestions sous la description de l’élément courant).

Figure 4 : En tête du DetailFragment d’un quiz

Entête du DetailFragment d’un quiz

Figure 5 : Bas de page du DetailFragment d’un quiz, liste de suggestion

Bas de page du DetailFragment d’un quiz avec une liste de suggestions

Pour la recherche d’un quiz nous avons exploité le SearchFragment qui lui est facile à prendre en main. Le fragment de base suffit, il faut simplement spécifier les différents adapter à utiliser pour l’affichage des résultats.

Figure 6 : SearchFragment après la recherche “sport”

SearchFragment après la recherche “sport”

Le GuidedStepFragment est quant à lui très pratique et facile d’utilisation pour de la configuration. En revanche, dans notre cas, nous l’avons utilisé pour la connexion via email et mot de passe, et cela a posé quelques complications lors de l’ajout des champs de saisie de texte. En effet, ce fragment est principalement élaboré pour contenir des boutons classiques et/ou radios.

Figure 7 : GuidedStepFragment proposant le choix du type de connexion

GuidedStepFragment qui propose le choix du type de connexion

Pour notre application nous avons également implémenté une page de paramètres via le SettingsFragment. Cette page se présente comme un Drawer sur la partie droite de l’écran. Le fichier XML de settings est identique à celui que l’on peut trouver sur les smartphones/tablettes.

Figure 8 : SettingsFragment donnant le choix d’activation de certaines fonctionnalités

SettingsFragment qui donne le choix d’activation de certaines fonctionnalités

 

Le mot de la fin

Comme vous avez pu le constater, la réalisation de cette application nous a permis de passer en revue de nombreux composants Android TV fournis par Google.

La programmation d’applications pour Android TV est très intéressante car elle permet une approche différente des applications utilisées sur nos smartphones/tablettes même si une bonne dose de DIY est nécessaire !

Share Button

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *