Skip to content

Un peu de style dans la textview

[ | October 1, 2011]

Les designers qui définissent les écrans de votre application Android se sont fait plaisir, et vous ont demandé une mise en forme bien chiadée pour les textes de votre application.

Avant de vous jeter sur Photoshop pour créer des images correspondant au pixel près à ce qu’ils attendent, pourquoi ne pas garder votre bonne vieille TextView ?

Pour changer un peu des récents articles sur GWT, voici quelques petites astuces pour Android.

Tweak la police

Par défaut, Android ne propose que trois polices de caractères pour les TextView : monospace, sans et serif.

Toutefois, il est tout à fait possible d’utiliser votre police préférée, à condition de l’embarquer dans votre application.

Il suffit de copier la police dans le répertoire assets de votre projet Android, puis de la charger au Runtime :

@Override
protected void onCreate(Bundle savedInstanceState) {.
  super.onCreate(savedInstanceState);

  setContentView(R.layout.main);
  TextView myTextView = (TextView) findViewById(R.id.myTextView);

  Typeface myFont = Typeface.createFromAsset(getAssets(), "MyFont.otf");
  myTextView.setTypeface(myFont);
}

Il n’est pas possible de le faire directement dans votre fichier de layout, sauf en créant des composants alternatifs.

Stylé !

Votre texte doit comporter des morceaux en couleur, en italique… ; bref, il doit être mis en forme.

Avant d’envisager la création d’une TextView pour chaque morceau de texte différent, jetez un oeil à Spannable, et surtout à son cousin germain Html.

Html.fromHtml() retourne un Spanned, qui peut être utilisé pour définir le contenu d’une TextView.

Par exemple : 

Spanned spanned = Html.fromHtml("Hello <b>World</b>!")
myTextView.setText(spanned);

Bien entendu, une String en dur dans le code, c’est moche (pas très i18n).

Pour y remédier, il suffit d’encadrer dans un CDATA le texte contenant le markup Html, au sein de vos fichiers de ressources.

Exemple de res/values/strings.xml : 

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string name="styled_content"><![CDATA[I like turtles!<br />Hello <font color="#99cc33"><b>World</b></font>!]]></string>
</resources>

Malheureusement, vous ne pouvez pas utiliser ces ressources directement dans vos fichiers de layout ; il faut en passer par du code Java : 

@Override
protected void onCreate(Bundle savedInstanceState) {.
  super.onCreate(savedInstanceState);

  setContentView(R.layout.main);
  TextView myTextView = (TextView) findViewById(R.id.myTextView);

  myTextView.setText(Html.fromHtml(getString(R.string.styled_content)));
}

Notez que le support du HTML reste limité (nombre de balises supportées, HTML mal formé, balises les unes dans les autres…)

Bonus

  • Linkify permet de créer des TextViews contenant des liens cliquables de toute sorte. A ce sujet, je vous recommande l’excellent article disponible sur la doc Android.

  • Quels liens entre design Web et design Android ? Un article tout récent sur le blog Android aborde le sujet.

Comments