Font Awesome em seus apps Android

Ícones diferentes da web nunca mais!

Font Awesome é um super facilitador! Você deveria tentar! :)

Identidade visual é sempre uma enorme preocupação e exige realmente muito esforço para se obter um bom resultado. Grande parte desse trabalho complexo, está atribuído à iconografia. Apesar dos vários ícones disponíveis e padronizados, como no Material Design ou em grandes packs de ícones, não é sempre que conseguimos utilizá-los. Principalmente se seus apps Android e iOS partem de uma aplicação web já consolidada, que muitas vezes pode utilizar uma library que resolve isso, como o Font Awesome (que oferece um enorme conjunto de ícones padronizados para aplicações web e de utilização absurdamente fácil).

Utilização do Font Awesome

Levando em consideração que você gostaria — e muito — de levar a mesma experiência de utilização da web para seus apps, mudar os ícones para padrões novos é algo que você gostaria muito de evitar, não é mesmo? (a menos que queira garantir mutias reclamações, reviews ruins e confusões nos usuários mais inexperientes).

Bom, com o Font Awesome cheio de ícones prontos, basta apenas levá-los para seus apps, certo? Então resta pegar cada imagem de ícone e transformá-las em PNGs nos vários tamanhos possíveis para seus apps Android e iOS. E, com isso, ter um trabalho imenso, demorado e ainda correr o risco de esquecer algum ícone, pois são mais de 600 disponíveis no Font Awesome. Perfeito, não? Não.

Para nossa felicidade, existe uma maneira de evitar todo esse trabalho e, em alguns passos, teremos nossos ícones padrão! :)

Importar arquivo True Type

Primeiramente teremos de importar o arquivo .ttf do Font Awesome para nossa pasta de Assets. Para isto, baixe o Font Awesome e procure na pasta “fonts”, pelo arquivo fontawesome-webfont.ttf.

Importe o arquivo na pasta assets — basta copiar e colar o arquivo no finder/windows explorer, que ela já aparecerá aqui.

Criar arquivo de resources

Em seguida, basta ir até o Cheatsheet do Font Awesome, copiar os códigos hexa de correspondência aos ícones e definí-los em um resource de strings, onde haverá o nome do ícone e o valor de referência. Por exemplo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name=”fa_inbox”>&#xf01c;</string>
</resources>

Os nomes de string foram traduzidos para “_” (underscore/underline), pois no Android Studio não é possível nomear strings com caracteres como “-”.

Utilizando os ícones

Para utilizá-los é simples. A partir do momento em que o arquivo de strings foi criado, seus ids ficarão disponíveis no arquivo R e então, basta definir um objeto do tipo Typeface e atribuí-lo à seu elemento.

Typeface fontAwesome = Typeface.createFromAsset(context.getAssets(), "fontawesome-webfont.ttf");
mTextView.setText(getString(R.string.fa_inbox));
mTextView.setTypeface(fontAwesome);

Ao definir os códigos em um resource de strings, evita-se repetição de código e é possível reutilizá-los facilmente.

Agora é só compilar, executar seu projeto e voilà: seu app está preparado para usufruir desse mega pack de ícones quando precisar!

Conclusão

Com isso teremos um app que utiliza o Font Awesome, totalmente funcional, padronizado e com a comodidade de não nos preocuparmos com vários tamanhos de ícones, também evita de termos várias imagens e resources — que podem aumentar — e muito — o tamanho de nosso apk. Além de salvar muito de nosso tempo e permitir que possamos desenvolver coisas mais legais e interessantes para nosso app ficar cada vez mais rico! ;)