1. Antes de começar
Neste codelab, você vai atualizar o app inicial, uma calculadora de gorjetas, para usar os novos recursos do Material Design 3, permitindo que a interface do usuário de um aplicativo receba temas dinâmicos com base no plano de fundo do usuário. Confira abaixo algumas capturas de tela do aplicativo com cores dinâmicas aplicadas. Você também vai examinar alguns outros cenários que permitem controlar como as cores são aplicadas.
Pré-requisitos
Os desenvolvedores precisam ser
- Conhecimento dos conceitos básicos de temas no Android
- Ter familiaridade com a modificação do tema de um app
O que você vai aprender
- Como diferenciar entre componentes do Material e temas do Material 3
- Como atualizar um tema para o Material 3
- Como criar e aplicar temas usando nossas ferramentas
- Como os atributos de tema se relacionam
O que é necessário
- Um computador com o Android Studio instalado.
- Código do aplicativo Tip Time. https://github.com/google-developer-training/android-basics-kotlin-tip-calculator-app-solution
2. Visão geral do app inicial
O app Tip Time é uma calculadora de gorjetas com opções para personalizar o valor dela. É um dos apps de exemplo do nosso curso de treinamento Noções básicas do Android em Kotlin.
3. Atualizar dependências do Gradle
Antes de atualizar o tema real e aplicar a cor dinâmica, é necessário fazer algumas mudanças no arquivo build.gradle do aplicativo.
Na seção de dependências, confira se a biblioteca de materiais é 1.5.0-alpha04 ou mais recente:
dependencies {
// ...
implementation 'com.google.android.material:material:<version>'
}
Na seção "android", mude compileSdkVersion e targetSdkVersion.
para 31 ou mais recente:
android {
compileSdkVersion 31
// ...
defaultConfig {
// ...
targetSdkVersion 31
}
}
Estas instruções pressupõem um app com dependências relativamente recentes. Para um app que ainda não usa o Material ou uma versão menos recente, confira as instruções na documentação de primeiros passos dos Componentes do Material Design para Android.
Mude as referências de Theme.MaterialComponents.* para Theme.Material3.* em todos os lugares em que você criou seus temas. Alguns estilos ainda não têm um novo estilo no namespace Material3, mas a maioria dos componentes ainda vai herdar o novo estilo quando o tema principal for atualizado para Theme.Material3.*. Veja abaixo que os botões agora adotam o novo tema arredondado.
No arquivo de temas abaixo, a única coisa que mudou é o tema principal. Vamos substituir completamente esse tema em breve. Alguns atributos de cor foram descontinuados, e alguns dos estilos personalizados que criamos agora são padrão no Material3. No entanto, queríamos que você tivesse
themes.xml
<style name="Theme.TipTime" parent="Theme.Material3.Light">
<!-- 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>
<!-- For text input fields -->
<item name="textInputStyle">@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox</item>
<!-- For radio buttons -->
<item name="radioButtonStyle">@style/Widget.TipTime.CompoundButton.RadioButton</item>
<!-- For switches -->
<item name="switchStyle">@style/Widget.TipTime.CompoundButton.Switch</item>
</style>
4. Noções básicas sobre temas e funções de cores
O sistema de cores do Material 3 usa uma abordagem organizada para aplicar cores à sua interface. Vários atributos de Theme.AppCompat ainda estão em uso. No entanto, mais atributos foram adicionados no Theme.MaterialComponents.* e ainda mais no Theme.Material3.*. Por isso, é importante examinar todas as telas do app para garantir que nenhuma propriedade não implementada esteja vazando do tema base.
Como entender as funções das cores
Há mais de 20 atributos relacionados à cor em um tema do Material 3. Isso pode parecer complicado no início, mas há algumas cores principais que se combinam com as mesmas 4 a 5 funções de cores para criar cores derivadas.
Esses grupos são:
- Primária: a cor principal do seu app
- Secundária: a cor secundária do seu app
- Terciária, uma terceira cor complementar às cores primária e secundária
- Erro, usado para texto e caixas de diálogo de erro.
- Contexto
- Surface, SurfaceVariant, Surface Inverse
As funções são as seguintes para primária, secundária, terciária e erro:
<base color> | A cor base |
on<base color> | a cor dos ícones e do texto que aparecem na cor de base |
Contêiner <base color> | derivada da base, cor, usada para botões, caixas de diálogo etc. |
em<base color>Container | a cor dos ícones e do texto no contêiner |
Por exemplo, um botão de ação flutuante com estilo padrão no Material Design 3 usa Primary como cor de base. Assim, ele usa primaryContainer para a cor de fundo do botão e onPrimaryContainer para o conteúdo.
Ao personalizar um tema manualmente, verifique se o atributo on<base color> de cada cor base alterada ainda está legível.
A prática recomendada é ajustar todas as funções em um grupo de cores ao mesmo tempo para garantir que não haja artefatos da base até o app.
As cores de segundo plano e de base da superfície geralmente têm duas funções: a cor de base em si e on<base color> para ícones ou texto que aparecem sobre ela.
5. Como criar um tema do Material 3 com o Material Theme Builder
O Criador de Temas do Material Design facilita a criação de um esquema de cores personalizado, o uso da exportação de código integrada para migrar para o sistema de cores M3 e o aproveitamento da cor dinâmica. Saiba mais material.io/material-theme-builder
O tema do app Tip Time contém vários estilos para componentes, mas a maioria deles é padrão nos temas do Material 3. As duas únicas cores principais com que precisamos nos preocupar são primária e secundária.
Elas correspondem a uma cor primária verde (#1B5E20) e uma cor secundária azul (#0288D1).
Você pode inserir essas cores no Material Theme Builder e exportar um tema completo (supondo um link para uma visão geral completa em outro lugar).
As cores inseridas podem mudar de tom para se adequar ao algoritmo de geração de cores e garantir cores complementares e legíveis.
Abaixo está um subconjunto dos valores gerados quando você insere cores personalizadas.
6. Como trabalhar com arquivos de exportação do Material Theme Builder
O arquivo de exportação contém valores e diretórios values-night/ com o próprio arquivo themes.xml, correspondente aos temas claro e escuro. Todas as cores são definidas em values/colors.xml.
Os arquivos podem ser copiados no estado em que se encontram, mas você terá que mudar o nome do tema no AndroidManifest.xml ou nos arquivos de tema para que correspondam. O nome padrão das ferramentas é AppTheme.
Reinicie o app. Ele vai parecer quase exatamente igual. Uma mudança notável é o Switch e os RadioButtons, cujos estados selecionados agora são temáticos com tons da cor primária em vez de cores secundárias. Em aplicativos maiores, talvez seja necessário revisar alguns designs.
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.example.tiptime">
<application ...>
<activity android:name=".MainActivity"
android:exported="true">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
7. Como adicionar cores dinâmicas
Com um tema adequado do Material 3 em uso, podemos tornar a interface dinâmica com algumas pequenas adições.
A API Dynamic Colors permite aplicar cores dinâmicas a todas as atividades.
em um app, atividades individuais ou em visualizações ou fragmentos individuais. Para
neste app, vamos aplicar a cor dinâmica globalmente.
Criar um arquivo de classe Application
class TipTimeApplication: Application() {
override fun onCreate() {
// Apply dynamic color
DynamicColors.applyToActivitiesIfAvailable(this)
}
}
Precisamos referenciar esse arquivo recém-criado no manifesto do Android:
AndroidManifest.xml
< application android name=".TipTimeApplication
<!--- Other existing attributes –>
</application >
Em sistemas Android 12 ou mais recentes, o papel de parede do usuário para o esquema padrão é analisado para gerar várias paletas tonais. Os valores dessas paletas são usados para criar um ThemeOverlay.
A classe DynamicColors registra um ActivityLifecycleCallbacks que intercepta ActivityPreCreated para aplicar a sobreposição de tema dinâmico criada pelo sistema ou uma que você forneceu.
8. Aplicar uma sobreposição de tema personalizada
Nossas ferramentas podem exportar sobreposições de temas, mas você também pode criá-las manualmente se estiver substituindo um pequeno número de atributos.
Uma sobreposição de tema deve ser usada em conjunto com outro tema e fornece apenas os valores que serão alterados sobre o tema base.
Vamos supor que, por algum motivo, talvez branding, precisamos que os tons de cor primária sejam tons de vermelho. Podemos fazer isso com os seguintes arquivos e atributos.
colors.xml
<resources>
<color name="overlay_light_primary">#9C4146</color>
<color name="overlay_light_onPrimary">#FFFFFF</color>
<color name= "overlay_light_primaryContainer">#FFDADB</color>
<color name="overlay_light_onPrimaryContainer">#400008</color>
</resources >
themes_overlays.xml
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.Light">
<item name="colorPrimary">@color/overlay_light_primary</item>
<item name="colorOnPrimary">@color/overlay_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/overlay_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/overlay_light_onPrimaryContainer<item>
</style>
Para o código acima, o Android 12 vai aplicar um tema claro dinâmico e sobrepor suas mudanças. Como alternativa, use qualquer ThemeOverlay válido como um elemento pai, incluindo um dos seguintes:
ThemeOverlay.Material3.Light
ThemeOverlay.Material3.Dark
ThemeOverlay.Material3.DayNight ThemeOverlay.Material3.DynamicColors.Dark
ThemeOverlay.Material3.DynamicColors.DayNight
Para usar essa sobreposição de tema em vez do padrão do Material, mude a chamada para DynamicColors.applyToActivitiesIfAvailable para:
DynamicColors.applyToActivitiesIfAvailable(this, R.style.AppTheme_Overlay)
9. Como adicionar cores dinâmicas a atributos personalizados
Até agora, substituímos propriedades que já existem em um tema do Material 3. Temos outro caso possível em cores dinâmicas em que podemos ter um ou mais atributos personalizados que precisam ser alocados.
Quando um app ativa a cor dinâmica, ele tem acesso a cinco paletas de tons: três de destaque e duas neutras com as seguintes funções aproximadas:
system_accent1 | Tons de cores primárias |
system_accent2 | Tons de cores secundárias |
system_accent3 | Tons de cores terciárias |
system_neutral1 | Planos de fundo e superfícies neutras |
system_neutral2 | Superfícies e contornos neutros |
Cada paleta tem um número de etapas tonais que variam do branco
para preto: 0, 10, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 1000.
Ao projetar uma interface do usuário para cores dinâmicas, pense menos na cor específica e mais na relação do tom e da luminância desse componente com outros no sistema de design.
Digamos que você queira que os ícones sejam temáticos usando a paleta de cores secundária e adicione um atributo para colorir os ícones com a seguinte entrada em attrs.xml.
attrs.xml
<resources>
<attr name="iconColor" format="color" />
</resources>
A sobreposição de tema pode ser parecida com esta:
<style name="AppTheme.Overlay" parent="ThemeOverlay.Material3.DynamicColors.DayNight">
<item name="iconColor">@android:color/system_accent2_600</item>
</style>
Quando você reinstalar o app e mudar o plano de fundo, ele vai usar essa paleta secundária.
Essas paletas são específicas do Android 12 (API 31). Portanto, você precisará colocar os arquivos relevantes em pastas com o sufixo -v31, a menos que o SDK mínimo do app esteja definido como 31 ou mais recente.
10. Resumo
Neste codelab, você aprendeu a:
- Adicione dependências para fazer upgrade do tema para o Material 3.
- Entenda os novos grupos e funções de cores.
- Entenda como migrar de um tema estático para a cor dinâmica.
- Entenda como usar sobreposições de tema e cores dinâmicas para atributos de tema personalizados.