Mudar o tema do app

O Material Design é um sistema de design criado pelo Google para ajudar os desenvolvedores a criar experiências digitais de alta qualidade no Android e em outras plataformas. O sistema completo do Material Design inclui diretrizes de design visuais, de movimento e de interação para seu app. No entanto, o foco deste codelab será como mudar o tema de cores do seu app Android.

O codelab usa o modelo de app Empty Activity, mas você pode usar qualquer app Android em que esteja trabalhando. Se você estiver fazendo este codelab como parte do curso de Noções básicas do Android, poderá usar o app Tip Time.

Pré-requisitos

  • Saber criar um app Android usando um modelo no Android Studio.
  • Saber executar um app Android no emulador ou em um dispositivo no Android Studio.
  • Ter um dispositivo ou emulador Android com a API 28 (Android 9), a versão 29 (Android 10) ou mais recente.
  • Saber editar um arquivo XML.

O que você aprenderá

  • Como selecionar cores boas para seu app de acordo com os princípios do Material Design.
  • Como definir cores como parte do tema do app.
  • Os componentes RGB de uma cor.
  • Como aplicar um estilo a uma View.
  • Como mudar a aparência de um app usando um tema.
  • Entender a importância do contraste de cores.

O que é necessário

  • Um computador com a versão 4.1 ou mais recente do Android Studio instalada.
  • Conexão de Internet para acessar as ferramentas de cor do Material Design.

Material Design

O Material Design (link em inglês) é inspirado no mundo físico e nas texturas dele, incluindo a forma como os objetos refletem a luz e projetam sombras. Ele apresenta diretrizes sobre como criar a IU do app de uma forma legível, atraente e consistente. Com o Material Theming (link em inglês), você pode adaptar o Material Design ao app seguindo as orientações de personalização de cores, tipografia e formas. O Material Design vem com um tema de referência, que pode ser usado sem mudanças. Você pode personalizá-lo o quanto quiser para que o Material Design se adapte ao seu app.

Um pouco sobre cores

As cores estão por toda parte ao nosso redor, no mundo real e no mundo digital. A primeira coisa que você precisa saber é que nem todos os usuários veem as cores da mesma maneira. Então, é importante escolher cores para o app de modo que ele possa ser usado facilmente pelos usuários. Escolher cores com contraste suficiente é apenas uma etapa para criar apps mais acessíveis.

47b4f1f5984b079b.png

Uma Cor pode ser representada por três números hexadecimais, #00-#FF (0-255), representando os componentes vermelho, verde e azul (RGB) dessa cor. Quanto maior o número, maior a proporção da cor específica.

730ee7b8c4496433.png

Uma cor também pode ser definida incluindo um valor alfa #00-#FF, que representa a transparência (#00 = 0% = totalmente transparente, #FF = 100% = totalmente opaco). Quando incluído, o valor alfa é o primeiro de quatro números hexadecimais (ARGB). Se não houver um valor alfa, ele será considerado #FF = 100% opaco.

No entanto, não é necessário gerar os números hexadecimais manualmente. Há ferramentas disponíveis para ajudar você a escolher as cores que gerarão os números.

Alguns exemplos que você pode ter visto no arquivo colors.xml do seu app Android incluem 100% preto (R=#00, G=#00, B=#00) e 100% branco (R=#FF, G=#FF, B=#FF):

<color name="black">#FF000000</color>
<color name="white">#FFFFFFFF</color>

Um estilo pode especificar atributos para uma View, como cor e tamanho da fonte, cor do segundo plano e muito mais.

O tema é uma coleção de estilos aplicados a um app, atividade ou hierarquia de visualização inteiros, não apenas a uma View individual. Quando você aplica um tema a um app, atividade, visualização individual ou em grupo, o tema é aplicado a esse elemento e a todos os filhos deles. Os temas também podem aplicar estilos a elementos que não são de visualização, como a barra de status e o segundo plano da janela.

Criar um projeto Empty Activity

Se você estiver usando seu próprio app, pule esta seção. Se precisar de um app para usar como exemplo, siga estas etapas para criar um app Empty Activity.

  1. Abra o Android Studio.
  2. Crie um novo projeto Kotlin usando o modelo Empty Activity.
  3. Use o nome "TipTime". Como alternativa, você pode manter o nome padrão, "My Application", se não estiver participando de outros codelabs.
  4. Selecione uma API de nível 19 no mínimo (KitKat).
  5. Depois que o Android Studio concluir a criação do app, abra o arquivo activity_main.xml (app > res > layout > activity_main.xml).
  6. Se necessário, alterne para a visualização Code.
  7. Substitua todo o texto por este XML:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="16dp"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:gravity="center_vertical"
        android:text="@string/primary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="@string/button" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="8dp"
        android:gravity="center_vertical"
        android:text="@string/secondary_color"
        android:textAllCaps="true"
        android:textSize="12sp" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:contentDescription="@string/email_icon"
        app:srcCompat="@android:drawable/ic_dialog_email" />

</LinearLayout>
  1. Abra o arquivo strings.xml (app > res > values > strings.xml).
  2. Substitua todo o texto por este XML:
<resources>
    <string name="app_name">TipTime</string>
    <string name="primary_color">Primary color</string>
    <string name="button">Button</string>
    <string name="secondary_color">Secondary color</string>
    <string name="email_icon">email icon</string>
</resources>
  1. Execute o app. Ele ficará parecido com a captura de tela abaixo.

3abb2a30239d99fb.png

O app inclui uma TextView e um Button para permitir que você veja as opções de cor em um app Android real. A cor do botão mudará para a cor principal do tema nas próximas etapas.

Saiba mais sobre cores de tema

Cada parte da IU dos apps Android usa cores diferentes. Para ajudar você a usar as cores de forma significativa no app e aplicá-las consistentemente, o sistema de tema agrupa as cores em 12 atributos nomeados relacionados à cor que será usada pelo texto, pelos ícones e muito mais. Seu tema não precisa especificar todos eles. Você escolherá as cores primárias e secundárias, além das cores do texto e dos ícones desenhados com essas cores.

af6c8e0d93135130.png

As cores "ativadas" são usadas para textos e ícones desenhados nas diferentes superfícies.

Nome

Atributo do tema

1

Primary

colorPrimary

2

Primary Variant

colorPrimaryVariant

3

Secondary

colorSecondary

4

Secondary Variant

colorSecondaryVariant

5

Background

colorBackground

6

Surface

colorSurface

7

Error

colorError

8

On Primary

colorOnPrimary

9

On Secondary

colorOnSecondary

10

On Background

colorOnBackground

11

On Surface

colorOnSurface

12

On Error

colorOnError

Veja as cores definidas no tema padrão.

  1. No Android Studio, abra o arquivo themes.xml (app > res > values > themes.xml).
  2. O nome do tema, Theme.TipTime, é baseado no nome do app.
<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
  1. Observe que a linha do XML também especifica um tema pai, Theme.MaterialComponents.DayNight.DarkActionBar. DayNight é um tema predefinido na biblioteca de componentes do Material Design. DarkActionBar significa que a barra de ações usa uma cor escura. Assim como uma classe herda os atributos da classe mãe, um tema herda os atributos do tema pai.
  1. Analise os itens no arquivo e observe que os nomes são semelhantes aos do diagrama acima: colorPrimary, colorSecondary e assim por diante. themes.xml
<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/purple_500</item>
        <item name="colorPrimaryDark">@color/purple_700</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/teal_200</item>
        <item name="colorSecondaryVariant">@color/teal_700</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

Nem todos os atributos de tema de cor são definidos. As cores que não forem definidas herdarão a cor do tema pai.

  1. O Android Studio desenha uma cor pequena de exemplo na margem esquerda. d08a441d52bd14b6.png
  2. Por fim, as cores são especificadas como recursos de cor, por exemplo, @color/purple_500, em vez de usar um valor RGB diretamente.
  3. Abra o arquivo colors.xml (app > res > values > colors.xml). Você verá os valores hexadecimais de cada recurso de cor. Lembre-se de que o #FF à esquerda é o valor alfa, o que significa que a cor é 100% opaca. colors.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
</resources>

Agora que você já conhece um pouco sobre os atributos do tema, é hora de escolher algumas cores. A maneira mais fácil de fazer isso é com o Color Tool, um app baseado na Web fornecido pela equipe do Material Design. A ferramenta oferece uma paleta de cores predefinidas e permite ver facilmente como elas serão exibidas quando usadas em diferentes elementos da IU.

3dcd6c6c80b5f470.png

Escolher algumas cores

  1. Comece selecionando uma cor principal na seção Primary (colorPrimary), por exemplo, Green 900. A ferramenta de cor mostrará a aparência em um modelo do app, além de selecionar as variantes Light e Dark. 364754c4949ceb45.png
  2. Toque na seção Secondary e escolha uma cor secundária (colorSecondary) de sua preferência, por exemplo, Light Blue 700. A cor mostra o que será exibido no modelo do app e seleciona novamente as variantes Light e Dark.
  3. O modelo do app inclui seis simulações de "telas". Veja como suas opções de cor serão exibidas nas diferentes telas tocando nas setas acima do modelo. 1a7550af8e071730.png
  4. A ferramenta de cores também fornece a guia Accessibility para informar se as cores têm contraste suficiente para serem lidas quando usadas com texto preto ou branco. Para tornar seu app mais acessível, é preciso garantir que o contraste de cores seja alto o suficiente: 4,5:1 ou maior para textos pequenos e 3,0:1 ou maior para textos grandes. Saiba mais sobre contraste de cores. f22c8bc8e9cb9dc8.png
  5. Para primaryColorVariant e secondaryColorVariant, você pode escolher a variante clara ou escura sugerida.

Adicionar as cores ao app

A definição de recursos de cores facilita a reutilização consistente das mesmas cores em partes diferentes do app.

  1. No Android Studio, abra o arquivo colors.xml (app > res > values > colors.xml).
  2. Após as cores existentes, defina um recurso de cor chamado green usando o valor selecionado acima, #1B5E20.
<color name="green">#1B5E20</color>
  1. Continue definindo recursos para as outras cores. A maioria dos valores é gerada pela ferramenta de cores. Observe que os valores para green_light e blue_light são diferentes daqueles mostrados pela ferramenta. Você vai usá-los em uma etapa futura.

green

#1B5E20

green_dark

#003300

green_light

#A5D6A7

blue

#0288D1

blue_dark

#005B9F

blue_light

#81D4FA

Como já existem recursos de cor definidos para preto e branco, você não precisa defini-los.

O arquivo colors.xml do app agora terá esta aparência:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="purple_200">#FFBB86FC</color>
    <color name="purple_500">#FF6200EE</color>
    <color name="purple_700">#FF3700B3</color>
    <color name="teal_200">#FF03DAC5</color>
    <color name="teal_700">#FF018786</color>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>

    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

Usar as cores no tema

Agora que você definiu nomes para as cores selecionadas, é hora de usá-las no seu tema.

  1. Abra o arquivo themes.xml (app > res > values > themes > themes.xml).
  2. Mude a colorPrimary para a cor principal que você selecionou, @color/green.
  3. Mude colorPrimaryVariant para @color/green_dark.
  4. Mude colorSecondary para @color/blue.
  5. Mude colorSecondaryVariant para @color/blue_dark.
  6. Verifique se as opções Text on P e Text on S ainda estão definidas como branco (#FFFFFF) e preto (#000000). Se você estiver usando a ferramenta de cores por conta própria e selecionar outras cores, talvez seja necessário definir mais recursos de cor.

Quando terminar, o tema ficará assim:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. Execute seu app no emulador ou em um dispositivo e veja o visual do novo tema no app.

3dba45374c1594e5.png

O modelo de app incluiu um tema claro padrão e também uma variante de tema escuro. Um tema escuro usa cores mais escuras e discretas e:

  • Pode reduzir significativamente o consumo de energia (dependendo da tecnologia da tela do dispositivo).
  • Melhora a visibilidade para usuários com problemas de visão e que tenham sensibilidade ao brilho da luz.
  • Facilita o uso do dispositivo em um ambiente com pouca luz.

Como escolher cores para o tema escuro

As cores de um tema escuro precisam ser legíveis. Os temas escuros usam uma cor de superfície escura com tons de cores limitados. Para garantir a legibilidade, as cores primárias geralmente são versões menos saturadas das cores primárias do tema claro.

Para oferecer mais flexibilidade e usabilidade em um tema escuro, recomendamos usar tons mais claros (200 a 50) em um tema escuro, em vez do tema de cores padrão (tons de saturação de 900 a 500). Anteriormente, você escolheu verde 200 e azul claro 200 como as cores claras. Para o app, você usará as cores claras como as principais e as cores primárias como as variantes.

Atualizar a versão escura do tema

  1. Abra o arquivo themes.xml (night) (app > res > values > themes > themes.xml (night)).
  1. Mude a colorPrimary para a variante clara da cor primária que você selecionou, @color/green_light.
  2. Mude colorPrimaryVariant para @color/green.
  3. Mude colorSecondary para @color/blue_light.
  4. Mude colorSecondaryVariant para @color/blue_light.

Quando você terminar, seu arquivo themes.xml (night) terá esta aparência:

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  1. Agora, as cores originais definidas no arquivo colors.xml, por exemplo, purple_200, não são mais usadas; então você pode excluí-las.

Testar o tema escuro

Você pode ver como seu tema será exibido no modo escuro ativando-o no dispositivo.

Para a API 28 (Android 9)

  1. Execute o app novamente.
  2. Acesse o app Config..
  3. Na seção Bateria, localize Economia de bateria.

45ed6627a15388b6.png

  1. Pressione Ativar agora.

Conclua as etapas abaixo.

Para a API 29 (Android 10) ou mais recente

  1. Execute o app novamente.
  2. Acesse o app Config..
  3. Na seção Tela, localize a chave Tema escuro.

365097b6ec9d3bbb.png

  1. Mude a posição da chave Tema escuro para "Ativado". O dispositivo passará a usar o modo noturno.

c2196550e89d0c5b.png

Para qualquer API

  1. Volte para seu app e veja as diferenças.

6cc918d7c3613539.png

A mudança mais óbvia é que o segundo plano está mais escuro e com texto claro, em vez de um segundo plano claro com texto escuro. Além disso, as cores usadas para os botões são menos vibrantes no tema escuro do que no tema claro.

Parabéns! Você criou um novo tema para o app com um tema claro e um escuro.

Este codelab se concentrou na personalização das cores do tema, mas há muitos atributos que podem ser personalizados, incluindo texto, forma, estilo de botões e muito mais. Confira este artigo para ver outras formas de personalizar um tema de app. Estilo do Android: atributos de tema comuns (em inglês).

Veja abaixo o código da solução para este codelab.

colors.xml (app > res > values > colors.xml)

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="green">#1B5E20</color>
    <color name="green_dark">#003300</color>
    <color name="green_light">#A5D6A7</color>
    <color name="blue">#0288D1</color>
    <color name="blue_dark">#005B9F</color>
    <color name="blue_light">#81D4FA</color>
</resources>

values/themes.xml (app > res > values > themes > themes.xml)

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green</item>
        <item name="colorPrimaryVariant">@color/green_dark</item>
        <item name="colorOnPrimary">@color/white</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue</item>
        <item name="colorSecondaryVariant">@color/blue_dark</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>

values-night/themes.xml (app > res > values > themes > themes.xml (night))

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Application theme for dark theme. -->
    <style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">
        <!-- Primary brand color. -->
        <item name="colorPrimary">@color/green_light</item>
        <item name="colorPrimaryVariant">@color/green</item>
        <item name="colorOnPrimary">@color/black</item>
        <!-- Secondary brand color. -->
        <item name="colorSecondary">@color/blue_light</item>
        <item name="colorSecondaryVariant">@color/blue_light</item>
        <item name="colorOnSecondary">@color/black</item>
        <!-- Status bar color. -->
        <item name="android:statusBarColor" tools:targetApi="l">?attr/colorPrimaryVariant</item>
        <!-- Customize your theme here. -->
    </style>
</resources>
  • Use a Color Tool do Material Design para selecionar cores para o tema do app.
  • Você também pode usar o gerador de paletas do Material Design para selecionar uma paleta de cores.
  • Declare os recursos de cor no arquivo colors.xml para facilitar a reutilização.
  • O tema escuro pode reduzir o consumo da bateria e facilitar a leitura do app em ambientes com pouca luz.

Como um desafio, personalize mais atributos de um tema. A equipe do Material Design criou um app de exemplo chamado "Build a Material Theme", que mostra como personalizar vários atributos de um tema. Use o repositório do GitHub Exemplos de componentes do Material Design para o Android (em inglês) para ver o URL do código da solução nas etapas a seguir. O projeto desejado está um nível abaixo no repositório do GitHub, em MaterialThemeBuilder.

Para encontrar o código deste codelab e abri-lo no Android Studio, faça o seguinte.

Buscar o código

  1. Clique no URL fornecido. Isso abrirá a página do GitHub referente ao projeto em um navegador.
  2. Na página do GitHub do projeto, clique no botão Code, que exibirá uma caixa de diálogo.

Eme2bJP46u-pMpnXVfm-bS2N2dlyq6c0jn1DtQYqBaml7TUhzXDWpYoDI0lGKi4xndE_uJw8sKfwfOZ1fC503xCVZrbh10JKJ4iEHdLDwFfdvnOheNxkokITW1LW6UZTncVJJUZ5Fw

  1. Na caixa de diálogo, clique no botão Download ZIP para salvar o projeto no seu computador. Aguarde a conclusão do download.
  2. Localize o arquivo no computador, que provavelmente está na pasta Downloads.
  3. Clique duas vezes no arquivo ZIP para descompactá-lo. Isso criará uma nova pasta com os arquivos do projeto.

Abrir o projeto no Android Studio

  1. Inicie o Android Studio.
  2. Na janela Welcome to Android Studio, clique em Open an existing Android Studio project.

Tdjf5eS2nCikM9KdHgFaZNSbIUCzKXP6WfEaKVE2Oz1XIGZhgTJYlaNtXTHPFU1xC9pPiaD-XOPdIxVxwZAK8onA7eJyCXz2Km24B_8rpEVI_Po5qlcMNN8s4Tkt6kHEXdLQTDW7mg

Observação: caso o Android Studio já esteja aberto, selecione a opção File > New > Import Project.

PaMkVnfCxQqSNB1LxPpC6C6cuVCAc8jWNZCqy5tDVA6IO3NE2fqrfJ6p6ggGpk7jd27ybXaWU7rGNOFi6CvtMyHtWdhNzdAHmndzvEdwshF_SG24Le01z7925JsFa47qa-Q19t3RxQ

  1. Na caixa de diálogo Import Project, vá até a pasta do projeto descompactada, que provavelmente está na pasta Downloads.
  2. Clique duas vezes nessa pasta do projeto.
  3. Aguarde o Android Studio abrir o projeto.
  4. Clique no botão Run j7ptomO2PEQNe8jFt4nKCOw_Oc_Aucgf4l_La8fGLCMLy0t9RN9SkmBFGOFjkEzlX4ce2w2NWq4J30sDaxEe4MaSNuJPpMgHxnsRYoBtIV3-GUpYYcIvRJ2HrqR27XGuTS4F7lKCzg para criar e executar o app. Confira se ele funciona da forma esperada.
  5. Procure os arquivos do projeto na janela de ferramentas Project para ver como o app foi implementado.

Personalizar o tema

Siga as instruções em MaterialThemeBuilder/README.md. Com elas, você poderá personalizar atributos como tipo, forma e cores.