Projetar temas de apps com o Theme Editor

O Android Studio inclui um assistente visual, denominado Theme Editor, que ajuda a:

  • criar e modificar temas para um app;
  • ajustar temas para diferentes classificadores de recursos;
  • visualizar o efeito das mudanças de cor em elementos comuns de IU.

Esta página apresenta as tarefas básicas que podem ser realizadas com o Theme Editor e explica como fazer isso.

Conceitos básicos do Theme Editor

Esta seção descreve como acessar o Theme Editor e como é o layout.

Acessar o Theme Editor

Há duas formas de abrir o Theme Editor:

  • Em um arquivo XML de estilos aberto, como styles.xml, clique em Open editor ao lado do canto superior direito da janela do arquivo.
  • No menu Tools, escolha Theme Editor.

Navegar pelo Theme Editor

A tela principal do Theme Editor é dividida em duas seções. O lado esquerdo do editor mostra qual é a aparência de elementos de IU específicos, como a barra de apps ou um botão suspenso, quando o tema atual é aplicado a eles. O lado direito do editor mostra o nome do tema visualizado no momento, o módulo onde o tema é definido e as configurações dos recursos do tema, como Theme parent e colorPrimary. Você pode modificar os temas de projeto alterando essas configurações de recursos.

Temas e cores

O Theme Editor permite criar novos temas, modificar temas existentes e gerenciar as cores os compõem.

Criar novos temas

Para criar um tema, siga estas etapas:

  1. Abra o menu suspenso Theme ao lado do canto superior direito do Theme Editor.
  2. Clique em Create New Theme.
  3. Na caixa de diálogo New Theme, insira um nome para o novo tema.
  4. Na lista Parent theme name, clique no pai do qual o tema herda os recursos iniciais.

Renomear temas

Para renomear um tema, siga estas etapas:

  1. Abra o menu suspenso Theme ao lado do canto superior direito do Theme Editor.
  2. Clique em Rename nome-do-tema.
  3. Na caixa de diálogo Rename, insira um novo nome para o tema.
  4. Opcional: para ver a aparência das alterações, clique em Preview.
  5. Para aplicar as alterações, clique em Refactor.

Alterar recursos de cor

Para alterar um recurso de cor existente, como colorPrimary, siga estas etapas:

  1. No Theme Editor, clique no quadrado colorido ao lado do nome do recurso que você quer alterar. A caixa de diálogo Resources é exibida, mostrando uma lista de grupos de cores à esquerda, e configurações e informações da cor de recurso selecionada à direita.
  2. Defina uma cor para o recurso de tema selecionando uma opção no painel esquerdo ou definindo uma nova cor, conforme descrito abaixo.

Selecionar uma cor

As cores são listadas na coluna à esquerda da caixa de diálogo Resources e organizadas nos seguintes grupos:

  • Project: são as cores dentro do seu projeto. Algumas podem ser editadas porque fazem parte das origens do seu projeto, enquanto outras não podem ser editadas porque pertencem às bibliotecas inclusas no projeto.
  • android: são os recursos de cor que pertencem ao namespace do Android. Eles fazem parte do framework Android e não podem ser editados.
  • Theme Attributes: são os atributos do tema selecionado. Eles são referenciados pelo tema e podem ser alterados dependendo do tema escolhido. Os atributos do tema nunca são editáveis na caixa de diálogo Resources.

Definir uma nova cor

    Figura 1. O editor de cores

  1. No menu suspenso no canto superior direito da caixa de diálogo Resources, clique em Add new resource > New color Value. A caixa de diálogo Resource exibe um painel editável à direita, com um campo Name para que você possa inserir um nome para a cor personalizada.
  2. Crie a cor personalizada da seguinte maneira. As etapas correspondem aos destaques na figura 1.
    1. Digite um nome para sua nova cor no campo Name que está em branco. Nenhum espaço ou caractere especial é permitido no nome. Sublinhados e números podem ser usados.
    2. Escala de cores, campo Custom color e conta-gotas:
      • Na escala de cores, clique na cor que você quer usar. A cor é exibida no campo Custom color.
      • Você pode usar o conta-gotas à esquerda do campo Custom color para selecionar uma cor. Clique no conta-gotas e depois em algum item visível em qualquer lugar da tela do computador. A cor no campo Custom color será alterada para a cor escolhida.
    3. Logo abaixo do campo Custom color, use os campos editáveis e o menu suspenso à esquerda para especificar uma cor RGB, HSB ou ARGB por meio de valores numéricos. O equivalente HEX da sua cor será exibido no campo editável mais à direita.
    4. Para definir a opacidade e o matiz da cor, mova os controles deslizantes abaixo da escala de cores.
    5. Selecione um dos quadrados de cor predefinidos disponíveis. A cor será exibida no campo Custom color, e o nome será alterado para o nome da cor selecionada.
  3. Clique em OK para salvar suas configurações. A caixa de diálogo Resources será fechada, levando você de volta para o Theme Editor.

Modificar uma cor

Você pode modificar qualquer cor editável. Se os campos de cor, matiz, opacidade e nome, bem como os campos do Configurador do dispositivo, estiverem editáveis, você poderá editar a cor. Consulte Selecionar cor se quiser saber por que alguns campos são editáveis e outros não.

  1. Ajuste as configurações.
  2. Clique em OK.

Corresponder à cor do Material Design

Se você definiu ou modificou uma cor de projeto personalizada, pode verificar se a cor corresponde à cor mais próxima da paleta do Material Design clicando em CLOSEST MATERIAL COLOR, ao lado de Custom color. O Android Studio altera os valores de cor e opacidade da cor escolhida para os valores da cor do Material Design mais parecida e substitui Custom color pelo nome da cor da paleta do Material Design.

Observação: o recurso CLOSEST MATERIAL COLOR só fica disponível quando a cor ainda não pertence ao Material Design.

Ver listas e cores de estado

O Theme Editor permite visualizar as cores associadas a estados diferentes. Para isso, abra a caixa de diálogo Resources clicando no quadrado colorido ao lado do nome de um recurso de lista de estados editável. A caixa de diálogo Resources exibe uma lista de estados, como Selected, e o valor da cor associada ao estado. Clique na cor de um estado para escolher um valor de cor diferente.

Para aumentar o controle sobre os próprios estados, veja e edite as propriedades relacionadas diretamente no arquivo XML que as define. Para ver mais informações, consulte a documentação da classe ColorStateList.

Configurações específicas de dispositivos

Quando uma cor é editável, você pode escolher configurações específicas de dispositivos para seu app. Para isso, siga as etapas a seguir:

  1. Abra a caixa de diálogo Resources. Para ver mais informações sobre como abrir a caixa de diálogo Resources, consulte Alterar recursos de cor.
  2. Selecione uma cor de Project e, na parte inferior do painel direito, clique para expandir Device Configuration, exibindo o conjunto de origens e o nome do arquivo XML que contém recurso, além de uma lista de diretórios específicos da configuração para colocar o arquivo.
  3. Se necessário, altere o nome do arquivo XML.
  4. Marque as caixas ao lado dos diretórios correspondentes às configurações específicas dos dispositivos com os quais você pretende manter compatibilidade. Configurações sem diretórios especificados usarão por padrão o diretório values.

Para ver mais informações sobre a relação entre nomes de diretórios e configurações, consulte Compatibilidade com várias telas. Para saber mais sobre os nomes de diretório compatíveis, consulte Fornecimento de recursos.