Mudar o tema do app

1. Antes de começar

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 estável mais recente do Android Studio.
Um navegador da Web e uma conexão de Internet para acessar as ferramentas de cor do Material Design.

2. Design e cor

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. Por isso, é importante escolher cores de modo que seu app possa ser usado facilmente pelos usuários. Definir um contraste suficiente é apenas uma etapa para criar apps mais acessíveis.

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.

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>

3. Temas

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.

Abra o Android Studio.
Crie um novo projeto Kotlin usando o modelo Empty Activity.
Use o nome "TipTime". Como alternativa, você pode manter o nome padrão, "My Application", se não estiver participando de outros codelabs.
Selecione uma API de nível 19 no mínimo (KitKat).
Depois que o Android Studio concluir a criação do app, abra o arquivo activity_main.xml (app > res > layout > activity_main.xml).
Se necessário, alterne para a visualização Code.
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>

Abra o arquivo strings.xml (app > res > values > strings.xml).
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>

Execute o app. Ele ficará parecido com a captura de tela abaixo.

O app inclui uma TextView e um Button para permitir que você confira 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.

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

Nº	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`

Confira as cores definidas no tema padrão.

No Android Studio, abra themes.xml (app > res > values > topics > topics.xml).
O nome do tema, Theme.TipTime, é baseado no nome do app.

<style name="Theme.TipTime" parent="Theme.MaterialComponents.DayNight.DarkActionBar">

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.

Analise os itens no arquivo e observe que os nomes são parecidos com os 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="colorPrimaryVariant">@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 cores são definidos. As cores que não forem definidas herdarão a cor do tema pai.

O Android Studio mostra uma cor pequena de exemplo na margem esquerda.
Por fim, as cores são especificadas como recursos de cor, por exemplo, @color/purple_500, em vez de usar um valor RGB diretamente.
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>

4. Escolher cores para o tema do app

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 conferir facilmente como elas serão mostradas quando usadas em diferentes elementos da interface.

Escolher algumas cores

Comece selecionando uma cor principal na seção Primary (colorPrimary), como Green 900. A ferramenta de cor mostrará a aparência em um modelo do app, além de selecionar as variantes Light e Dark.
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á mostrado no modelo do app e seleciona novamente as variantes Light e Dark.
O modelo do app inclui seis simulações de "telas". Confira como suas opções de cor serão mostradas nas diferentes telas tocando nas setas acima do modelo.
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.
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.

No Android Studio, abra colors.xml (app > res > values > colors.xml).
Após as cores existentes, defina um recurso de cor chamado green usando o valor selecionado acima, #1B5E20.

<color name="green">#1B5E20</color>

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.

Abra themes.xml (app > res > values > themes > themes.xml).
Mude a colorPrimary para a cor principal que você selecionou, @color/green.
Mude colorPrimaryVariant para @color/green_dark.
Mude colorSecondary para @color/blue.
Mude colorSecondaryVariant para @color/blue_dark.
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>

Execute seu app no emulador ou em um dispositivo e veja o visual do novo tema no app.

5. Tema escuro

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

Abra themes.xml (night). No painel Project, selecione Android e acesse app > res > values > topics > topics.xml (night).

Mude a colorPrimary para a variante clara da cor primária que você selecionou, @color/green_light.
Mude colorPrimaryVariant para @color/green.
Mude colorSecondary para @color/blue_light.
Mude colorSecondaryVariant para @color/blue_light. Observe que colorSecondaryVariant pode ter a mesma cor que colorSecondary.

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>

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)

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

Pressione Ativar agora.

Conclua as etapas abaixo.

Para a API 29 (Android 10) ou mais recente

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

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

Para qualquer API

Volte para seu app e veja as diferenças.

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.

6. Código da solução

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>

7. Resumo

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.

8. Saiba mais

O sistema de cores (em inglês)
Tema escuro (em inglês)
Estilo do Android: diferenças entre temas e estilos (em inglês)
Estilo do Android: atributos de tema comuns (em inglês)
Como configurar um tema para usar os componentes do Material Design para Android (em inglês)
Dica sobre o tema escuro
Verificador de contraste WebAIM
Temas de componentes do Material Design (em inglês, consulte a etapa 4)
Material Theming com MDC
Tema escuro com MDC
Estilo do Android: atributos de tema comuns (em inglês)