En développant sur la plateforme Android, on se rend compte assez vite des limitations du composant graphique (« widget ») TextView : impossibilité de justifier le texte, pas de formatage possible, l’ajout de liens est difficile, aucun ascenseur n’apparaît si le texte est trop long, etc.

Heureusement, il est possible de contourner toutes ces limitations aisément en utilisant un autre widget : WebView !

Conçu pour afficher du contenu HTML, il n’est pas obligatoire de lui donner une source « externe » (adresse d’une page) et il est tout à fait possible de lui envoyer directement le code HTML à interpréter. Avec quelques subtilités toutefois, d’où l’intérêt de cet article.

Voici un aperçu final de l’exemple qui sera fait :

Cela peut être utile afin d’afficher une page « A propos ».

Marche à suivre

Ajouter le widget au layout

Tout d’abord, il faut ajouter le widget WebView dans le layout de l’activité voulue (à la main ou depuis l’éditeur graphique). Une simple formalité normalement, mais voici le code pour référence :

[snippet id= »119″]

Insérer le code HTML dans les ressources

Ensuite, il faut le contenu, le code HTML à proprement dit.

Première difficulté : comment insérer du code HTML (avec les balises) dans les ressources (le fichier contenant les chaînes de caractères localisées) ?

En l’insérant dans la balise « CDATA », comme suit (dans /res/values/strings.xml) :

[snippet id= »122″]

Remarquez que le contenu est justifié.

Charger le code HTML dans la WebView

Pour terminer, il reste à charger le code HTML précédent dans la WebView.

On va le faire à l’exécution, dans la méthode onCreate() de l’activité :

[snippet id= »123″]

Malheureusement, cette façon de procéder pose quelques problèmes : le fond n’est pas transparent et, plus grave, les accents s’affichent mal (bien qu’on ait spécifié l’encodage) !

Afin de pallier cela, il convient de s’y prendre de la manière suivante :

[snippet id= »124″]

A présent, les accents s’affichent correctement et le fond est transparent, mais tout n’est pas encore parfait…

En effet, il reste encore un problème sur des versions d’Android plus récentes : la transparence provoque l’apparition de carrés noirs désagréables lors du « scroll ».

Un bug graphique dont la correction se fait comme suit (solution compatible avec les anciennes versions d’Android) :

[snippet id= »125″]