Estilos e temas no Android permitem separar os detalhes do design do app da estrutura e do comportamento da IU, de forma semelhante às folhas de estilo em web design.
Um estilo é uma coleção de atributos que especificam a aparência de uma única
View. Um estilo pode especificar atributos,
como cor e tamanho da fonte, cor do plano de fundo e muito mais.
Um tema é uma coleção de atributos aplicados a uma hierarquia inteira de apps, atividades ou visualizações, e não apenas a uma visualização individual. Quando você aplica um tema, cada visualização no app ou atividade aplica cada um dos atributos do tema com suporte. Os temas também podem aplicar estilos a elementos que não são de visualização, como a barra de status e o plano de fundo da janela.
Estilos e temas são declarados em um
arquivo de recurso de estilo em
res/values/, geralmente denominado styles.xml.
Figura 1. Dois temas aplicados à mesma atividade:
Theme.AppCompat (à esquerda) e Theme.AppCompat.Light (à direita).
Temas versus estilos
Os temas e estilos têm muitas semelhanças, mas são usados para propósitos diferentes. Temas e estilos têm a mesma estrutura básica: um par de chave-valor que mapeia atributos para recursos.
O estilo especifica atributos para um determinado tipo de visualização. Por exemplo, um estilo pode especificar os atributos de um botão. Cada atributo especificado em um estilo é definido no arquivo de layout. A extração de todos os atributos para um estilo facilita o uso e a manutenção deles em vários widgets.
Um tema define uma coleção de recursos nomeados que podem ser referenciados por estilos, layouts,
widgets e assim por diante. Os temas atribuem nomes semânticos, como colorPrimary, aos recursos
do Android.
Os estilos e temas devem ser usados em conjunto. Por exemplo, você pode ter um estilo que especifica
que uma parte de um botão é colorPrimary e outra é
colorSecondary. As definições reais dessas cores são fornecidas no tema. Quando
o dispositivo entra no modo noturno, o app pode alternar do tema "claro" para o tema "escuro",
mudando os valores de todos esses nomes de recursos. Não é necessário mudar os estilos, já que eles
usam os nomes semânticos, e não definições de cor específicas.
Para ver mais informações sobre como temas e estilos funcionam juntos, consulte a postagem do blog Estilo do Android: temas e estilos (link em inglês).
Criar e aplicar um estilo
Para criar um novo estilo, abra o arquivo res/values/styles.xml do seu projeto. Para cada estilo que você quer criar, siga estas etapas:
- Adicione um elemento
<style>com um nome que identifique o estilo de forma exclusiva. - Adicione um elemento
<item>para cada atributo de estilo que você quer definir. Onameem cada item especifica um atributo que seria usado como um atributo XML no layout. O valor no elemento<item>é o valor desse atributo.
Por exemplo, suponha que você defina o seguinte estilo:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
</resources>
Será possível aplicar o estilo a uma visualização da seguinte maneira:
<TextView
style="@style/GreenText"
... />
Cada atributo especificado no estilo será aplicado a essa visualização se ela aceitar. A visualização ignora os atributos que não são aceitos.
No entanto, em vez de aplicar um estilo a visualizações individuais, você normalmente aplica estilos como tema para todo o app, atividade ou coleção de visualizações, conforme descrito em outra seção deste guia.
Estender e personalizar um estilo
Ao criar os próprios estilos, sempre estenda um dos já existentes do framework ou da Biblioteca de
Suporte para manter a compatibilidade com os estilos de IU da plataforma. Para estender um estilo, especifique aquele que você quer estender com o atributo parent. Em seguida, você pode modificar os atributos de estilo herdados e adicionar novos.
Por exemplo, você pode herdar a aparência de texto padrão da plataforma Android e modificá-la da seguinte maneira:
<style name="GreenText" parent="@android:style/TextAppearance">
<item name="android:textColor">#00FF00</item>
</style>
No entanto, sempre herde os estilos de app principais da Biblioteca de Suporte do Android. Os estilos na
Biblioteca de Suporte oferecem compatibilidade otimizando cada estilo para os atributos da interface disponíveis em
cada versão. Os estilos da Biblioteca de Suporte geralmente têm um nome semelhante ao estilo da plataforma,
mas com AppCompat incluído.
Para herdar estilos de uma biblioteca ou do seu próprio projeto, declare o nome do estilo pai
sem a parte @android:style/ mostrada no exemplo anterior. Por exemplo,
o exemplo abaixo herda estilos de aparência de texto da Biblioteca de Suporte:
<style name="GreenText" parent="TextAppearance.AppCompat">
<item name="android:textColor">#00FF00</item>
</style>
Você também pode herdar estilos (exceto os da plataforma) estendendo o nome de um
estilo com uma notação de ponto, em vez de usar o atributo parent. Ou seja, adicione um prefixo ao nome do seu estilo com o nome que você quer herdar, separado por um ponto. Normalmente, isso só é feito ao estender os próprios estilos, não os estilos de outras bibliotecas. Por exemplo,
o estilo a seguir herda todos os estilos de GreenText no exemplo anterior
e aumenta o tamanho do texto:
<style name="GreenText.Large">
<item name="android:textSize">22dp</item>
</style>
Você pode continuar herdando estilos como esse quantas vezes quiser encadeando mais nomes.
Para encontrar quais atributos você pode declarar com uma tag <item>, consulte a tabela "Atributos
XML" nas diversas referências de classe. Todas as visualizações oferecem suporte a
atributos XML da classe
View de base, e muitas visualizações adicionam os próprios atributos especiais. Por exemplo, os
atributos XML TextView
incluem o atributo
android:inputType
que pode ser aplicado a uma visualização de texto que recebe entradas, como um
widget EditText.
Aplicar um estilo como tema
Você pode criar um tema da mesma forma que cria estilos. A diferença é como você o aplica:
em vez de aplicar um estilo com o atributo style em uma visualização, aplique um tema com
o atributo android:theme na tag <application> ou em uma
<activity> no arquivo AndroidManifest.xml.
Por exemplo, confira como aplicar o tema "escuro" do Material Design da Biblioteca de Suporte do Android ao app inteiro:
<manifest ... >
<application android:theme="@style/Theme.AppCompat" ... >
</application>
</manifest>
Veja como aplicar o tema claro a apenas uma atividade:
<manifest ... >
<application ... >
<activity android:theme="@style/Theme.AppCompat.Light" ... >
</activity>
</application>
</manifest>
Todas as visualizações no app ou na atividade aplicam os estilos compatíveis com os definidos no tema especificado. Se uma visualização for compatível com apenas alguns dos atributos declarados no estilo, ela vai aplicar apenas esses atributos e ignorar os não compatíveis.
A partir do Android 5.0 (API de nível 21) e da Biblioteca de Suporte do Android v22.1, também é possível especificar
o atributo android:theme para uma visualização no arquivo de layout. Isso modifica o tema dessa
visualização e de todas as visualizações filhas, o que é útil para mudar as paletas de cores do tema em uma parte
específica da interface.
Os exemplos anteriores mostram como aplicar um tema, como Theme.AppCompat,
fornecido pela Biblioteca de Suporte do Android. No entanto, normalmente você quer personalizar o tema para se adequar
à marca do app. A melhor maneira de fazer isso é estender esses estilos da Biblioteca de Suporte e
modificar alguns dos atributos, conforme descrito na próxima seção.
Hierarquia de estilo
O Android oferece várias maneiras de definir atributos em todo o app Android. Por exemplo, você pode definir atributos diretamente em um layout, aplicar um estilo a uma visualização, aplicar um tema a um layout e até mesmo definir atributos programaticamente.
Ao escolher como definir o estilo do seu app, lembre-se da hierarquia de estilo do Android. Em geral, use temas e estilos o máximo possível para manter a consistência. Se você especificar os mesmos atributos em vários lugares, a lista a seguir determinará quais deles serão aplicados. A lista é ordenada da precedência mais alta para a mais baixa.
- Aplicar um estilo no nível do caractere ou do parágrafo usando períodos de texto a classes derivadas de
TextView. - Aplicar atributos de forma programática.
- Aplicar atributos individuais diretamente a uma visualização.
- Aplicar um estilo a uma visualização.
- Estilo padrão.
- Aplicar um tema a uma coleção de visualizações, uma atividade ou ao app inteiro.
- Aplicar um estilo específico da visualização, como definir um
TextAppearanceem umTextView.
Figura 2. O estilo de um span modifica o estilo de uma
textAppearance.
TextAppearance
Uma limitação dos estilos é que somente um estilo pode ser aplicado a uma View. No entanto, em uma
TextView, você também pode especificar um
atributo TextAppearance
que funciona de maneira semelhante a um estilo, como mostrado no exemplo abaixo.
<TextView
...
android:textAppearance="@android:style/TextAppearance.Material.Headline"
android:text="This text is styled via textAppearance!" />
O TextAppearance permite definir um estilo específico do texto, deixando o estilo de uma
View disponível para outros usos. No entanto, se você definir qualquer atributo de texto
diretamente na View ou em um estilo, esses valores vão modificar os
TextAppearance.
TextAppearance oferece suporte a um subconjunto de atributos de estilo que TextView
oferece. Para ver a lista completa de atributos, consulte
TextAppearance.
Alguns atributos TextView comuns não incluídos são
lineHeight[Multiplier|Extra],
lines,
breakStrategy e
hyphenationFrequency.
TextAppearance funciona no nível do caractere, e não do parágrafo. Portanto,
atributos que afetam todo o layout não têm suporte.
Personalizar o tema padrão
Quando você cria um projeto com o Android Studio, ele aplica um tema do Material Design ao seu app por
padrão, conforme definido no arquivo styles.xml do projeto. Esse estilo AppTheme
estende um tema da Biblioteca de Suporte e inclui substituições para atributos de cor usados
por elementos importantes da interface, como a barra de apps e o
botão de ação flutuante, se usados. Você
pode personalizar rapidamente o design de cores do seu app atualizando as cores fornecidas.
Por exemplo, o arquivo styles.xml é semelhante a este:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
Os valores de estilo são, na verdade, referências a outros
recursos de cor, definidos no
arquivo res/values/colors.xml do projeto. Esse é o arquivo que você edita para mudar as cores.
Consulte a
Visão geral de cores do Material Design (link em inglês)
para melhorar a experiência do usuário com cores dinâmicas e outras cores personalizadas.
Com as cores definidas, atualize os valores em res/values/colors.xml:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Color for the app bar and other primary UI elements. -->
<color name="colorPrimary">#3F51B5</color>
<!-- A darker variant of the primary color, used for
the status bar (on Android 5.0+) and contextual app bars. -->
<color name="colorPrimaryDark">#303F9F</color>
<!-- a secondary color for controls like checkboxes and text fields. -->
<color name="colorAccent">#FF4081</color>
</resources>
Você pode substituir os outros estilos que quiser. Por exemplo, você pode mudar a cor do plano de fundo da atividade desta maneira:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
...
<item name="android:windowBackground">@color/activityBackground</item>
</style>
Para conferir uma lista de atributos que podem ser usados no seu tema, consulte a tabela de atributos em
R.styleable.Theme. Ao adicionar
estilos para as visualizações no seu layout, você também pode encontrar atributos na tabela "Atributos XML"
nas referências da classe da visualização. Por exemplo, todas as visualizações oferecem suporte a
atributos XML da classe base View.
A maior parte dos atributos é aplicada a tipos específicos de visualizações, e alguns são aplicados a todas elas. No entanto,
alguns atributos de tema listados em
R.styleable.Theme se aplicam à
janela de atividade, não às visualizações no layout. Por exemplo, windowBackground muda o
segundo plano da janela, e windowEnterTransition define uma animação de transição a ser usada quando
a atividade for iniciada. Para mais detalhes, consulte Iniciar
uma atividade usando uma animação.
A Biblioteca de Suporte do Android também oferece outros atributos que podem ser usados para personalizar o tema
estendido de Theme.AppCompat, como o atributo colorPrimary mostrado no
exemplo anterior. A visualização deles fica melhor no
arquivo attrs.xml da biblioteca.
Também há temas diferentes disponíveis na Biblioteca de Suporte que podem ser estendidos
em vez dos que foram mostrados no exemplo anterior. O melhor lugar para ver os temas disponíveis é
o
arquivo themes.xml da biblioteca.
Adicionar estilos específicos da versão
Se uma nova versão do Android adicionar atributos de tema que você quer usar, eles poderão ser adicionados ao tema
e manter a compatibilidade com versões antigas. Você só precisa de outro arquivo styles.xml
salvo em um diretório values que inclua o
qualificador de versão
do recurso:
res/values/styles.xml # themes for all versions res/values-v21/styles.xml # themes for API level 21+ only
Como os estilos no arquivo values/styles.xml estão disponíveis para todas as versões,
seus temas em values-v21/styles.xml podem herdá-los. Isso significa que é possível evitar
a duplicação de estilos começando com um tema "básico" e o estendendo nos estilos específicos
da versão.
Por exemplo, para declarar transições de janela para o Android 5.0 (API de nível 21) e versões mais recentes, você precisa
usar novos atributos. Assim, o tema base em res/values/styles.xml pode ficar
assim:
<resources>
<!-- Base set of styles that apply to all versions. -->
<style name="BaseAppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="colorPrimary">@color/primaryColor</item>
<item name="colorPrimaryDark">@color/primaryTextColor</item>
<item name="colorAccent">@color/secondaryColor</item>
</style>
<!-- Declare the theme name that's actually applied in the manifest file. -->
<style name="AppTheme" parent="BaseAppTheme" />
</resources>
Em seguida, adicione os estilos específicos da versão em res/values-v21/styles.xml da seguinte maneira:
<resources>
<!-- extend the base theme to add styles available only with API level 21+ -->
<style name="AppTheme" parent="BaseAppTheme">
<item name="android:windowActivityTransitions">true</item>
<item name="android:windowEnterTransition">@android:transition/slide_right</item>
<item name="android:windowExitTransition">@android:transition/slide_left</item>
</style>
</resources>
Agora você pode aplicar AppTheme ao arquivo de manifesto, e o sistema selecionará os estilos
disponíveis para cada versão do sistema.
Para saber mais sobre o uso de recursos alternativos para dispositivos diferentes, consulte Como fornecer recursos alternativos.
Personalizar estilos de widgets
Cada widget no framework e na Biblioteca de Suporte tem um estilo padrão. Por exemplo, quando você
define o estilo do app usando um tema da Biblioteca de Suporte, uma instância de
Button é estilizada usando o
Widget.AppCompat.Button. Caso você queira aplicar um estilo de widget diferente a um
botão, use o atributo style no arquivo de layout. O exemplo
a seguir aplica o estilo de botão sem borda da biblioteca:
<Button
style="@style/Widget.AppCompat.Button.Borderless"
... />
Se você quiser aplicar esse estilo a todos os botões, declare-o no buttonStyle
do tema da seguinte maneira:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
<item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item>
...
</style>
Também é possível estender estilos de widgets, assim como estender qualquer outro estilo, e depois aplicar o estilo de widget personalizado ao layout ou tema.
Outros recursos
Para saber mais sobre temas e estilos, consulte os seguintes recursos adicionais: