➙ Conteúdo completo, texto e vídeo, em: https://www.thiengo.com.br/fontes-em-xml-android-o-configuracao-e-uso
Neste conjunto de slides vamos estudar a nova API de fontes do Android, digo, o novo tipo de recurso disponível desde o preview do Android 8, ou Android Oreo, API 26.
➙ Para receber os conteúdos do blog em primeira mão, assine a lista de emails em: http://www.thiengo.com.br
Abraço.
▶ Treinamento oficial:
➙ Prototipagem Profissional de Aplicativos Android:
↳ https://www.udemy.com/android-prototipagem-profissional-de-aplicativos/?persist_locale&locale=pt_BR
▶ Livros oficiais:
➙ Desenvolvedor Kotlin Android - Bibliotecas para o dia a dia:
↳ https://www.thiengo.com.br/livro-desenvolvedor-kotlin-android
➙ Receitas Para Desenvolvedores Android:
↳ https://www.thiengo.com.br/livro-receitas-para-desenvolvedores-android
➙ Refatorando Para Programas Limpos:
↳ https://www.thiengo.com.br/livro-refatorando-para-programas-limpos
▶ Redes:
➙ Udemy: https://www.udemy.com/user/vinicius-thiengo/?persist_locale&locale=pt_BR
➙ YouTube: https://www.youtube.com/user/thiengoCalopsita
➙ Facebook: https://www.facebook.com/thiengoCalopsita
➙ LinkedIn: https://www.linkedin.com/in/vin%C3%ADcius-thiengo-5179b180/
➙ GitHub: https://github.com/viniciusthiengo
➙ Twitter: https://twitter.com/thiengoCalops
➙ Google Plus: https://plus.google.com/+ThiengoCalopsita
▶ Blog App:
➙ https://play.google.com/store/apps/details?id=br.thiengocalopsita&hl=pt_BR
3. TYPEFACE API
- Definição em tempo de execução;
- Folder /assets era o principal local para guardar /
requisitar fontes extras;
- Suporte em 100% dos devices Android no mercado.
5. SDK PLATAFORM 26+
- Abra o SDK Manager;
- Clique na aba SDK
Plataforms;
- Dê um check ✔ em Android
8 ou qualquer outra API
superior;
- Clique em Apply ou Ok;
- Reinicie o Android Studio.
6. FOLDER /FONT
- Clique com o botão direito do
mouse em /res;
- Acesse New;
- Clique em Android resource
directory;
- Em Resource type
selecione font;
- Clique em Ok.
8. FONTES DE FAMÍLIAS DE FONTES
- Google Fontes - também
recomendada na documentação;
- FontLibrary.org;
- Arquivos aceitos no Android:
- .ttf, .ttc, .otf e .xml;
- O .xml é para família de fontes
que podemos criar no folder /
font.
- Possibilidade de utilizar qualquer
outra fonte de família de fontes,
desde que tenha os tipos aceitos ou
os tipos oferecidos possam ser
convertidos.
9. BAIXANDO DO GOOGLE FONTS
- Quando no site, Google Fontes,
selecione a fonte;
- Expanda a caixa de fontes
selecionadas;
- Copie a URL do atributo href da tag
<link>;
- Coloque a URL na caixa de endereços
do navegador Web;
- Abra o arquivo CSS e copie a URL
presente no método url() do bloco de
código /* latin */;
- Abra essa nova URL no navegador
para realizar o download da fonte no
formato .woff2.
10. CONVERTENDO FONTE
- Acesse Every Thing Fonts;
- No menu de topo acesse Font
conversion;
- Em seguida acesse o tipo atual do
formato de fonte. woff conversions, por
exemplo;
- Clique no item que identifique a
conversão. woff2 to ttf, por exemplo;
- Na próxima página:
- Clique em Pick Font File;
- Selecione a fonte a ser convertida;
- Em The EULAs of the font allow
this conversion coloque Yes;
- Clique em Convert.
- Arquivos de fonte fora dos
formatos .ttf, .ttc, .otf e .xml
devem ser convertidos;
11. INSERINDO FONTES NO PROJETO
- Com o Android Studio aberto,
acesse /res/font;
- Copie e cole, em /font, os
arquivos de fonte que estão nos
formatos aceitáveis na
plataforma;
- Clique no arquivo de fonte duas
vezes para ter o preview dela no
editor de código.
13. EM LAYOUT XML - CÓDIGO
- Atributo fontFamily;
- Para fontes no folder /font,
utilize o @font;
- Para fontes de sistema, como
sans-serif, somente o nome da
família de fontes é necessário.
14. EM LAYOUT XML - DESIGN SCREEN
- Com o layout XML aberto, selecione a aba
inferior esquerda, Design, do editor de
código;
- Então selecione o TextView ou algum
componente visual que herde dele;
- Na janela a esquerda, Attributes, acesse
fontFamily e selecione a fonte desejada para
o componente.
15. CRIANDO UMA FAMÍLIA DE FONTES
- Clique com o botão direito do mouse em /
res/font;
- Acesse New;
- Em seguida clique em Font resource file;
- Informe o nome do arquivo, sem caractere
especial, ou traço, ou espaço em branco;
- Clique em Ok;
- O novo arquivo pode ter uma ou mais fontes,
presentes em /font, sendo referenciadas;
- A sintaxe de uso nos layouts XML ou via
código de programação é a mesma do que o
de uma fonte .ttf colocada em /font.
16. ESTRUTURA DO XML DE FAMÍLIA DE FONTES
- Uma ou mais tags <font> são aceitas;
- Com mais de uma <font> definida, o
sistema é que se encarrega de
escolher a melhor possível para o
contexto;
- O namespace app: é para o suporte a
APIs Android abaixo da 26.
- Atributos:
- font: a referência a alguma
fonte presente no folder /font;
- fontStyle: pode ser italic ou
normal;
- fontWeight: pode variar de
100 a 900, onde os valores
devem ser múltiplos de 100.
400 é equivalente a uma
fonte regular, 700 a uma fonte
em negrito.
- Se a fonte em referência não
oferecer suporte a fontStyle ou
fontWeight, esses são ignorados.
17. DEFININDO FONTES VIA PROGRAMAÇÃO
- Utilize o resources.getFont() em
Kotlin;
- E o getResources().getFont() em
Java.
18. DEFININDO A FONTE PADRÃO DO APLICATIVO
- Atualize o arquivo styles.xml
de seu projeto;
- Ainda fará uso do atributo
fontFamily;
19. DEFININDO FAMÍLIA DE FONTES COM TEXTAPPEARANCE
Alguns componentes que contém
TextView ou uma subclasse desta, podem
ser passíveis de atualização de fonte pelo
atributo textAppearance, se disponível.
Será necessário um novo estilo no
styles.xml:
- Neste arquivo, crie um novo <style>;
- Faça com que o novo estilo herde de
algum TextAppearance;
- Defina ao menos um item com o uso
do atributo fontFamily;
- Referencie o novo estilo em alguma
definição textAppearance de seus
layouts.
20. API DE SUPORTE - INSTALAÇÃO
- Android Support Library 26;
- Suporte a partir do Android API 14 -
100% dos aparelhos Android no
mercado;
- Garantindo a API de suporte mais atual:
- Abra o SDK Manager;
- Clique na aba SDK Tools;
- Expanda Support Repository;
- Selecione Android Support
Repository, dê um check ✔;
- Clique em Apply ou Ok.
21. API DE SUPORTE - USO
- Definição no build.gradle de
nível de aplicativo: compile
‘com.android.support:support-
compat:26.0.1’ ou superior;
- Uso do namespace app: em
arquivos de definição de família
de fontes;
- Uso do
ResourcesCompat.getFont() ao
invés do resources.getFont() /
getResources().getFont().
23. PONTOS POSITIVOS
- Simples definição de fonte, em visualizações de texto, com o atributo
fontFamily;
- Definição de fonte padrão pelo arquivo de tema do aplicativo, também
utilizando fontFamily;
- API de suporte já disponível e com modificações mínimas em relação a
API oficial.
24. PONTOS NEGATIVOS
- Não há uma maneira trivial de definir a fonte de itens e subitens do menu
gaveta, digo, uma fonte diferente da definida em styles.xml. Mesmo com o
atributo itemTextAppearance presente em NavigationView, não
conseguimos o acesso individual aos itens, não com este componente sendo
utilizado ao invés de algum framework de lista (RecyclerView, por exemplo);
- Não é possível definir a fonte individual nas tags de <item> de menu;
- As APIs de carregamento externo de fonte, Downloadable Fonts, não
trazem ganhos reais ao projeto, tendo em mente que dependeremos da
qualidade de rede do usuário, dando a possibilidade de "não carregamento”
de fontes necessárias ao design do aplicativo. Acrescente a isso que os
arquivos de família de fontes não ultrapassam poucos KBs, ou seja, nada que
influenciaria consideravelmente o tamanho do APK final.
25. CONCLUSÃO
Como comentado no conteúdo de Material Design: o controle sobre quais
fontes utilizar em um aplicativo, mesmo definindo a fonte padrão nas
especificações, seria difícil por parte do Google.
Isso, pois muitos apps dependem da família de fontes correta para
completar o design.
A possibilidade de definição de fontes com um simples atributo vem facilitar
em muito está necessidade de fontes extras nos aplicativos Android.
Mas ainda faltam muitas melhorias, por exemplo: componentes que não são
em sua essência de texto, mas que permitem o uso deste, deveriam ter
também a possibilidade de uso do atributo fontFamily. Itens de menu, por
exemplo.
26. FONTES
Conteúdo completo, em texto e em vídeo, no link a seguir:
- https://www.thiengo.com.br/fontes-em-xml-android-o-configuracao-e-uso;
Fontes:
- https://developer.android.com/guide/topics/ui/look-and-feel/downloadable-
fonts.html;
- https://developers.google.com/fonts/docs/android;
- https://developer.android.com/guide/topics/ui/look-and-feel/fonts-in-xml.html;
- https://developer.android.com/guide/topics/resources/font-resource.html;
- https://developer.android.com/topic/libraries/support-library/setup.html?hl=pt-
br.