FONTS IN XML
FONTES PERSONALIZADAS EM SEU APP ANDROID
CONFIGURAÇÃO E USO
THIENGO.COM.BR
ANTES DAS DEFINIÇÕES
EM XML
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.
FONTS IN XML -
CONFIGURAÇÃO INICIAL
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.
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.
FONTES EXTERNAS
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.
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.
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;
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.
MODO DE USO
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.
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.
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.
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.
DEFININDO FONTES VIA PROGRAMAÇÃO
- Utilize o resources.getFont() em
Kotlin;
- E o getResources().getFont() em
Java.
DEFININDO A FONTE PADRÃO DO APLICATIVO
- Atualize o arquivo styles.xml
de seu projeto;
- Ainda fará uso do atributo
fontFamily;
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.
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.
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().
PONTOS E CONCLUSÃO
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.
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.
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.
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.
FONTS IN XML
THIENGO.COM.BR
VINÍCIUS THIENGOTHIENGOCALOPSITA@GMAIL.COM

Fontes em XML, Android O. Configuração e Uso

  • 1.
    FONTS IN XML FONTESPERSONALIZADAS EM SEU APP ANDROID CONFIGURAÇÃO E USO THIENGO.COM.BR
  • 2.
  • 3.
    TYPEFACE API - Definiçãoem tempo de execução; - Folder /assets era o principal local para guardar / requisitar fontes extras; - Suporte em 100% dos devices Android no mercado.
  • 4.
    FONTS IN XML- CONFIGURAÇÃO INICIAL
  • 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 - Cliquecom o botão direito do mouse em /res; - Acesse New; - Clique em Android resource directory; - Em Resource type selecione font; - Clique em Ok.
  • 7.
  • 8.
    FONTES DE FAMÍLIASDE 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 GOOGLEFONTS - 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 - AcesseEvery 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 NOPROJETO - 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.
  • 12.
  • 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ÍLIADE 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 XMLDE 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 VIAPROGRAMAÇÃO - Utilize o resources.getFont() em Kotlin; - E o getResources().getFont() em Java.
  • 18.
    DEFININDO A FONTEPADRÃO DO APLICATIVO - Atualize o arquivo styles.xml de seu projeto; - Ainda fará uso do atributo fontFamily;
  • 19.
    DEFININDO FAMÍLIA DEFONTES 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().
  • 22.
  • 23.
    PONTOS POSITIVOS - Simplesdefiniçã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ãohá 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 noconteú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, emtexto 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.
  • 27.
    FONTS IN XML THIENGO.COM.BR VINÍCIUSTHIENGOTHIENGOCALOPSITA@GMAIL.COM