Conceitos básicos do Kotlin para Android 10.1: estilos e temas

Este codelab faz parte do curso Conceitos básicos do Kotlin para Android. Você vai aproveitar mais este curso se fizer os codelabs em sequência. Todos os codelabs do curso estão listados na página inicial dos codelabs de princípios básicos do Kotlin para Android.

Este codelab faz parte de uma série que ensina os conceitos básicos do design de apps Android e orienta você na criação de um app que encontra encontros do Google Developer Group (GDG). O app mostra informações sobre os próximos encontros de uma forma bonita e acessível.

Recomendamos que você faça os três codelabs desta série na ordem, porque eles avançam nas tarefas passo a passo:

• 10.1 Estilos e temas
• 10.2 Material Design, dimensões e cores
• 10.3 Projetar para todo mundo

Introdução ao design

O foco desta série de codelabs é um dos aspectos mais importantes do desenvolvimento para Android: o design de apps. Os aspectos óbvios do design de apps são visualizações, texto e botões, além de onde eles estão na tela, bem como as cores e fontes usadas. Dicas para o usuário sobre o que fazer em seguida também são um aspecto essencial do design. Os usuários precisam conseguir identificar rapidamente o que estão vendo, o que é importante e o que podem fazer.

Compare as duas telas abaixo. Ao mover elementos e focar no que é importante, você ajuda o usuário a entender o que está acontecendo. Para telas simples, um bom design geralmente significa mostrar menos. Para telas com muitas informações importantes, um bom design torna as informações densas compreensíveis rapidamente. Ao trabalhar com apps Android, você pode ouvir esse conceito chamado arquitetura da informação (AI).

Outro nível de design é a criação de fluxos de usuários coerentes, ou casos de uso, que permitem aos usuários realizar tarefas. Essa forma de design é chamada de design de experiência do usuário (UXD), e alguns designers se especializam nela.

Se você não tiver acesso a um designer, confira algumas dicas para começar:

• Defina casos de uso. Descreva o que os usuários devem fazer com seu app e como.
• Implemente um design. Não se apegue ao primeiro rascunho e faça apenas o suficiente, porque você vai mudar depois de ver como os usuários reais interagem com ele.
• Receba feedback. Encontre alguém que possa testar seu app: sua família, amigos ou até mesmo pessoas que você acabou de conhecer em um Google Developer Group. Peça que eles usem seu app para realizar um caso de uso enquanto você observa e anota detalhes.
• Refine! Com todas essas informações, melhore o app e teste novamente.

Confira outras perguntas que você pode fazer ao criar uma ótima experiência no app. Você aprendeu técnicas para resolver esses problemas nos codelabs anteriores:

• O app perde o estado quando o usuário gira o dispositivo?
• O que acontece quando o usuário abre o app? O usuário vê um ícone de carregamento ou os dados estão prontos em um cache off-line?
• O app foi programado de maneira eficiente e garante que ele esteja sempre responsivo ao toque do usuário?
• O app interage com sistemas de back-end de uma forma que nunca leva à apresentação de dados estranhos, incorretos ou desatualizados ao usuário?

Ao trabalhar em apps para públicos-alvo maiores, é essencial torná-los acessíveis ao maior número possível de usuários. Exemplo:

• Muitos usuários interagem com sistemas de computador de diferentes maneiras. Muitos usuários são daltônicos, e as cores que contrastam para um usuário podem não funcionar para outro. Muitos usuários têm deficiência visual, desde a necessidade de óculos de leitura até a cegueira.
• Alguns usuários não conseguem usar telas touchscreen e interagem com outros dispositivos de entrada, como botões.

Um bom design é a maneira mais importante de fazer com que os usuários usem seu app.

Estes codelabs são muito curtos para ensinar tudo sobre design para Android, mas vão ajudar você a começar na direção certa. Depois, você pode continuar aprendendo e se desenvolvendo por conta própria.

O que você já precisa saber

Você precisa:

• Como criar apps com atividades e fragmentos e navegar entre eles transmitindo dados
• Usar visualizações e grupos de visualizações para criar uma interface do usuário (IU), incluindo RecyclerView
• Como usar os Componentes da arquitetura, incluindo ViewModel, com a arquitetura recomendada para criar um app bem estruturado e eficiente.
• Vinculação de dados, corrotinas e como processar cliques
• Como se conectar à Internet e armazenar dados em cache localmente usando um banco de dados Room
• Como definir propriedades de visualização
• Como extrair e usar recursos de arquivos de recursos XML

O que você vai aprender

• Os conceitos básicos do sistema de estilo do Android
• Como usar atributos, estilos e temas para personalizar seu app

Atividades deste laboratório

• Melhorar o design de um app inicial com atributos de visualização, estilos e temas

O app inicial do GDG-finder se baseia em tudo o que você aprendeu até agora neste curso.

O app usa ConstraintLayout para criar três telas. Duas das telas são apenas arquivos de layout que você vai usar para explorar cores e texto no Android.

A terceira tela é um localizador de GDG. Os GDGs, ou Google Developer Groups, são comunidades de desenvolvedores que se concentram em tecnologias do Google, incluindo o Android. Os GDGs do mundo todo organizam encontros, conferências, study jams e outros eventos.

Ao desenvolver esse app, você trabalha na lista real de GDGs. A tela do localizador usa a localização do dispositivo para classificar os GDGs por distância.

Se você tiver sorte e houver um GDG na sua região, confira o site e inscreva-se nos eventos deles. Os eventos do GDG são uma ótima maneira de conhecer outros desenvolvedores Android e aprender as práticas recomendadas do setor que não se encaixam neste curso.

As capturas de tela abaixo mostram como o app vai mudar do início ao fim deste codelab.

O Android oferece um sistema de estilização avançado que permite controlar a aparência de todas as visualizações no app. Você pode usar temas, estilos e atributos de visualização para afetar a estilização. O diagrama abaixo resume a precedência de cada método de estilização. O diagrama de pirâmide mostra a ordem em que os métodos de estilização são aplicados pelo sistema, de baixo para cima. Por exemplo, se você definir o tamanho do texto no tema e depois definir o tamanho do texto de maneira diferente nos atributos da visualização, os atributos da visualização vão substituir o estilo do tema.

Atributos de visualização.

• Use atributos de visualização para definir atributos explicitamente para cada visualização. Ao contrário dos estilos, os atributos de visualização não são reutilizáveis.
• Você pode usar todas as propriedades que podem ser definidas por estilos ou temas.

Use para designs personalizados ou únicos, como margens, padding ou restrições.

Estilos

• Use um estilo para criar uma coleção de informações de estilo reutilizáveis, como tamanho da fonte ou cores.
• Bom para declarar pequenos conjuntos de designs comuns usados em todo o app.

Aplique um estilo a várias visualizações, substituindo o estilo padrão. Por exemplo, use um estilo para criar cabeçalhos ou um conjunto de botões com estilo consistente.

Estilo padrão

• Esse é o estilo padrão fornecido pelo sistema Android.

Temas

• Use um tema para definir cores em todo o app.
• Use um tema para definir a fonte padrão de todo o app.
• Aplicar a todas as visualizações, como visualizações de texto ou botões de opção.
• Use para configurar propriedades que podem ser aplicadas de maneira consistente em todo o app.

TextAppearance

• Para estilização apenas com atributos de texto, como fontFamily.

Quando o Android estiliza uma visualização, ele aplica uma combinação de temas, estilos e atributos que podem ser personalizados. Os atributos sempre substituem qualquer coisa especificada em um estilo ou tema. E os estilos sempre substituem tudo o que é especificado em um tema.

As capturas de tela abaixo mostram o app GDG-finder com um tema claro (esquerda) e um tema escuro (direita), além de uma fonte e tamanhos de cabeçalho personalizados. Isso pode ser implementado de várias maneiras, e você vai aprender algumas delas neste codelab.

Nesta tarefa, você vai usar atributos para estilizar cabeçalhos do texto no layout do app.

1. Faça o download e execute o app inicial GDG-finder.
2. A tela inicial tem muito texto formatado de maneira uniforme, o que dificulta descobrir o assunto da página e o que é importante.
3. Abra o arquivo de layout home_fragment.xml.
4. Observe que o layout usa ConstraintLayout para posicionar elementos dentro de um ScrollView.
5. Para cada visualização, os atributos de restrição e layout de margem são definidos na visualização, porque tendem a ser personalizados para cada visualização e tela.
6. Na visualização de texto title, adicione um atributo textSize para mudar o tamanho do texto para 24sp.
   
   Como lembrete, sp significa pixels de escala independente, que são dimensionados pela densidade de pixels e pela preferência de tamanho da fonte definida pelo usuário nas configurações do dispositivo. O Android calcula o tamanho do texto na tela ao renderizá-lo. Sempre use sp para tamanhos de texto.

<TextView
       android:id="@+id/title"
...

android:textSize="24sp"

7. Defina o textColor da visualização de texto title como cinza opaco, definindo-o como um valor aRGB de #FF555555.

<TextView
       android:id="@+id/title"
...

android:textColor="#FF555555"

8. Para abrir a guia Preview no Android Studio, selecione View > Tool Windows > Preview ou clique no botão vertical Preview na borda direita do Layout Editor. Na prévia, verifique se o título está cinza e maior do que antes, conforme mostrado abaixo.

Dica : um valor aRGB expressa a transparência alfa, o valor vermelho, o valor verde e o valor azul de uma cor. Um valor aRGB usa um número hexadecimal que varia de 00 a FF para cada componente de cor.

#(alpha)(red)(green)(blue)

#(00-FF)(00-FF)(00-FF)(00-FF)

Exemplos:

• #FFFF0000 para vermelho opaco
• #5500FF00 para verde semitransparente
• #FF0000FF para azul opaco

9. Estilize o subtítulo para ter a mesma cor do cabeçalho, com uma fonte menor, 18sp. O alfa padrão é FF, opaco. Você pode omitir o valor alfa se não estiver mudando.

<TextView
       android:id="@+id/subtitle"
...
android:textSize="18sp"
android:textColor="#555555"

10. Neste codelab, o objetivo é estilizar o app para que ele seja um pouco divertido, mas com uma aparência profissional. No entanto, você pode estilizar da maneira que quiser. Tente os seguintes atributos para a visualização de texto subtitle. Use a guia Visualizar para ver como a aparência do app muda. Em seguida, remova esses atributos.

<TextView
       android:id="@+id/subtitle"
       ...
       android:textAllCaps="true"
       android:textStyle="bold"
       android:background="#ff9999"

11. Não se esqueça de desfazer os atributos textAllCaps, textStyle e background da visualização subtitle antes de continuar.
12. Execute o app. Ele já vai estar com uma aparência melhor.

Ao usar fontes com seu app, você pode enviar os arquivos de fonte necessários como parte do APK. Embora seja simples, essa solução geralmente não é recomendada, porque faz com que o download e a instalação do app demorem mais.

O Android permite que os apps façam o download de fontes durante a execução usando a API Fontes para download. Se o app usar a mesma fonte de outro app no dispositivo, o Android fará o download da fonte apenas uma vez, economizando espaço de armazenamento.

Nesta tarefa, você vai usar fontes para download para definir a fonte de cada visualização no app que usa o tema.

Etapa 1: aplicar uma fonte para download

1. Abra o home_fragment.xml na guia Design.
2. No painel Component Tree, selecione a visualização de texto title.
3. No painel Atributos, encontre o atributo fontFamily. Ele está na seção Todos os atributos ou pode ser pesquisado.
4. Clique na seta do menu suspenso.
5. Role a tela até Mais fontes e selecione essa opção. A janela Recursos será aberta.

6. Na janela Recursos, pesquise lobster ou apenas lo.
7. Nos resultados, selecione Lobster Two.
8. À direita, abaixo do nome da fonte, selecione o botão de opção Criar fonte para download. Clique em OK.
9. Abra o arquivo de manifesto do Android.
10. Perto da parte de baixo do manifesto, encontre a nova tag <meta-data> com os atributos name e resource definidos como "preloaded_fonts". Essa tag informa ao Google Play Services que o app quer usar fontes baixadas. Quando o app é executado e solicita a fonte Lobster Two, o provedor de fontes faz o download dela da Internet, caso ela ainda não esteja disponível no dispositivo.

<meta-data android:name="preloaded_fonts" android:resource="@array/preloaded_fonts"/>

11. Na pasta res/values, encontre o arquivo preloaded_fonts.xml, que define a matriz que lista todas as fontes para download desse app.
12. Da mesma forma, o arquivo res/fonts/lobster_two.xml tem informações sobre a fonte.
13. Abra home_fragment.xml e observe no código e na prévia que a fonte Lobster Two é aplicada ao title TextView e, portanto, ao título.

14. Abra res/values/styles.xml e examine o tema AppTheme padrão criado para o projeto. Atualmente, ele aparece assim: Para aplicar a nova fonte Lobster Two a todo o texto, atualize o tema.
    
15. Na tag <style>, observe o atributo parent. Cada tag de estilo pode especificar um elemento pai e herdar todos os atributos dele. O código especifica o Theme definido pelas bibliotecas do Android. O tema MaterialComponents, que especifica tudo, desde como os botões funcionam até como desenhar barras de ferramentas. O tema tem padrões razoáveis, então você pode personalizar apenas as partes que quiser. O app usa a versão Light desse tema sem a barra de ações (NoActionBar), como você pode ver na captura de tela acima.
    

<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
   <!-- Customize your theme here. -->
   <item name="colorPrimary">@color/colorPrimary</item>
   <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
   <item name="colorAccent">@color/colorAccent</item>
</style>

16. No estilo AppTheme, defina a família de fontes como lobster_two. Você precisa definir android:fontFamily e fontFamily, porque o tema principal usa os dois. Você pode conferir home_fragment.xml na guia Design para visualizar as mudanças.

<style name="AppTheme"  
...    
        <item name="android:fontFamily">@font/lobster_two</item>
        <item name="fontFamily">@font/lobster_two</item>

17. Execute o app novamente. A nova fonte é aplicada a todo o texto. Abra a gaveta de navegação e acesse as outras telas. Você vai notar que a fonte também foi aplicada lá.

Etapa 2: aplicar o tema ao título

1. No arquivo home_fragment.xml, encontre a visualização de texto title, que tem o atributo da fonte lobster_two. Exclua o atributo fontFamily e execute o app. Como o tema define a mesma família tipográfica, não há mudanças.
2. Coloque um atributo fontFamily diferente de volta na visualização de texto title:
   app:fontFamily="serif-monospace"
Verifique se ele está no espaço app.

<TextView
       android:id="@+id/title"
       ...
       app:fontFamily="serif-monospace"

3. Execute o app e confira que o atributo local da visualização substitui o tema.
   

4. Remova o atributo fontFamily da visualização de texto title.

Os temas são ótimos para aplicar temas gerais ao seu app, como uma fonte padrão e cores primárias. Os atributos são ótimos para estilizar uma visualização específica e adicionar informações de layout, como margens, padding e restrições, que tendem a ser específicas de cada tela.

No meio da pirâmide de hierarquia de estilos estão os estilos. Os estilos são "grupos" reutilizáveis de atributos que podem ser aplicados às visualizações escolhidas. Nesta tarefa, você vai usar um estilo para o título e o subtítulo.

Etapa 1: criar um estilo

1. Abra res/values/styles.xml.
2. Dentro da tag <resources>, defina um novo estilo usando a tag <style>, conforme mostrado abaixo.

<style name="TextAppearance.Title" parent="TextAppearance.MaterialComponents.Headline6">
</style>

É importante pensar nos nomes de estilos como semânticos ao nomeá-los. Selecione um nome de estilo com base na finalidade dele, não nas propriedades que ele afeta. Por exemplo, chame esse estilo de Title, não algo como LargeFontInGrey. Esse estilo será usado por qualquer título em qualquer lugar do app. Como convenção, os estilos TextAppearance são chamados de TextAppearance.Name. Nesse caso, o nome é TextAppearance.Title.

O estilo tem um pai, assim como um tema pode ter um pai. Mas, desta vez, em vez de estender um tema, o estilo estende um estilo, TextAppearance.MaterialComponents.Headline6. Esse estilo é um estilo de texto padrão para o tema MaterialComponents. Ao estendê-lo, você modifica o estilo padrão em vez de começar do zero.

3. Dentro do novo estilo, defina dois itens. Em um item, defina o textSize como 24sp. No outro item, defina textColor como o mesmo cinza escuro usado antes.

 <item name="android:textSize">24sp</item>
 <item name="android:textColor">#555555</item>

4. Defina outro estilo para as legendas. Nomeie como TextAppearance.Subtitle.
5. Como a única diferença de TextAppearance.Title será no tamanho do texto, faça com que esse estilo seja um filho de TextAppearance.Title.
6. Dentro do estilo Subtitle, defina o tamanho do texto como 18sp. Confira o estilo completo:

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Etapa 2: aplicar o estilo criado

1. Em home_fragment.xml, adicione o TextAppearance.Estilo Title para a visualização de texto title. Exclua os atributos textSize e textColor.
   
   Os temas substituem qualquer estilo TextAppearance definido por você. O diagrama de pirâmide no início do codelab mostra a ordem em que o estilo é aplicado. Use a propriedade textAppearance para aplicar o estilo como um TextAppearance para que a fonte definida no Theme substitua o que você definiu aqui.

<TextView
       android:id="@+id/title"
       android:textAppearance="@style/TextAppearance.Title"

2. Adicione também o estilo TextAppearance.Subtitle à visualização de texto subtitle e exclua os atributos textSize e textColor. Você também precisa aplicar esse estilo como um textAppearance para que o conjunto de fontes no tema substitua o que você definiu aqui.

<TextView
       android:id="@+id/subtitle"
       android:textAppearance="@style/TextAppearance.Subtitle"

Importante:quando você tem temas e estilos manipulando texto, é preciso aplicar as propriedades de texto como um atributo textAppearance se quiser que as propriedades de texto no tema substituam o que está definido e herdado no estilo.

3. Execute o app. Agora, o texto tem um estilo consistente.

Projeto do Android Studio: GDGFinderStyles (link em inglês).

• Use temas, estilos e atributos nas visualizações para mudar a aparência delas.
• Os temas afetam o estilo de todo o app e vêm com muitos valores predefinidos para cores, fontes e tamanhos de fonte.
• Um atributo se aplica à visualização em que ele é definido. Use atributos se você tiver um estilo que se aplica apenas a uma visualização, como padding, margens e restrições.
• Estilos são grupos de atributos que podem ser usados por várias visualizações. Por exemplo, você pode ter um estilo para todos os cabeçalhos de conteúdo, botões ou visualizações de texto.
• Os temas e estilos herdam do tema ou estilo pai. É possível criar uma hierarquia de estilos.
• Os valores de atributo (definidos em visualizações) substituem os estilos. Os estilos substituem o estilo padrão. Os estilos substituem os temas. Os temas substituem qualquer estilo definido pela propriedade textAppearance.

• Defina estilos no arquivo de recursos styles.xml usando as tags <style> e <item>.

<style name="TextAppearance.Subtitle" parent="TextAppearance.Title" >
   <item name="android:textSize">18sp</item>
</style>

Com as fontes para download, elas ficam disponíveis para os usuários sem aumentar o tamanho do APK. Para adicionar uma fonte para download a uma visualização:

1. Selecione a visualização na guia Design e escolha Mais fontes no menu suspenso do atributo fontFamily.
2. Na caixa de diálogo Recursos, encontre uma fonte e selecione o botão de opção Criar fonte para download.
3. Verifique se o manifesto do Android inclui uma tag de metadados para fontes pré-carregadas.

Quando o app solicita uma fonte pela primeira vez, e ela ainda não está disponível, o provedor de fontes faz o download dela da Internet.

Documentação do desenvolvedor Android:

• Estilos e temas
• Fontes para download
• Fontes em XML
• Como entender os spans
• Atributos TextView
• Recurso de estilo
• Tema MaterialComponents

Outros recursos:

• Qual é a aparência do seu texto?
• Hexadecimal
• Desenvolver apps Android com Kotlin (curso da Udacity em inglês)
• Bootcamp de Kotlin para programadores (curso da Udacity)
• Codelabs do Bootcamp de Kotlin para programadores

Esta seção lista as possíveis atividades de dever de casa para os alunos que estão fazendo este codelab como parte de um curso ministrado por um professor. Cabe ao professor fazer o seguinte:

• Atribuir o dever de casa, se necessário.
• Informar aos alunos como enviar deveres de casa.
• Atribuir nota aos deveres de casa.

Os professores podem usar essas sugestões o quanto quiserem, podendo passar os exercícios que acharem mais apropriados como dever de casa.

Se você estiver seguindo este codelab por conta própria, sinta-se à vontade para usar esses deveres de casa para testar seu conhecimento.

Responda estas perguntas

Pergunta 1

Qual tag é usada para definir os temas?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Pergunta 2

Quais das opções abaixo NÃO é uma boa maneira de usar estilos?

▢ Especifique as restrições de uma visualização.

▢ Especifique a cor do plano de fundo dos títulos.

▢ Unificar o tamanho da fonte nas visualizações.

▢ Especifique a cor do texto para um grupo de visualizações.

Pergunta 3

Qual é a diferença entre temas e estilos?

▢ Os temas se aplicam a todo o app, mas você pode aplicar estilos a visualizações específicas.

▢ Os temas não podem herdar de outros temas, mas os estilos podem herdar de outros estilos.

▢ Os estilos não podem herdar de outros estilos, mas os temas podem herdar de outros temas.

▢ Os temas são fornecidos pelo sistema Android, enquanto os estilos são definidos pelo desenvolvedor.

Pergunta 4

Se um TextView no seu app tiver um Theme que define o tamanho da fonte como 12sp, um estilo definido que o define como 14sp e um atributo fontSize de 16sp, qual será o tamanho da fonte exibida na tela?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

Comece a próxima lição: 10.2: Material Design, dimensões e cores

Para acessar links de outros codelabs neste curso, consulte a página inicial dos codelabs de conceitos básicos do Kotlin para Android.