Os estilos e temas no Android permitem separar as informações de design do app daquelas relacionadas à estrutura e do comportamento da IU, semelhante às folhas de estilos em web design.
O 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.
O tema é uma coleção de atributos aplicados a um app, atividade ou hierarquia de visualização inteiros, não apenas a uma visualização individual. Quando você aplica um tema, todas as visualizações no app ou na atividade aplicam cada atributo do tema compatível. 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/
, normalmente denominado styles.xml
.

Figura 1. Dois temas aplicados à mesma atividade:
Theme.AppCompat
(à esquerda) e Theme.AppCompat.Light
(à direita).
Diferenças entre temas e estilos
Os temas e estilos têm muitas semelhanças, mas são usados para propósitos distintos. Os 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 é um atributo que você pode definir no arquivo de layout. Ao extrair todos os atributos para um estilo, é fácil de usá-los e mantê-los em diversos widgets.
O tema define uma coleção de recursos nomeados que pode ser
referenciada 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 precisa ser
colorPrimary
e outra parte precisa ser
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 alterar os estilos,
já que eles usam os nomes semânticos e não as definições de cor
específicas.
Para mais informações sobre como os temas e estilos funcionam juntos, consulte a postagem do blog Estilo do Android: diferenças entre temas e estilos (link em inglês).
Criar e aplicar um estilo
Para criar um novo estilo ou tema, abra o arquivo res/values/styles.xml
do projeto. Para cada estilo que você quer criar, siga as seguintes 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.O
name
em cada item especifica um atributo que você usaria como um atributo XML no seu layout. O valor no elemento<item>
é o valor desse atributo.
Por exemplo, se você definir 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 apenas ignora os atributos não aceitos.
Observação:
somente o elemento a que o atributo style
é adicionado recebe esses atributos de estilo. As visualizações filhas não aplicam os estilos. Se você quiser
que as visualizações filhas herdem estilos, aplique o estilo com
o atributo android:theme
.
No entanto, em vez de aplicar um estilo a visualizações individuais, normalmente você aplicará estilos como tema para todo o app, atividade ou conjunto de visualizações.
Estender e personalizar um estilo
Ao criar os próprios estilos, sempre estenda um estilo existente do
framework ou da Biblioteca de Suporte. Assim, você manterá a compatibilidade com os estilos de IU da plataforma.
Para estender um estilo, especifique aquele que você quer estender com o atributo parent
.
Então, é possível modificar os atributos de estilo herdados e acrescentar outros novos.
Por exemplo, você pode herdar a aparência de texto padrão da plataforma Android e modificá-la assim:
<style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style>
Contudo, é necessário herdar os principais estilos de app da Biblioteca de Suporte do Android.
Os estilos na Biblioteca de Suporte oferecem compatibilidade com o
Android 4.0 (API de nível 14) e versões mais recentes
otimizando cada estilo para os atributos de IU disponíveis em cada versão.
Os estilos da Biblioteca de Suporte geralmente têm um nome semelhante ao
estilo da plataforma, mas com a inclusão de AppCompat
.
Para herdar estilos de uma biblioteca ou do próprio projeto, declare o nome do estilo pai
sem a parte @android:style/
exibida acima.
O exemplo a seguir herda estilos de aparência de
texto da Biblioteca de Suporte:
<style name="GreenText" parent="TextAppearance.AppCompat"> <item name="android:textColor">#00FF00</item> </style>
Também é possível herdar estilos (exceto aqueles 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. Em geral, isso é feito
somente ao estender os próprios estilos, não os estilos de outras bibliotecas. Por exemplo,
o estilo a seguir herda todos os estilos do GreenText
acima
e, em seguida, 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 ao encadear mais nomes.
Observação:
se você usar a notação de ponto para estender um estilo e também incluir o
atributo parent
, os estilos pais vão modificar os estilos
herdados pela notação de ponto.
Para encontrar os atributos que você pode declarar com uma tag <item>
,
consulte a tabela "Atributos XML" nas diversas referências de classe. Todas
as visualizações são compatíveis com atributos XML
da classe View
básica, e muitas visualizações adicionam os próprios atributos especiais.
Por exemplo, os atributos XML
do TextView incluem o atributo
android:inputType
que pode ser aplicado a uma visualização de texto que recebe
entrada, 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
nas tags <application>
ou
<activity>
do arquivo AndroidManifest.xml
.
Por exemplo, veja 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>
Agora, todas as visualizações no app ou na atividade aplicarão os estilos definidos no tema em questão. Se uma visualização for compatível com apenas alguns dos atributos declarados no estilo, ela aplicará somente esses atributos e ignorará aqueles que não sã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 seu arquivo de layout.
Isso modifica o tema dessa visualização e de qualquer
visualização filha, o que é útil para mudar as paletas de cores do tema em uma parte específica
da sua interface.
Os exemplos anteriores mostram como aplicar um tema, como Theme.AppCompat
,
fornecido pela Biblioteca de Suporte do Android. Mas,
em geral, você personalizará o tema para adequá-lo à marca do seu 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 de forma programática.
Ao escolher como definir o estilo do seu app, lembre-se da hierarquia de estilo do Android. Em geral, use o máximo de temas e estilos possível para manter a consistência. Se você especificou os mesmos atributos em vários lugares, a lista abaixo determina quais atributos são de fato aplicados. A lista foi ordenada da prioridade mais alta à mais baixa:
- Aplicar um estilo no nível do caractere ou do parágrafo usando extensões 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.
- Definir o estilo padrão.
- Aplicar um tema a um conjunto de visualizações, uma atividade ou todo o app.
- Aplicar um estilo específico de visualização, como definir uma
TextAppearance
em umTextView
.
Figura 2. O estilo de um span
modifica o estilo de uma
textAppearance
.
Se você está tentando aplicar um estilo ao seu app e não consegue os resultados esperados, é
possível que outro estilo esteja modificando suas mudanças. Por exemplo, se você aplicar um tema ao seu
app, com um estilo para uma View
individual, os atributos do estilo modificarão
qualquer atributo correspondente do tema para essa View
. No entanto, todo atributo do tema
que não for modificado pelo estilo ainda será usado.
TextAppearance
Uma limitação dos estilos é que somente um estilo pode ser aplicado a uma View
. No
entanto, em um TextView
, também é possível especificar o atributo
TextAppearance
,
que funciona de forma semelhante a um estilo, conforme mostrado no exemplo a seguir:
<TextView ... android:textAppearance="@android:style/TextAppearance.Material.Headline" android:text="This text is styled via textAppearance!" />
TextAppearance
permite definir
um estilo de texto específico, 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 modificarão os valores de TextAppearance
.
TextAppearance
é compatível com 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, não no nível do parágrafo. Portanto,
atributos que afetam todo o layout não são compatíveis.
Personalizar o tema padrão
Ao criar um projeto com o Android Studio, um tema do Material Design é aplicado
ao app por padrão, conforme definido no arquivo styles.xml
do projeto. Esse
estilo AppTheme
estende um tema da Biblioteca de Suporte e inclui modificações para
atributos de cor que são usados por elementos importantes da IU, como
a barra de apps e o botão de ação flutuante (caso sejam usados).
Assim, é possível personalizar o design de cor do seu app rapidamente atualizando as cores fornecidas.
Por exemplo, seu arquivo styles.xml
deve ser 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. Então esse é o arquivo
a ser editado para mudar as cores.
Mas, antes de começar essas mudanças, é possível visualizar as cores com a
Material Color Tool (em inglês). Essa ferramenta ajuda a escolher
cores da paleta do Material design e visualizar como elas serão exibidas no app.
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>
Em seguida, é possível modificar quaisquer outros estilos que você queira. Por exemplo, você pode mudar a cor do plano de fundo da atividade da seguinte forma:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> ... <item name="android:windowBackground">@color/activityBackground</item> </style>
Para ver 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, também é possível
encontrar atributos na tabela "Atributos XML", nas referências da classe da visualização. Por
exemplo, todas as visualizações são compatíveis com atributos XML da classe View
básica.
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 da atividade, não às visualizações no layout.
Por exemplo, windowBackground
muda
o plano de fundo da janela, e windowEnterTransition
define uma animação de transição a ser usada
quando a atividade começa. Para ver 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 acima. A visualização desses atributos é melhor no
arquivo attrs.xml da biblioteca.
Observação: os nomes dos atributos da Biblioteca de Suporte
não usam o prefixo android:
. Esse prefixo só é usado em atributos do
framework do Android.
Também há temas diferentes disponíveis na Biblioteca de Suporte que podem ser estendidos, em vez daqueles mostrados acima. 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 temas que você quer usar, será possível adicioná-los ao
seu 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. Exemplo:
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.
Dessa forma, é possível evitar a duplicação de estilos começando com um tema "básico" e
estendendo-o nos estilos específicos da versão.
Por exemplo, para declarar transições de janela para o Android 5.0 (API nível 21) e versões mais recentes, é necessário
usar alguns novos atributos. Assim, o tema básico em res/values/styles.xml
pode ter a seguinte aparência:
<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 seu arquivo de manifesto, e o sistema selecionará
os estilos disponíveis para cada versão do sistema.
Para mais informações sobre o uso de recursos alternativos para dispositivos diferentes, leia Visão geral dos recursos de aplicativo.
Personalizar estilos de widgets
Cada widget na Biblioteca de Suporte e no framework tem um estilo padrão. Por exemplo, quando você
define o estilo do seu app usando um tema da Biblioteca de Suporte, uma instância de Button
é estilizada por
Widget.AppCompat.Button
. Se você quiser aplicar um estilo de widget diferente a
um botão, poderá fazer isso com 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, poderá declará-lo no
buttonStyle
do tema da seguinte forma:
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <item name="buttonStyle">@style/Widget.AppCompat.Button.Borderless</item> ... </style>
Você também pode estender estilos de widgets, bem 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: