Interface de Usuários - Estilos e Temas

Um estilo é uma coleção de propriedades que especificam o visual e formato de uma View ou janela. Um estilo por especificar propriedades como altura, padding, cor de fonte, tamanho da fonte, cor de fundo e muito mais. Um estilo é definido em um recurso XML que é reparado do XML que especifica o layout.

Estilos em Android compartilham uma filosofia similar ao que é o CSS para web design - eles permitem a você separar o design do conteúdo.

Por exemplo, usando um estilo, você pode pegar esse XML de layout...

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

...e torná-lo em algo como isso:

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

Todos os atributos relacionados a estilo foram removidos do XML de layout e colocados em um estilo definido pelo nome CodeFont, que é então aplicado com o atributo style.

Um tema é um estilo aplicado em toda uma atividade ou aplicação, ao invés de apenas em uma View individual (como no exemplo acima). Quando um estilo é aplicado como um tema, cada View na atividade vai ter o estilo aplicado onde for suportao. Por exemplo, você pode aplicar o mesmo estilo CodeFont como um tema para uma atividade e então todo o texto dentro da atividade vai ter uma fonte mono espaçada de cor verde.

Definindo Estilos

Para criar um conjunto de estilos, salve um arquivo XML na pasta res/values dentro do seu projeto. O nome do arquivo XML é arbitrário, mas você deverá usar a extensão .xml e salvá-lo na pasta indicada acima.

O nó raiz do arquivo XML de estilo deverá ser <resources>.

Para cada estilo que você queira criar adicione um elemento <style> ao arquivo com um name que identifique unicamente o estilo. Então adicione elementos <item> para cada propriedade do estilo, com o name que declare a propriedade de estilo e o valor a ser usado. O valor para o <item> pode ser uma string, um código hexadecimal para cor, uma referência para outro recurso ou outro valor dependendo das propriedades do estilo. Aqui está um exemplo de um 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 em um objeto de recurso da aplicação em tempo de compilação, que pode ser referenciada pelo valor do atributo name dentro do elemento <style>. Esse estilo de exemplo pode ser referenciado a partir de um XML de layout usando @style/CodeFont.


O atributo parent dentro do elemento <style> é opcional e especifica o ID de recurso de um outro estilo a partir do qual esse estilo deverá herdar propriedades. Você pode, se quiser, fazer o override de propriedades de estilo.

Lembre-se, um estilo que você quer usar como aplicação ou tema de aplicação é definido no XML da mesma maneira que um estilo para uma View. Um estilo como o que definimos acima pode ser aplicado como estilo para uma View única ou como um tema para uma atividade ou aplicação.

Herança

O atributo parent dentro do elemento <style> permite a você especificar de qual outro estilo seu estilo deverá herdar propriedades. Você pode usar esse atributo para herdar propriedades de um estilo existente e então definir suas próprias propriedades que você quer mudar ou adicionar. Você pode herdar de estilos que você mesmo criou ou de estilos que são definidos na plataforma. Por exemplo, você pode herdar o estilo de aparência padrão do Android para textos e depois modificá-lo:

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

Se você quer herdar de estilos que você definiu pessoalmente, você não precisa usar o atributo parent. Ao invés disso, apenas use o prefixo do nome do estilo de onde deseja que haja a herança, separada por pontos. Por exemplo, para criar um novo estilo que herda do estilo CodeFont mas deseja que a cor das letras sejam vermelhas, você pode criar um novo estilo como abaixo:

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

Note que não existe o atributo parent dentro da tag <style>, mas como o atributo name começa com a palavra CodeFont e este é o nome de um estilo, esse novo estilo herda as propriedades de CodeFont. Então o novo estilo faz um override nas características do texto fazendo-o ficar na cor vermelha. Você pode então referenciar esse novo estilo como @style/CodeFonte.Red.

Você pode continuar fazendo heranças quantas vezes entender ser necessário. Por exemplo, você pode extender CodeFont.Red para ser do format Bigger.

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

Nota: Esse formato de herança em que vamos separando os nomes por pontos só funciona com seus próprios estilos. Não é possível fazer dessa maneira com os estilos padrão do Android.

Propriedades de Estilo

Agora que você entendeu como um estilo é definido, você precisará aprender que tipos de propriedades de estilo - definidas no elemento <item> - estão disponíveis.

O melhor local para encontrar propriedades para aplicar a uma View é a classe de referência da View em específico, que lista todos os atributos XML suportados. Por exemplo, todos os atributos listados na tabela dos atributos de TextView podem ser usados em um estilo de definição para o elemento TextView (ou qualquer de suas subclasses). Como existe um atributo chamado android:inputType na classe de referência, você poderá inserir o atributo android:inputTyle dentro do elemento <EditText>, que é subclasse de TextView:

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

Você pode ao invés disso criar um estilo para o EditText:

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

E então seu XML para o layout precisará apenas implementar o estilo como abaixo:

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

Esse exemplo acima pode parecer que dá mais trabalho, mas verá que, com o tempo, a reutilização de tais estilos dará maior controle sob o estilo de sua aplicação.

Para uma referência de todas as propriedades de estilo disponíveis, vá na referência de R.attr. Tenha em mente que nem todos os objetos View aceitam todos os mesmos atributos de estilo, então você deve sempre observar os estilos de propriedades suportados pela View. Contudo, se você aplicar um estilo a uma View que não a suporta, a View apenas usará os estilos suportados e ignorará todos os outros.

Algumas propriedades de estilo, contudo, não são suportadas por nenhum elemento View e pode ser aplicado apenas como um tema. Essas propriedades de estilo são aplicadas para toda a janela e não para um tipo de View. Por exemplo, propriedades de estilo para um tema podem esconder o título da aplicação, esconder o status bar ou mudar o fundo da janela. Esses tipos de propriedades de estilo não pertencem a nenhum objeto View. Para descobrir mais sobre essas propriedades que são suportadas apenas nos temas, procure pelos atributos que começam com window dentro de R.attr.

No próximo post, falarei sobre como aplicar estilos e temas para a interface.