Comment optimiser une application Android – Partie 2

Après quelques conseils d’optimisation au niveau code JAVA d’une application (que vous pouvez retrouver ici), voici la deuxième partie de ce tutoriel qui concerne les optimisations au niveau de l’interface utilisateur.

1 – Detecter les overdraws

L’overdraw se produit quand un composant (partie) d’une vue nécessite plusieurs passages pour être dessinée (plus que nécessaire). Optimiser le nombre de passage nécessaire pour dessiner une vue, optimisera son temps de chargement et améliora donc l’expérience utilisateur.

Un outil (disponible dans les options développeurs) permet de connaitre le nombre de passage nécessaire pour dessiner une vue et cela à travers différents codes couleurs.

Pour afficher l’overdraw d’une vue, il faut accéder aux “options pour les développeurs” d’un appareil (pour activer les options développeur, suivez les instructions suivantes).
Dans la section “Accélération matérielle”, Cliquez sur l’option “Déboguer les conflits GPU” puis sur “Afficher les zones de conflit”.

overdraw_popup

Une fois l’option activée, tous les éléments qui compose un écran auront une couleur spécifique :

  • Aucune couleur (couleur naturelle du composant) : 0 Overdraw
  • Couleur Bleu : 1 Overdraw
  • Couleur verte : 2 Overdraws
  • Couleur rose : 3 Overdraws
  • Couleur rouge : 4 Overdraws ou plus

Prenons un exemple simple pour comprendre, voici le résultat pour une vue contenant une zone de texte :

Capture d’écran 2015-07-08 à 14.34.40

Vous pouvez remarquer que les 3 couleurs sont :

  • Bleu (1 passage) : Pour la vue en globale
  • Vert (2 passages) : Pour le fond de la zone de text
  • Rouge (4 ou + passages) : Pour le texte de la TextView

Voici le code de la vue

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#FFF"
    tools:context=".MainActivity">

    <TextView android:text="@string/hello_world" android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="#FFF"/>

</RelativeLayout>

Donc comment optimiser le overdraw de cette vue ?.
Vous pouvez remarquez que la layout possède un background blanc et que le TextView possède aussi un background blanc, on peux donc se passer du background sur la zone de texte. Cela reduit le nombre de passage nécessaire pour dessiner la zone de texte (vu qu’on dessine plus un background spécifique pour la zone de texte).

Ce qui donnera :

Capture d’écran 2015-07-08 à 14.40.36

Cela s’explique par le faite que lorsqu’un composant est dessinée, un premier passage est nécessaire pour dessiner le composant et un deuxième pour dessiner son background.

Si vous enlevez le background (si possible bien sûr). Vous aurez une vue encore plus optimisé au niveau de l’overdraw

Capture d’écran 2015-07-08 à 14.43.30

Le but est d’optimiser un maximum vos vues dans la mesure du possible (par exemple, obtenir les couleurs naturelles de la vue ou du bleu).

2 – Hierarchie de vue

Cet outil permet d’obtenir un graphique (arbre) représentant la hiérarchie d’une vue. Il permet entre-autre de simplifier vos vues (si des composants / layouts sont inutiles ou peuvent être fusionner).

Pour utiliser cet outil, il faut :

  • Connecter un appareil ou lancer un émulateur android (Cet outil ne fonctionne que sur les appareils possédant une version développeur de l’OS Android)
  • Exécuter l’application sur l’appareil en question
  • Une fois la vue cible affiché sur l’appareil. Dans Android Studio, cliquez sur “Tools > Android > Android Device Monitor

Ce qui donnera le résultat suivant :

Capture d’écran 2015-07-08 à 15.10.36

Puis cliquer sur le menu “Window > open perspective” et sélectionner “Hierarchy View

Dans la liste de gauche, faite un double clic sur la ligne qui correspond à la vue que vous souhaitez inspecter

Capture d’écran 2015-07-08 à 15.20.08

Ce qui donnera :

Capture d’écran 2015-07-08 à 15.22.24

Vous pouvez remarquer que pour une vue très simple (notre exemple), le graph est deja assez complexe

L’interface se compose de 3 zones :

  • Tree view : La fênetre affichant la zone du graph séléctionnée
  • Tree Overview : Permet de naviguer dans le graph
  • Layout View : Permet de voir a quel zone (de la vue) correspond chaque noeud de l’arbre et naviguer directement vers un noeud cible

Si on séléctionne la zone représentant le TextView, on peux remarquer que le graph se compose de 3 noeuds (ContentFrameLayout, RelativeLayout, AppCompatTextView)

Capture d’écran 2015-07-08 à 15.25.05

Le but de ce graph est de permettre de detecter les éléments (composants / Layouts) inutiles ou plusieurs éléments qui peuvent être simplifier ou remplacer par un éléments plus simple. Cela permet aussi de voir l’imbrication de vos layouts. Par exemple, vous remarquez que vous utilisez 3 LinearLayout imbriqués, cela pourrait être optimisé par un seul RelativeLayout.

Dans notre exemple, on peux remarquer que le RelativeLayout déclaré dans notre vue est lié au ContentFrameLayout (ajouté automatiquement par Android). La question qu’on peux se poser, est ce qu’il est possible de brancher la zone de texte (TextView) directement sur ce ContentFrameLayout et ainsi se passer du RelativeLayout ?

Ce qui donnera pour le code (vous remarquez que le code est plus simple maintenant).

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:text="@string/hello_world" />

Ce qui donnera pour le graph :

Capture d’écran 2015-07-08 à 15.32.24

Cet exemple est assez simple et l’optimisation minim, mais sur une grosse application les optimisations peuvent être assez conséquentes.

Un autre outil similaire est disponible pour voir la hiérarchie directement sur la vue. Dans la partie DDMS, section “Devices”, sélectionner le processus représentant votre application (ici tutos.android.uioptimization) puis cliquer sur l’option “Dump View Hierarchy for UI Automator
Capture d’écran 2015-07-08 à 15.07.29

Vous obtiendrez une capture d’écran de la vue courante de votre application, avec la hiérarchie qui compose la vue. Vous pouvez naviguer dans cette hiérarchie et voir plus simplement ou se trouve chaque composant d’une vue.

Capture d’écran 2015-07-08 à 15.36.34

3 – Afficher les contours d’une vue

Vous pouvez aussi afficher les contours d’une vue, cela vous permet

  • D’identifier les différents composants d’une vue
  • Regarder le positionnement de l’éléments (dans son layout)
  • Détecter si l’élément possède des propriétés telles que padding / margin / gravity …

Cette options est disponible dans la section “options pour les développeurs > Tracé > Afficher les contours“. Ce qui donnera par exemple :

Capture d’écran 2015-07-08 à 15.46.23

En attendant une 3ème partie, N’hésitez pas à poser toutes vos questions et à me faire vos remarques

Laisser un commentaire

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