Plataforma Android Studio Google Play Jetpack Kotlin Documentos Notícias
Android Dev Summit, October 23-24: two days of technical content, directly from the Android team. Sign-up for livestream updates.

Estilos e temas

Estilo é uma coleção de propriedades que especifica a aparência e formato de uma View ou janela. Um estilo pode especificar propriedades como altura, preenchimento, cor da fonte, tamanho da fonte, cor do segundo plano e muitas outras. Define-se o estilo em um recurso XML separado do XML que especifica o layout.

Os estilos no Android compartilham a mesma filosofia das folhas de estilo em cascata no design da Web — eles permitem separar o design do conteúdo.

Por exemplo, usando um estilo, você pode usar este layout XML:

<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:textColor="#00FF00"
    android:typeface="monospace"
    android:text="@string/hello" />

E transformá-lo desta forma:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Todos os atributos relacionados ao estilo foram removidos do XML de layout e colocados em uma definição de estilo denominada CodeFont, que é aplicada com o atributo style. Você verá a definição desse estilo na próxima seção.

Tema é um estilo aplicado a toda uma Activity ou aplicativo, em vez de a uma View individual (como no exemplo acima). Quando um estilo é aplicado como tema, cada View na Activity ou aplicativo aplicará todas as propriedades de estilo permitidas. Por exemplo: você pode aplicar o mesmo estilo CodeFont como tema de uma Activity. Com isso, todo o texto dentro dessa Activity usará fonte verde com espaçamento uniforme.

Definir estilos

Para criar um conjunto de estilos, salve um arquivo XML no diretório res/values/ do projeto. O nome do arquivo XML é arbitrário, mas deve usar a extensão .xml e ser salvo na pasta res/values/.

O nó raiz do arquivo XML deve ser <resources>.

Para cada estilo que você quer criar, adicione um elemento <style> ao arquivo com um name que identifica unicamente o estilo (esse atributo é obrigatório). Adicione então um elemento <item> para cada propriedade desse estilo, com um name que declara a propriedade de estilo e seu valor respectivo (este atributo é obrigatório). O valor para <item> pode ser uma string de palavra-chave, uma cor em hexadecimal, uma referência a outro tipo de recurso ou outro valor, dependendo da propriedade de estilo. Veja a seguir um arquivo de exemplo com um único estilo:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="CodeFont" parent="@android:style/TextAppearance.Medium">
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:textColor">#00FF00</item>
        <item name="android:typeface">monospace</item>
    </style>
</resources>

Cada filho do elemento <resources> é convertido durante a compilação em um objeto de recurso do aplicativo, que pode ser referenciado pelo valor no atributo name do elemento <style>. O estilo desse exemplo pode ser referenciado de um layout XML como @style/CodeFont (como demonstrado na introdução acima).

O atributo parent do elemento <style> é opcional e especifica o ID do recurso de outro estilo do qual esse estilo deve herdar propriedades. Se quiser, você poderá modificar as propriedades de estilo herdadas.

Lembre-se de que o estilo que você quer usar como tema da Activity ou do aplicativo é definido no XML exatamente da mesma forma que um estilo de uma View. Um estilo como o definido acima pode ser aplicado como estilo para uma única View ou como tema para toda uma Activity ou aplicativo. Veremos mais tarde como aplicar um estilo para uma única View ou como um tema de aplicativo.

Herança

O atributo parent no elemento <style> permite especificar um estilo do qual seu estilo deve herdar propriedades. Você pode usar isso para herdar propriedades de um estilo existente e definir apenas as propriedades que deseja alterar ou adicionar. É possível herdar estilos criados por você ou incorporados na plataforma. (Consulte Usar estilos e temas da plataforma a seguir para obter informações sobre a herança de estilos definida pela plataforma Android.) Por exemplo, você pode herdar a aparência padrão de texto da plataforma Android e modificá-la:

    <style name="GreenText" parent="@android:style/TextAppearance">
        <item name="android:textColor">#00FF00</item>
    </style>

Se você quiser herdar de estilos que definiu, não é preciso usar o atributo parent. Em vez disso, basta prefixar o nome do estilo desejado para herdar o nome do novo estilo, separado por um período. Por exemplo, para criar um novo estilo que herda o estilo CodeFont definido acima, mas com a cor vermelha, você pode definir o novo estilo da seguinte forma:

    <style name="CodeFont.Red">
        <item name="android:textColor">#FF0000</item>
    </style>

Observe que não há um atributo parent na tag <style>. No entanto, como o atributo name começa com o nome de estilo CodeFont (que é um estilo criado por você), esse estilo herda todas as propriedades de estilo do outro. Em seguida, esse estilo modifica a propriedade android:textColor para que o texto fique vermelho. Você pode referenciar esse novo estilo como @style/CodeFont.Red.

Você pode continuar herdando dessa forma o número de vezes que quiser, encadeando nomes com períodos. Por exemplo, você pode estender CodeFont.Red para que seja maior, com:

    <style name="CodeFont.Red.Big">
        <item name="android:textSize">30sp</item>
    </style>

Esse código herda dos estilos CodeFont e CodeFont.Red e depois adiciona a propriedade android:textSize.

Observação: Essa técnica de herança encadeando nomes somente funciona para estilos definidos pelos seus próprios recursos. Não é possível herdar estilos incorporados do Android dessa forma. Para referenciar um estilo incorporado, como TextAppearance, é preciso usar o atributo parent.

Propriedades do estilo

Agora que você entendeu como se define um estilo, precisa saber que tipo de propriedades de estilo — definidas pelo elemento <item> — estão disponíveis. Provavelmente, você já conhece alguns, como layout_width e textColor. Naturalmente, há muitas outras propriedades de estilo que podem ser usadas.

O melhor local para encontrar as propriedades aplicadas a uma View específica é a referência de classe correspondente, que lista todos os atributos permitidos pelo XML. Por exemplo, todos os atributos listados na tabela dos atributos XML de TextView podem ser usados em uma definição de estilo para um elemento TextView (ou uma de suas subclasses). Um dos atributos listados na referência é android:inputType. Portanto, onde você normalmente poderia colocar o atributo android:inputType em um elemento <EditText>, da seguinte forma:

<EditText
    android:inputType="number"
    ... />

Você poderá, em vez disso, criar um estilo para o elemento EditText que contém essa propriedade:

<style name="Numbers">
  <item name="android:inputType">number</item>
  ...
</style>

Assim, o XML para o layout agora pode implementar esse estilo:

<EditText
    style="@style/Numbers"
    ... />

Esse exemplo simples pode parecer trabalho a mais, mas quando você adicionar mais propriedades de estilo e considerar a capacidade de reutilizar o estilo em diversos lugares, os benefícios poderão ser enormes.

Para obter uma referência de todas as propriedades de estilo disponíveis, consulte a referência R.attr. Lembre-se de que nem todos os objetos View aceitam os mesmos atributos de estilo. Portanto, você deve normalmente consultar a classe View específica para obter as propriedades de estilo permitidas. No entanto, se você aplicar um estilo a uma View incompatível com todas as propriedades de estilo, a View aplicará somente as propriedades compatíveis e simplesmente ignorará as outras.

Contudo, algumas propriedades estilo não são permitidas por nenhum elemento View e somente podem ser aplicadas como tema. Essas propriedades de estilo se aplicam a toda a janela não a um tipo de View. Por exemplo, as propriedades de estilo de um tema podem ocultar o título do aplicativo, ocultar a barra de status ou altera o segundo plano da janela. Esse tipo de propriedades de estilo não se aplica a nenhum objeto View. Para descobrir essas propriedades aplicáveis apenas a temas, consulte a referência de R.attr para atributos que começam com window. Por exemplo, windowNoTitle e windowBackground são propriedades de estilo que são eficazes somente quando o estilo é aplicado como tema em uma Activity ou aplicativo. Consulte a próxima seção para obter informações sobre a aplicações de um estilo como tema.

Observação: Não se esqueça de prefixar os nomes de propriedades em cada elemento <item> com o namespace android:. Por exemplo: <item name="android:inputType">.

Aplicar estilos e temas à IU

Há duas formas de definir um estilo:

  • Para uma View individual, adicionando o atributo style a um elemento da View no XML do layout.
  • Ou, para toda uma Activity ou aplicativo, adicionando o atributo android:theme ao elemento <activity> ou <application> no manifesto do Android.

Quando você aplica um estilo a uma única View no layout, as propriedades definidas pelo estilo são aplicadas somente a essa View. Se um estilo for aplicado a um ViewGroup, os elementos filho View não herdarão as propriedades de estilo — somente o elemento onde o estilo for aplicado diretamente aplicará as propriedades. No entanto, você pode aplicar um estilo para que seja aplicado a todos os elementos View — aplicando o estilo como tema.

Para aplicar uma definição de estilo como tema, é preciso aplicar o estilo a uma Activity ou a um aplicativo no manifesto do Android. Nesse caso, cada View dentro da Activity ou aplicativo aplicará todas as propriedades permitidas. Por exemplo, se você aplicar o estilo CodeFont dos exemplos anteriores a uma Activity, todos os elementos View que permitem propriedades de estilo de texto aplicarão esse estilo. Todas as Views que não permitirem as propriedades ignorarão essas propriedades. Se uma View permitir apenas algumas propriedades, aplicará apenas essas propriedades.

Aplicar um estilo a uma View

Veja como definir um estilo para uma View no layout XML:

<TextView
    style="@style/CodeFont"
    android:text="@string/hello" />

Agora o estilo será aplicado à TextView como definido no estilo CodeFont. (Veja o exemplo acima, em Definir estilos.)

Observação: O atributo style não usa o prefixo de namespace android:.

Aplicar um tema a uma Activity ou aplicativo

Para definir um tema para todas as atividades do aplicativo, abra o arquivo AndroidManifest.xml e edite a tag <application> para incluir o atributo android:theme com o nome do estilo. Por exemplo:

<application android:theme="@style/CustomTheme">

Se você quiser que um tema seja aplicado a somente uma Activity no aplicativo, adicione o atributo android:theme à tag <activity>.

Da mesma forma que o Android fornece outros recursos incorporados, há vários temas predefinidos que podem ser usados, sem que você tenha que criá-los. Por exemplo, você pode usar o tema Dialog e exibir a Activity como uma caixa de diálogo:

<activity android:theme="@android:style/Theme.Dialog">

Ou, se você quiser que o segundo plano seja transparente, use o tema Translucent:

<activity android:theme="@android:style/Theme.Translucent">

Se você gostar de um tema, mas quiser ajustá-lo, basta adicionar o tema como o parent do tema personalizado. Por exemplo, você pode modificar o tema light tradicional para usar a sua própria cor da seguinte forma:

<color name="custom_theme_color">#b0b0ff</color>
<style name="CustomTheme" parent="android:Theme.Light">
    <item name="android:windowBackground">@color/custom_theme_color</item>
    <item name="android:colorBackground">@color/custom_theme_color</item>
</style>

(Observe que, neste caso, a cor precisa ser fornecida como um recurso separado porque o atributo android:windowBackground permite apenas uma referência a outro recurso; ao contrário de android:colorBackground, não é possível atribuir a ele um literal de cor.)

Agora use CustomTheme em vez de Theme.Light dentro do manifesto do Android:

<activity android:theme="@style/CustomTheme">

Selecionar um tema de acordo com a versão da plataforma

As versões mais recentes do Android têm temas adicionais disponíveis para os aplicativos. Você pode usá-los ao executar nessas plataformas mantendo a compatibilidade com versões anteriores. Isso pode ser feito por meio de um tema personalizado que usa seleção de recursos para alternar entre temas pai diferentes, com base na versão da plataforma.

Por exemplo, esta é a declaração de um tema personalizado que é simplesmente o tema claro padrão da plataforma. Ela estaria em um arquivo XML, em res/values (normalmente, res/values/styles.xml): 

<style name="LightThemeSelector" parent="android:Theme.Light">
    ...
</style>

Para que esse tema use o tema holográfico mais recente quando o aplicativo for executado no Android 3.0 (API de nível 11) ou posterior, você pode colocar uma declaração alternativa para o tema em um arquivo XML em res/values-v11, mas faça com que o tema holográfico seja o tema pai:

<style name="LightThemeSelector" parent="android:Theme.Holo.Light">
    ...
</style>

Agora você pode usar esse tema como qualquer outro e o aplicativo alternará automaticamente para o tema holográfico, se executado no Android 3.0 ou posterior.

Veja em R.styleable.Theme uma lista de atributos padrão que você pode usar nos temas.

Para obter mais informações sobre o fornecimento de recursos alternativos, como temas e layouts, com base na versão da plataforma ou outras configurações de dispositivo, consulte o documento Fornecimento de recursos.

Usar estilos e temas da plataforma

A plataforma Android oferece uma grande coleção de estios e temas que você pode usar nos aplicativos. Você pode encontrar uma referência de todos os estilos disponíveis na classe R.style. Para usar os estilos listados aqui, substitua todos os sublinhados no nome do estilo por um período. Por exemplo, você pode aplicar o tema Theme_NoTitleBar com "@android:style/Theme.NoTitleBar".

No entanto, a referência R.style não é bem documentada e não descreve completamente os estilos. Portanto, a exibição do código-fonte real para esses estilos e temas permitirá uma melhor compreensão de quais propriedades de estilo são fornecidas por cada um deles. Para obter uma melhor referência para os estilos e temas do Android, consulte este código-fonte:

Esses arquivos ajudarão a aprender por exemplos. Por exemplo, no código-fonte de temas Android, você encontrará uma declaração para <style name="Theme.Dialog">. Nessa definição, você verá todas as propriedades usadas para aplicar estilo às caixas de diálogo usadas pela estrutura de trabalho do Android.

Para obter mais informações sobre a sintaxe de estilos e temas no XML, consulte o documento Recurso de estilo.

Para obter uma referência dos atributos de estilo disponíveis para uso na definição de um estilo ou tema (por exemplo, "windowBackground" ou "textAppearance"), consulte R.attr ou a classe View respectiva para a qual o estilo está sendo criado.