No Google I/O 2017, foi anunciado o suporte para fontes customizadas no Android.
Este novo recurso está disponível para o Android O (API 26) e para versões da API 14 ou superior usando a biblioteca de suporte 26 (Android Support Library).
Google Fonts
O Google Fonts oferece um diretório de fontes open source para que sites e produtos possam integrar tipografias em qualquer projeto de design.
E não para por ai. Esta ferramenta usa um mecanismo de cache para executar de forma performática seu produto ou suas páginas web. Sempre que uma fonte for carregada pela primeira vez, por qualquer site, esta fonte será colocada em cache e será usada por qualquer outro site que use o Google Fonts.
A sacada
A grande sacada é que agora o Google Play Services, na versão 11 ou superior, funciona como um provedor de fontes que solicita ao Google Fonts as fontes que o seu projeto Android necessita.
Isso significa que:
- Você não precisa importar para seu projeto arquivos de fonte com a extensão .ttf. Consequentemente, reduz o tamanho do APK.
- Todo o catálogo de fontes do Google está disponível nativamente para os desenvolvedores.
- Com o mecanismo de cache, seu app terá um melhor desempenho, pois usará menos recursos do dispositivo (ex: pacote de dados, memória e espaço em disco), pois a fonte será baixada quando necessário.
A imagem abaixo mostra como funciona o processo de requisição de fontes na plataforma Android.
Hands On
Usando o Android Studio 3.0, crie um novo projeto básico.
O primeiro passo é adicionar a biblioteca de suporte ao nosso build.gradle do módulo
implementation 'com.android.support:appcompat-v7:26.0.1'
No build.gradle do projeto faça:
repositories {
google()
// Outros repositórios
}
Para adicionar uma fonte é muito simples.
- Abra o arquivo de layout chamado activity_main.xml.
- Selecione ou adicione um TextView que você deseja aplicar uma fonte customizada.
- Na paleta de atributos, localize o atributo fontFamily.
- Na caixa de opções, selecione o item More Fonts...
Na tela que abrirá, você pode selecionar a fonte de seu gosto e visualizá-la. Depois que escolher, certifique-se de marcar a opção "Create downloadable font" e clique em OK para adicionar a fonte ao projeto. Para este exemplo selecionei a fonte Aldrich.
Neste momento o Android Studio criará 3 arquivos para o projeto. Vamos entendê-los.
res/font/aldrich.xml
Arquivo que representa a fonte. Contém informações sobre o provedor de fontes.
<?xml version="1.0" encoding="utf-8"?>
<font-family xmlns:app="http://schemas.android.com/apk/res-auto"
app:fontProviderAuthority="com.google.android.gms.fonts"
app:fontProviderPackage="com.google.android.gms"
app:fontProviderQuery="Aldrich"
app:fontProviderCerts="@array/com_google_android_gms_fonts_certs">
</font-family>
res/values/font_certs.xml
Arquivo que contém os certificados para as fontes.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="com_google_android_gms_fonts_certs">
<item>@array/com_google_android_gms_fonts_certs_dev</item>
<item>@array/com_google_android_gms_fonts_certs_prod</item>
</array>
<string-array name="com_google_android_gms_fonts_certs_dev">
<item>
MIIEqDCCA5CgAwIBAgIJANWFuGx90...
</item>
</string-array>
<string-array name="com_google_android_gms_fonts_certs_prod">
<item>
MIIEQzCCAyugAwIBAgIJAMLgh0ZkS...
</item>
</string-array>
</resources>
res/values/preloaded_fonts.xml
Neste arquivo está configurado para que o Android faça o download da fonte no momento da inicialização do seu aplicativo e não no processo de inflar e renderizar o layout, visto que este processo é síncrono e pode demorar um pouco.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="preloaded_fonts" translatable="false">
<item>@font/aldrich</item>
<item>@font/audiowide</item>
</array>
</resources>
Também foi adicionado no AndroidManifest.xml a meta-data abaixo.
<meta-data
android:name="preloaded_fonts"
android:resource="@array/preloaded_fonts" />
Por fim, o Android Studio já adiciona o atributo fontFamily com o recurso escolhido.
<TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:fontFamily="@font/aldrich" android:text="Hello World!" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent" />
Execute o projeto e veja o resultado.
A fonte foi aplicada apenas ao texto "Hello World!".
Caso você queira definir uma fonte padrão do seu projeto, basta adicioná-la ao estilo.
res/values/styles.xml
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <item name="colorAccent">@color/colorAccent</item> <item name="fontFamily">@font/audiowide</item> </style>
Como resultado todos os textos do App estão como a mesma fonte.
Este recurso é muito útil quando você precisa trabalhar com fontes customizadas.
Até a próxima!
