Projetar temas de aplicativos com o Theme Editor

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

  • Criar e modificar temas para um aplicativo.
  • 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 executadas com o Theme Editor e explica como executá-las.

    Conceitos básicos do Theme Editor

    Esta seção descreve como acessar o Theme Editor e como é o seu 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 perto do canto superior direito da janela do arquivo.
  • No menu Tools, clique em Android > Theme Editor.

    Navegar pelo Theme Editor

    A tela principal do Theme Editor é dividida em duas seções. O lado esquerdo do editor mostra a aparência de elementos de IU específicos, como barra de aplicativos ou um botão suspenso, quando o tem 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 usadas pelos temas.

    Criar novos temas

    Para criar um tema, siga estas etapas:

    1. Abra o menu suspenso Theme perto 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, execute estas etapas:

    1. Abra o menu suspenso Theme perto 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 alterar um recurso de cor existente, como colorPrimary, siga estas etapas:

    1. Clique no quadrado colorido ao lado do nome do recurso que quer alterar. A caixa de diálogo Resources é exibida, mostrando uma lista de cores à esquerda e configurações e informações da cor de recurso selecionada à direita.
    2. Defina a cor do recurso do tema executando uma das seguintes ações:
      • Selecione uma cor da paleta de material design na lista de cores.
      • Selecione uma cor definida no projeto na lista de cores e, opcionalmente, modifique como quiser o valor, a opacidade e o nome da cor.
      • Defina uma nova cor no projeto clicando em New Resource > New color Value no menu suspenso no canto inferior esquerdo da caixa de diálogo Resources e especifique o valor, a opacidade e o nome da cor.
    3. Se você criou ou modificou uma cor de projeto personalizada, poderá garantir que a cor corresponda à cor mais próxima da paleta do material design clicando em CLOSEST MATERIAL COLOR, localizado 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 com o nome da cor da paleta do 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, você pode ver e editar diretamente suas propriedades no arquivo XML que as define. Para obter mais informações, consulte a documentação da classe ColorStateList.

    Configurações específicas de dispositivos

    Você pode escolher configurações específicas de dispositivos compatíveis com o seu aplicativo. Para isso, execute as etapas a seguir:

    1. Clique no triângulo ao lado de Device Configuration, perto da parte inferior da caixa de diálogo Resources. A seção Device Configuration é expandida, revelando o conjunto de origem e o nome do arquivo XML que contém o recurso, bem como uma lista de diretórios específicos da configuração onde esse arquivo será colocado.
    2. Se necessário, altere o nome do arquivo XML.
    3. 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 obter mais informações sobre o relacionamento entre nomes de diretórios e configurações, consulte Compatibilidade com várias telas. Para obter mais informações sobre os nomes de diretório compatíveis, consulte Fornecimento de recursos.