O Guia do desenvolvedor do Android para melhor tipografia

A tipografia pode fazer uma grande diferença na atratividade e na usabilidade de um aplicativo, e agora os desenvolvedores do Android podem usar tipos de letra no catálogo do Google Fonts . É simples, eficiente e abre uma variedade de novas opções tipográficas.

Todo desenvolvedor sabe que o design desempenha um papel importante na experiência do usuário – pode ser um fator crítico no sucesso ou na falha do seu aplicativo. Ainda assim, sempre há a tentação de usar fontes padrão, seja para avançar com um lançamento, para evitar a complexidade de integrar fontes personalizadas, ou apenas para evitar a aparência de arte arcana de seleção de tipos.

Felizmente, o Android Studio tornou mais fácil a criação de um aplicativo com tipografia distinta usando o novo recurso “Downloadable Fonts”. Este recurso coloca o catálogo completo de Fontes do Google na ponta dos dedos e facilita a personalização da tipografia no JellyBean e mais tarde (SDK level 16+) com fontes de dados gratuitas, confiáveis ​​e de alta qualidade.

Além das melhorias estéticas, o uso de fontes para download também pode reduzir o tamanho geral dos arquivos APK e diminuir o uso da memória, pois as fontes baixadas serão compartilhadas entre todos os aplicativos. Seu APK será menor porque não precisa agrupar as fontes por conta própria. Uma vez que uma fonte é baixada das fontes do Google para um aplicativo, o Android o mantém no disco para que outras aplicações também possam usá-lo sem qualquer armazenamento adicional. Assim como a nossa API da Web, que serve fontes diretamente para sites, quanto mais as pessoas usam fontes do Google, maior a latência ganha com o compartilhamento.

Neste tutorial, melhoraremos a tipografia de um exemplo de aplicação ao mudar a fonte padrão para algo com uma gama de estilos mais distintiva e dinâmica do catálogo de fontes do Google. Usaremos um tipo chamado Alegreya , que é conhecido como “super família” porque oferece uma ampla gama de estilos, pesos e variantes. Usar uma super família significa que teremos muitas opções tipográficas para afinar a aparência de nossa interface.

O aplicativo com o qual trabalharemos é Plaid, da Nick Butcher, que é um feed rolável de artigos de notícias relacionadas ao Material Design. Estes são apresentados como telhas de sangramento completo, que você pode tocar ou clicar para expandir para uma página de “driblar” com favoriting e estatísticas para “gosta” e “visualizações”.

Este tutorial destina-se a desenvolvedores, mas também explica algumas das decisões “porquê” por trás do projeto, então segure os dois chapéus!

Antes de começarmos

Instale o Android Studio 3.0 , depois clone o projeto “Plaid” do Github e check-out b76937, a versão que usaremos para este tutorial:

 git clone https://github.com/rsheeter/plaid.git ; 
 cd xadrez; 
 git checkout b76937;

Agora, abra o projeto no Android Studio 3.0.

Para usar o provedor de fontes do Google, você deve ter a versão do Google Play Services 12+ instalada. Se você estiver trabalhando com um dispositivo configurado para receber atualizações, você pode avançar; mas se você estiver usando um emulador lançado no Android Studio, talvez esteja usando uma versão mais antiga do Google Play Services. Para atualizar o dispositivo virtual Android do Android Studio, siga estas etapas.

1. Crie um dispositivo virtual (Ferramentas> Android> Gerenciador AVD) com Play Store, indicado pelo ícone na coluna Play Store:

2. Inicie um dispositivo virtual no Android Studio. Para abrir os “Controles Estendidos”, no lado direito da tela do emulador, toque ou clique no ícone final ... na parte inferior do painel do botão vertical:

3. Selecione Google Play e verifique o número da versão. Se você estiver executando 11.2 ou inferior, toque ou clique no botão Update . Isso deve levá-lo para a Play Store, onde você deve tocar ou clicar no botão verde Update :

4. Agora que você atualizou para a versão 11.2 ou superior, o dispositivo suportará fontes para download.

Atualize a página About

Primeiro, vamos atualizar a página Sobre. O parágrafo “texto do corpo” na metade inferior da página está configurado no Roboto Regular , uma fonte sem, enquanto o título (na metade superior) está definido no Roboto Mono Regular . Vamos mudá- lo para o tipo de rosto Serif Alegreya , um design energético e contemporâneo com um ritmo dinâmico e variado, inspirado em letras de letra caligráficas. O sistema de tipo Alegreya é uma “super família”, originalmente destinada à literatura, e inclui famílias irmãs serif e sans-serif.

O texto do título serve como uma “imagem do herói”, um grande gráfico que leva as pessoas à página e estabelece um tom emocional. Isso usa as formas de letras do título como uma “máscara” que corta o primeiro plano verde menta para que uma imagem possa espiar por trás. Trocar de Roboto Mono Regular para Alegreya Black proporcionará uma área de superfície maior para que essa imagem brilhe.

Edite o texto “Sobre a atividade”

Como o texto “Sobre a atividade” atualmente chama o estilo de texto “padrão”, Roboto Regular, teremos que definir outro manualmente:

  1. Abra app/src/main/res/layout/about_plaid.xml
  2. Selecione a guia Design
  3. No painel Component Tree , abra about_description
  4. No painel Attributes , abra o menu suspenso fontFamily e selecione More Fonts… (Você pode ter que clicar em View all attributes para ver fontFamily )
  5. Selecione família Alegreya
  6. Selecione estilo Regular

Siga os passos 1-6 para editar o texto “Sobre a atividade”

O Android Studio configurou nosso aplicativo para recuperar a fonte do provedor do Google Fonts. ‘ Para fazer isso, fez uma série de mudanças na nossa árvore de origem:

app/src/main/res/font/ ( saiba mais )
Este novo diretório contém arquivos XML que descrevem recursos de fontes. Nesse caso, dá instruções para carregar um tipo de letra do provedor de fontes do Google.

app/src/main/res/values/font_certs.xml ( saiba mais )
Para garantir que as solicitações de fontes sejam apenas respondidas por partes confiáveis, este arquivo especifica a assinatura do provedor de fontes.

app/src/main/res/values/preloaded_fonts.xml ( saiba mais )
Esta é uma lista de fontes a serem carregadas durante a instalação e atualizações para confirmar que essas fontes estarão disponíveis quando o próprio aplicativo for iniciado.

Você pode ver um exemplo de diferença para esta etapa no commit a1e711c .

Atualizar a exibição de texto recortado

O estilo de texto é atualmente Roboto Mono Regular. Vamos mudá-lo continuando onde deixamos na etapa anterior:

7. Na vista Design, selecione “CutoutTextView”

8. Abra o menu suspenso “fontFamily” e selecione “Mais fontes …”

9. Selecione família “Alegreya”

10. Selecione o estilo “Preto”

11. (Para o passo 11, veja abaixo)

Siga as etapas 7-11 para atualizar o CutoutTextView

Se você tentou isso agora, a fonte ainda seria Roboto Regular, e não Alegreya Black. O motivo é que as fontes declarativas são obtidas de forma assíncrona por padrão ( saiba mais .) Ao concluir, o sistema tentará atualizar a fonte de um TextView usando setTypeface, mas isso irá falhar porque o CutoutTextView não amplia o TextView.

No entanto, CutoutTextView implementa a propriedade fontFamily ( aqui ). Se marcarmos a fonte como bloqueio, a fonteFamily estará pronta quando a solicitaremos. Se não marcarmos como bloqueio, o valor retornado para fontFamily ainda não será utilizável. (Nós também podemos codificar async buscar-nos, mas vamos salvar isso para mais tarde.)

11. Abra app/src/main/res/font/alegreya.xml e alegreya-black.xml , então anexe este atributo ao final dos elementos <font-family> :

 app: fontProviderFetchStrategy = "bloqueio"

Agora experimente! (Você pode ver uma amostra diff para esta etapa no commit f1c997 )

Atualizar o tamanho do texto

Dê uma olhada no texto “Sobre”. É cinza em um fundo cinzento um pouco mais claro. Alegreya é um tipo de letra serif com alta “modulação de traçado”, o que significa que suas formas de letra variam amplamente de seus pontos mais finos para seus pontos mais finos. Um pouco contra-intuitivo, isso leva a um contraste visual mais baixo em geral. As variações finas em uma letra podem fazer parecer desfocada, especialmente em tamanhos pequenos.

Para mitigar esse problema, vamos aumentar o text-size do text-size do parágrafo de 16sp para 18sp . Isso aumentará o aparente contraste do texto em seu contexto.

O TextView para about_plaid.xml usa um estilo chamado TextAppearance.About . Para alterar o tamanho do texto de 16sp para 18sp , edite esta seção do app/src/main/res/values/styles.xml :

Você pode ver um exemplo de diferença para esta etapa em github.com/rsheeter/plaid/commit/4dda25

Atualizar o título do aplicativo

Em seguida, alteraremos o título do nosso aplicativo, obtendo uma fonte por meio de programação. O título está definido no Roboto com o recurso OpenType “small caps” aplicado. Nós também usamos “rastreamento” extra para espaçar as letras.

(Este detalhe é emprestado de uma convenção de tipografia de livros, onde os títulos dos capítulos são frequentemente impressos em pequenas capas ao longo do topo das páginas. Para saber mais sobre a tipografia, confira o livro Shaping Text de Jan Middendorp.)

A recuperação assíncrata falhará porque a barra de ferramentas não é um TextView, assim como o CutoutTextView não é. Além disso, a barra de ferramentas não implementa a propriedade fontFamily, portanto, não podemos simplesmente configurar o bloqueio para corrigi-lo.

Em vez disso, vamos tentar buscar e atribuir a fonte de maneira programática. No app/src/main/java/io/plaidapp/ui/HomeActivity.java use FontsContractCompat ( referência ) para solicitar a fonte seguindo estas quatro etapas.

1. Precisamos de um fio para aguardar a chegada da fonte. Declare uma variável para mantê-la:

 Handler fontHandler privado;

2. Adicione um método para gerenciar o thread de manipulação de fontes:

3. Adicione um método para aplicar um Typeface ( referência ) à barra de ferramentas:

4. Em onCreate , inicie uma busca assíncrona do provedor de fontes:

Mude para Alegreya Sans SC Black

Analisando a página principal, observe que o título parece um pouco magro. Como muitos tipos de letra serif, os traços altamente modulados de Alegreya levam a menor contraste visual, especialmente quando comparado ao sem-serif médio.

Felizmente, Alegreya é uma “super família” com variedades serif e sans em uma variedade de pesos. Emparelhar estas duas fontes e usar pesos diferentes pode dar estrutura a uma interface, delineando UI do conteúdo. Vamos tentar Alegreya Sans Small Caps (SC).

A variante de pequenas capas de Alegreya é inerentemente menor, mas podemos corrigir isso aumentando seu peso. Vamos tentar o peso Black (900).

  1. Copie res/font/alegreya.xml para criar res/font/font/alegreya_sans_sc_black.xml
  2. Edite alegreya_sans_sc_black.xml para alterar o app:fontProviderQuery para o name=Alegreya Sans SC&amp;weight=900
  3. Edite res/values/preloaded_fonts.xml para adicionar a nova fonte:

4. Especifique a nova consulta em HomeActivity.java :

Mude Alegreya Black para Bold

Dê uma olhada no título na página principal

O peso do Black é um pouco forte demais aqui, então vamos marcar para Bold (700).

  1. Renomeie alegreya_sans_sc_black.xml para alegreya_sans_sc_bold.xml e edite para alterar o app:fontProviderQuery para name=Alegreya Sans SC&amp;weight=700
  2. Em HomeActivity.java atualize a consulta:

Você pode ver um exemplo de diferença para o estado final do aplicativo (usando Alegreya Sans SC Bold) no commit ac55478 . Veja como seu projeto se compara.

Atualizar vista Dribble

Para acessar a visualização “driblar” no aplicativo, toque ou clique em um cartão na tela principal. Mais uma vez, substituamos Roboto Mono Regular por Alegreya Black.

No app/src/main/res/layout/dribbble_shot_title.xml , observe que o título e a descrição são denominados usando @style/TextAppearance.DribbbleShotTitle e @style/TextAppearance.DribbbleShotDescription . Encontre estes no app/src/main/res/values/styles.xml (Sugestão: Ctrl + Clique.) Agora mude a fonte:

Você pode ver um exemplo de diferença para isso no commit 0e53b56 .

Alterar estilos numéricos

Há apenas mais uma coisa para melhorar a visão “driblar”.

Os botões “gosta” e “visualizações” usam o que são chamados de “estilo antigo” numerais. Estes são projetados para se misturar com letras latinas minúsculas em parágrafos de texto. Mas, por si só, os números de estilo antigo parecem fora de lugar porque seus descendentes às vezes ficam abaixo da linha de base do outro texto.

Em vez disso, vamos usar o recurso lnum . Isso diz ao aplicativo que use números de “forro”, que são mais familiares, porque eles são projetados para ter a mesma altura que letras maiúsculas. ( Saiba mais de nossos amigos no Typekit )

Olhando para app/src/main/res/layout/dribbble_shot_description.xml , podemos ver que os contadores “gosta” e “visualizações” são denominados por @style/Widget.Plaid.InlineActionButton .

Encontre o @style/Widget.Plaid.InlineActionButton no app/src/main/res/values/styles.xml (sugestão: Ctrl + clique.)

Agora, adicione uma instrução para usar números de revestimento para esses contadores:

Você pode ver uma amostra diff para isso no commit 4dda25 .

Conclusão

Depois de aplicar essas mudanças simples, meu garfo do aplicativo Plaid agora possui tipografia mais impressionante e funcional tirada da biblioteca do Google de fontes gratuitas de fonte aberta. Com o novo recurso de fontes de download do Android, você pode usar qualquer coisa no diretório de fontes do Google para personalizar a tipografia em seu aplicativo. Como você viu neste tutorial, apenas algumas mudanças podem fazer uma diferença real na legibilidade e na experiência do usuário. Estamos ansiosos para ver o que você faz!