Projetar temas de apps com o Theme Editor

Mantenha tudo organizado com as coleções Salve e categorize o conteúdo com base nas suas preferências.

Alerta: a partir da versão 3.3, o Theme Editor não está mais incluído no Android Studio.

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

  • criar e modificar temas para seu 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 estilo aberto, como styles.xml, clique em Open editor, perto 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 em realce, quando o tema atual é aplicado a eles. O lado direito do editor mostra o nome do tema visualizado no momento, o módulo em que o tema é definido e as configurações dos recursos do tema, como Theme parent e colorPrimary. Você pode modificar os temas de design mudando essas configurações de recursos.

Temas e cores

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

Criar novos temas

Para criar um tema, siga estas etapas:

  1. Abra o menu suspenso Theme próximo 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 de que o tema herda os recursos iniciais.

Renomear temas

Para renomear um tema, siga estas etapas:

  1. Abra o menu suspenso Theme próximo do canto superior direito do Theme Editor.
  2. Clique em Rename theme-name.
  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 mudar 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, ao passo que outras não podem ser editadas porque pertencem às bibliotecas incluídas 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, em seguida, clique em algum item visível em qualquer lugar da tela do computador. A cor no campo Custom color mudará 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 com valores numéricos. O equivalente HEX da 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 mudará 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, é possível 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 muda os valores de cor e opacidade da cor escolhida para os valores da cor mais parecida do Material Design 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 faz parte do Material Design.

Ver listas e cores de estado

O Theme Editor permite visualizar as cores associadas a diferentes estados. Para isso, abra a caixa de diálogo Resources clicando no quadrado colorido, localizado ao lado do nome de um recurso da 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 estados, é possível visualizar e editar as propriedades relacionadas diretamente no arquivo XML que as define. Para saber mais, 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 estas etapas:

  1. Abra a caixa de diálogo Resources. Para ver mais informações sobre como abrir a caixa de diálogo Resources, consulte Mudar 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 o 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 que você pretende manter compatibilidade. Por padrão, configurações sem diretórios especificados usarã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 Como oferecer recursos.