Os estilos e temas no Android permitem separar os detalhes do design do app da interface estrutura e comportamento, semelhantes às folhas de estilo no 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 um app, uma atividade ou uma visualização inteira. e não apenas uma visualização individual. Quando você aplica um tema, todas as visualizações no app ou 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 uma
arquivo de recurso de estilo no
res/values/
, geralmente chamado de styles.xml
.
![](https://developer.android.google.cn/static/training/material/images/material-themes_2x.png?authuser=9&hl=pt)
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 finalidades diferentes. Temas e 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 pode ser definido em no arquivo de layout. A extração de todos os atributos de 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
, ao Android
do Google Cloud.
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 parte é
colorSecondary
. As definições reais dessas cores são fornecidas no tema. Quando
o dispositivo entrar no modo noturno, seu aplicativo poderá sair do modo "luz" para o "escuro", tema
alterando os valores de todos esses nomes de recursos. Não é preciso alterar os estilos, pois o
Os estilos usam os nomes semânticos, e não definições de cores específicas.
Para mais informações sobre como os temas e estilos funcionam juntos, confira a postagem do blog Estilo do Android: temas x estilos.
Criar e aplicar um estilo
Para criar um novo estilo, abra o arquivo res/values/styles.xml
do projeto. Para
cada estilo que quiser 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. A Oname
em cada item especifica um atributo que você usa como um atributo XML na sua o mesmo layout organizacional. 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 à 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 aplicar estilos como tema a todo o app, atividade ou coleção de visualizações, como descrito em outra seção deste guia.
Estender e personalizar um estilo
Ao criar seus próprios estilos, sempre estenda um estilo existente na estrutura ou no Suporte
Biblioteca para manter a compatibilidade com os estilos de interface da plataforma. Para estender um estilo, especifique
o estilo que você quer estender com o atributo parent
. É possível modificar o modelo
style e adicione novos.
Por exemplo, você pode herdar a aparência de texto padrão da plataforma Android e modificá-la como da seguinte forma:
<style name="GreenText" parent="@android:style/TextAppearance"> <item name="android:textColor">#00FF00</item> </style>
No entanto, sempre herdam os principais estilos de app da Biblioteca de Suporte do Android. Os estilos na
A Biblioteca de Suporte oferece compatibilidade otimizando cada estilo para os atributos de IU disponíveis no
cada versão. Os estilos da Biblioteca de Suporte geralmente têm um nome semelhante ao da plataforma,
mas com AppCompat
incluído.
Para herdar estilos de uma biblioteca ou seu próprio projeto, declare o nome do estilo pai
sem a parte @android:style/
mostrada no exemplo anterior. Por exemplo:
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>
Você também pode herdar estilos, exceto os da plataforma, estendendo a propriedade
com uma notação de ponto, em vez de usar o atributo parent
. Ou seja, usar o prefixo
nome do seu estilo pelo nome do estilo que você deseja herdar, separado por um ponto. Você
isso normalmente só é feito ao ampliar os seus próprios estilos, e não os estilos de outras bibliotecas. Por exemplo:
o estilo abaixo herda todos os estilos de GreenText
no exemplo anterior
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 de domínio.
Para descobrir quais atributos podem ser declarados com uma tag <item>
, consulte a documentação
atributos" nas várias referências de classe. Suporte a todas as visualizações
Atributos XML da base
View
, e muitas visualizações adicionam os próprios atributos especiais. Por exemplo, o
Atributos XML TextView
incluem o parâmetro
android:inputType
atributo 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, você aplica um tema com
o atributo android:theme
na tag <application>
ou em uma
Tag <activity>
no arquivo AndroidManifest.xml
.
Por exemplo, confira como aplicar o "escuro" do Material Design da Biblioteca de Suporte do Android. o tema para o 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>
Cada visualização no app ou na atividade aplica os estilos com suporte daqueles definidos na em um determinado tema. Se uma visualização for compatível com apenas alguns dos atributos declarados no estilo, ela será aplicada. somente esses atributos e ignora os que não forem 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
a uma visualização no arquivo de layout. Isso modifica o tema para
essa visualização e as visualizações filhas, o que é útil para alterar as paletas de cores do tema em um ambiente
da interface.
Os exemplos anteriores mostram como aplicar um tema como Theme.AppCompat
, que é
fornecidos pela Biblioteca de Suporte do Android. No entanto, você normalmente quer personalizar o tema para caber
a marca do seu app. A melhor maneira de fazer isso é estender esses estilos da Biblioteca de Suporte e
substituir 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 ou até mesmo definir atributos de maneira 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 possível de temas e estilos para manter a consistência. Se você especificar os mesmos atributos vários lugares, a lista a seguir determina quais atributos serão aplicados. A lista é em ordem decrescente de prioridade.
- Aplicar um estilo no nível do caractere ou do parágrafo usando períodos de texto para derivações de
TextView
classes. - Aplicar atributos de maneira 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 o app inteiro.
- Aplicar um estilo específico de visualização, como definir uma
TextAppearance
em umTextView
.
![](https://developer.android.google.cn/static/guide/topics/ui/images/text-multiple-styles.png?authuser=9&hl=pt)
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
. Em um
TextView
, mas também é possível especificar
Atributo TextAppearance
que funciona de maneira semelhante a um estilo, como mostrado no exemplo a seguir:
<TextView ... android:textAppearance="@android:style/TextAppearance.Material.Headline" android:text="This text is styled via textAppearance!" />
A TextAppearance
permite definir um estilo específico para o texto, deixando o estilo de uma
View
disponível para outros usos. No entanto, se você definir qualquer atributo de texto
diretamente no View
ou em um estilo, esses valores substituem
TextAppearance
.
TextAppearance
oferece suporte a um subconjunto de atributos de estilo que TextView
de produtos Google. 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 em nível de caractere, e não de parágrafo, então
atributos que afetam todo o layout não são compatíveis.
Personalizar o tema padrão
Quando você cria um projeto com o Android Studio, ele aplica um tema do Material Design ao app ao
padrão, conforme definido no arquivo styles.xml
do projeto. Este estilo AppTheme
estende um tema da Biblioteca de Suporte e inclui substituições para os atributos de cor que são usados
pelos principais elementos da interface, como a barra de apps e a
botão de ação flutuante, se usado. Então, você precisa
pode personalizar rapidamente o design de cores do app atualizando as cores fornecidas.
Por exemplo, seu arquivo styles.xml
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 outras
recursos de cor, definidos no
arquivo res/values/colors.xml
do projeto. Esse é o arquivo que você vai editar para mudar as cores.
Consulte a
Visão geral de cores do Material Design
para melhorar a experiência do usuário com cores dinâmicas e cores personalizadas adicionais.
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 atividade cor de fundo 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 você pode usar 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 consultando "Atributos XML"
nas referências da classe de visualização. Por exemplo, todas as visualizações oferecem suporte
Atributos XML da base View
classe.
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
Os R.styleable.Theme
se aplicam à
janela de atividade, não as visualizações no layout. Por exemplo, windowBackground
muda a
plano de fundo da janela e windowEnterTransition
define uma animação de transição a ser usada quando
a atividade será 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.
estendida de Theme.AppCompat
, como o atributo colorPrimary
mostrado em
no exemplo anterior. Eles são mais bem visualizados nas
arquivo attrs.xml
da biblioteca.
Também há temas diferentes disponíveis na Biblioteca de Suporte que podem ser estendidos
em vez dos mostrados no exemplo anterior. O melhor lugar para ver os temas disponíveis é
as
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 seu tema.
e ainda são compatíveis com versões antigas. Você só precisa de mais um arquivo styles.xml
salva em um diretório values
que inclui o
versão do recurso
qualificador:
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 você pode evitar
duplicar estilos começando com uma "base" e, em seguida, ampliá-lo nas configurações
estilos.
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
para usar novos atributos. Então, o tema base em res/values/styles.xml
pode ficar assim:
isso:
<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 mais informações sobre como usar recursos alternativos para dispositivos diferentes, consulte Fornecimento de recursos alternativos.
Personalizar estilos de widgets
Cada widget no framework e na Biblioteca de Suporte tem um estilo padrão. Por exemplo, quando você
definir o estilo do seu aplicativo usando um tema da Biblioteca de Suporte, uma instância do
Button
é estilizado usando o
Widget.AppCompat.Button
. Se você deseja aplicar um estilo de widget diferente a um
é possível fazer isso com o atributo style
no seu arquivo de layout. Por exemplo, o
a seguir aplica o estilo de botão sem borda da biblioteca:
<Button style="@style/Widget.AppCompat.Button.Borderless" ... />
Se quiser aplicar esse estilo a todos os botões, declare-o no arquivo
buttonStyle
da seguinte maneira:
<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, assim como estender qualquer outro estilo, e aplicar o estilo de widget personalizado ao layout ou tema.
Outros recursos
Para saber mais sobre temas e estilos, consulte os seguintes recursos extras:
Postagens do blog
- Estilo do Android: temas x estilos
- Estilo do Android: atributos de tema comuns
- Estilo do Android: dar preferência a atributos de tema