Time to sync up! Tune in for Google I/O on May 14, 2024. Register now.

Esta página foi traduzida pela API Cloud Translation.

Kotlin Android Fundamentals 10.1: estilos e temas

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

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 do app são visualizações, texto e botões, além da cor e das fontes que eles usam e onde eles estão na tela. Dicas para o usuário sobre o que fazer a seguir também são um aspecto essencial do design. Os usuários precisam saber rapidamente o que estão procurando, o que é importante e o que podem fazer.

Compare as duas telas abaixo. Ao mover elementos e destacar o 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 faz com que seja mais fácil entender informações densas. Ao trabalhar com apps Android, é possível ouvir esse conceito chamado arquitetura de informação (IA).

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

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

Definir casos de uso. Escreva o que os usuários precisam fazer com o app e como.
Implemente um design. Não se prenda ao seu primeiro rascunho e só torne-o "bom o suficiente", porque você o mudará depois de ver como os usuários reais interagem com ele.
Receber feedback. Encontre pessoas com quem você pode conversar para testar seu app: família, amigos ou até pessoas que acabou de conhecer em um Grupo de desenvolvedores do Google. Peça para eles usarem seu app para fazer um caso de uso enquanto você assiste e faça anotações detalhadas.
Refinar! Com todas essas informações, melhor o app e depois teste-o novamente.

Veja algumas outras perguntas que você deve se fazer ao criar uma ótima experiência no app. Você aprendeu técnicas para lidar com 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 é codificado de maneira eficiente e garante que ele seja sempre responsivo ao toque do usuário?
O app interage com os sistemas de back-end de modo a não apresentar dados estranhos, incorretos ou desatualizados para o usuário?

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

Muitos usuários interagem com os sistemas de computador de maneiras diferentes. Muitos usuários não usam cores, e as cores contrastantes para um usuário podem não funcionar para outro. Muitos usuários têm deficiência visual, desde a leitura de óculos até a cegueira.
Alguns usuários não podem usar touchscreens e interagem usando outros dispositivos de entrada, como botões.

Um bom design é a maneira mais importante de atrair usuários para seu app.

Esses codelabs são muito curtos para ensinar tudo sobre design para Android, mas ajudarão você a começar bem. Você pode aprender e desenvolver por conta própria.

O que você já precisa saber

Você precisa:

Como criar apps com atividades e fragmentos e navegar entre fragmentos que transmitem dados.
Usar visualizações e grupos de visualizações para definir a interface do usuário (IU), incluindo RecyclerView.
Como usar os Componentes de arquitetura, incluindo o ViewModel, com a arquitetura recomendada para criar um app 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 as propriedades da vista
Como extrair e usar recursos de arquivos de recurso XML

O que você vai aprender

Noções básicas do sistema de estilo do Android
Como usar atributos, estilos e temas para personalizar o app.

Atividades do laboratório

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

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

O app usa ConstraintLayout para dispor três telas. Duas das telas são apenas arquivos de layout que serão usados para explorar cores e textos no Android.

A terceira tela é um localizador de GDGs. Os GDGs (Grupos de desenvolvedores do Google) são comunidades de desenvolvedores focadas em tecnologias do Google, incluindo o Android. Os GDGs no mundo todo realizam encontros, conferências, grupos de estudo e outros eventos.

Ao desenvolver este 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ê estiver com sorte e houver um GDG na sua região, consulte o site e inscreva-se nos eventos deles. Os eventos GDG são uma ótima forma de conhecer outros desenvolvedores Android e conhecer as práticas recomendadas do setor que não se encaixaram neste curso.

As capturas de tela abaixo mostram as mudanças do app desde o início até o fim deste codelab.

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

Atributos de visualização

Use os atributos de visualização para definir atributos explicitamente para cada visualização. Os atributos de visualização não são reutilizáveis, assim como os estilos.
Você pode usar todas as propriedades que podem ser definidas por meio de estilos ou temas.

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

Estilos

Use um estilo para criar uma coleção de informações de estilo reutilizáveis, como tamanho ou cores de fonte.
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 estilizados ou um conjunto de botões.

Estilo padrão

Este é o estilo padrão fornecido pelo sistema Android.

Temas

Use um tema para definir cores para todo o app.
Use um tema para definir a fonte padrão para 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 possam ser aplicadas de maneira consistente para todo o app.

TextAppearance

Para estilo somente com atributos de texto, como fontFamily.

Quando o Android define o estilo de uma visualização, ele aplica uma combinação de temas, estilos e atributos que você pode personalizar. Os atributos sempre substituem tudo o que foi especificado 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 o tema claro (à esquerda) e um tema escuro (à direita), além de uma fonte personalizada e tamanhos de cabeçalho. Isso pode ser implementado de várias maneiras, e você aprenderá algumas delas neste codelab.

Nesta tarefa, você usará atributos para definir o estilo de cabeçalhos para o texto no layout do app.

Faça o download e execute o app inicial do GDG-finder.
A tela inicial tem muito texto formatado de maneira uniforme, o que dificulta a identificação da página e o que é importante.
Abra o arquivo de layout home_fragment.xml.
O layout usa ConstraintLayout para posicionar elementos dentro de uma ScrollView.
Observe que, para cada visualização, os atributos de restrição e layout de margem são definidos na visualização, porque esses atributos tendem a ser personalizados para cada visualização e tela.
Na visualização de texto do title, adicione um atributo textSize para mudar o tamanho do texto para 24sp.

Lembre-se de que sp significa pixels de escala independentes, que são dimensionados de acordo com a densidade de pixels e a preferência de tamanho de fonte definida pelo usuário nas configurações do dispositivo. O Android descobre quando o texto será exibido na tela quando for desenhado. Sempre use sp para tamanhos de texto.

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

android:textSize="24sp"

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

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

android:textColor="#FF555555"

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

Defina o estilo da legenda para ter a mesma cor do cabeçalho, com uma fonte menor, 18sp. O alfa padrão é FF, opaco. É possível omitir o valor Alfa se ele não estiver sendo alterado.

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

Neste codelab, o objetivo é estilizar o app para ser um pouco divertido enquanto parece profissional, mas você pode estilizá-lo da maneira que quiser. Teste os seguintes atributos para a visualização de texto subtitle. Use a guia Visualização para ver como a aparência do seu app muda. Em seguida, remova esses atributos.

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

Lembre-se de desfazer os atributos textAllCaps, textStyle e background da visualização subtitle antes de continuar.
Execute o app, e ele já terá uma aparência melhor.

Ao usar fontes com seu app, você pode enviar os arquivos de fontes necessários como parte do APK. Embora simples, essa solução 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 Downloadable Fonts. Se o app usa a mesma fonte que outro app no dispositivo, o Android só faz o download da fonte uma vez, economizando espaço de armazenamento.

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

Etapa 1: aplicar uma fonte disponível para download

Abra o home_fragment.xml na guia Design.
No painel Component Tree, selecione a visualização de texto title.
No painel Attributes, localize o atributo fontFamily. É possível encontrá-lo na seção Todos os atributos ou pesquisar por ele.
Clique na seta suspensa.
Role até Mais fontes e selecione-a. A janela Resources será aberta.

Na janela Resources, pesquise lobster ou apenas lo.
Nos resultados, selecione Lagosta dois.
À direita, abaixo do nome da fonte, selecione o botão de opção Criar fonte para download. Clique em OK.
Abra o arquivo de manifesto do Android.
Perto da parte inferior 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 transferidas por download. Quando o app é executado e solicita a fonte Lobster Two, o provedor faz o download dela pela Internet, se ela ainda não estiver disponível no dispositivo.

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

Na pasta res/values, localize o arquivo preloaded_fonts.xml, que define a matriz que lista todas as fontes disponíveis para download para o app.
Da mesma forma, o arquivo res/fonts/lobster_two.xml tem informações sobre a fonte.
Abra home_fragment.xml e observe no código e na visualização que a fonte "Lagoster Two" foi aplicada ao title TextView e, portanto, aplicada ao título.

Abra res/values/styles.xml e examine o tema AppTheme padrão que foi criado para o projeto. Ela tem a aparência mostrada abaixo. Para aplicar a nova fonte Lobster Two a todo o texto, você precisará atualizar este tema.
Na tag <style>, observe o atributo parent. Cada tag de estilo pode especificar um 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, para que você possa personalizar somente as partes que quiser. O app usa a versão Light do tema sem a barra de ação (NoActionBar), como mostra a 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>

No estilo AppTheme, defina a família de fontes como lobster_two. É necessário definir android:fontFamily e fontFamily, porque o tema pai usa ambos. Confira home_fragment.xml na guia Design para visualizar suas mudanças.

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

Execute o app novamente. A nova fonte é aplicada a todo o texto. Abra a gaveta de navegação e passe para as outras telas. Você verá que a fonte também é aplicada nela.

Etapa 2: aplicar o tema ao título

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

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

Execute o app e você verá que o atributo local da visualização substitui o tema.

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

Os temas são ótimos para aplicar temas gerais ao 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 para cada tela.

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

Etapa 1: criar um estilo

Abra o res/values/styles.xml
Na tag <resources>, defina um novo estilo usando a tag <style>, conforme mostrado abaixo.

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

É importante considerar os nomes dos estilos como semânticos ao nomeá-los. Selecione um nome de estilo com base no uso do estilo, não com base nas propriedades afetadas por ele. Por exemplo, chame o estilo Title em vez de LargeFontInGrey. Esse estilo será usado por qualquer título em qualquer parte do app. Por 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. No entanto, desta vez, em vez de estender um tema, ele será estendido como TextAppearance.MaterialComponents.Headline6. Esse é um estilo de texto padrão para o tema MaterialComponents. Portanto, ao modificá-lo, você modificará o estilo padrão em vez de começar do zero.

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

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

Defina outro estilo para as legendas. Nomeie o arquivo como TextAppearance.Subtitle.
Como a única diferença com a TextAppearance.Title será o tamanho do texto, torne esse estilo um filho da TextAppearance.Title.
No estilo Subtitle, defina o tamanho do texto como 18sp. Este é o estilo concluído:

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

Etapa 2: aplicar o estilo que você criou

Em home_fragment.xml, adicione o TextAppearance.Estilo Title para a visualização de texto title. Exclua os atributos textSize e textColor.

Os temas modificam qualquer estilo TextAppearance que você definir. O diagrama da 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. Assim, a fonte definida no Theme modificará o que você definir aqui.

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

Adicione também o estilo TextAppearance.Subtitle à visualização de texto subtitle e exclua os atributos textSize e textColor. Também é necessário aplicar esse estilo como um textAppearance, para que a fonte definida no tema substitua o que você definiu aqui.

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

Execute o app, e o texto do seu texto estará estilizado de forma consistente.

Projeto do Android Studio: GDGFinderStyles.

Use temas, estilos e atributos nas visualizações para alterar a aparência delas.
Os temas afetam o estilo do app inteiro e vêm com muitos valores predefinidos para cores, fontes e tamanhos de fonte.
Um atributo se aplica à visualização em que o atributo é definido. Use os atributos se você tiver estilos aplicáveis a apenas uma visualização, como padding, margens e restrições.
Os 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. Você pode criar uma hierarquia de estilos.
Os valores de atributo (que são definidos nas visualizações) substituem os estilos. Os estilos substituem o estilo padrão. Os estilos modificam os temas. Os temas modificam qualquer estilo definido pela propriedade textAppearance.

Defina os 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>

O uso de fontes para download disponibiliza as fontes para os usuários sem aumentar o tamanho do APK. Para adicionar uma fonte para download a uma visualização:

Selecione a visualização na guia Design e depois Mais fontes no menu suspenso do atributo fontFamily.
Na caixa de diálogo Resources, encontre uma fonte e selecione o botão de opção Createdownload font.
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 faz o download dela pela Internet.

Documentação do desenvolvedor Android:

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 em inglês)
Codelabs do Kotlin para programadores

Esta seção lista as possíveis atividades para os alunos que estão trabalhando neste codelab como parte de um curso ministrado por um instrutor. Cabe ao instrutor fazer o seguinte:

Se necessário, atribua o dever de casa.
Informe aos alunos como enviar o dever de casa.
Atribua nota aos trabalhos de casa.

Os professores podem usar essas sugestões o quanto quiserem, e eles devem se sentir à vontade para passar o dever de casa como achar adequado.

Se você estiver fazendo este codelab por conta própria, use essas atividades para testar seu conhecimento.

Responda a estas perguntas

Pergunta 1

Qual tag é usada para definir os temas?

▢ <style>

▢ <theme>

▢ <meta-tag>

▢ <styling>

Pergunta 2

Qual opção NÃO é um bom uso dos 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 uma TextView no app tiver uma Theme que define o tamanho da fonte como 12sp, um estilo definido para 14sp e um atributo fontSize do 16sp, qual é o tamanho da fonte exibida na tela?

▢ 12sp

▢ 14sp

▢ 16sp

▢ 18sp

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

Para ver links de outros codelabs neste curso, consulte a página de destino dos codelabs do curso Conceitos básicos do Kotlin para Android.