Alterando os Estilos de seu App

O ambiente de desenvolvimento do Android nos oferece a possibilidade de edição

direta de atributos de aparência dos objetos, bem como a opção de definirmos folhas de
estilos a serem aplicadas na aplicação. Este tutorial apresenta ambos os casos tomando por
base a aplicação desenvolvida no curso e o ambiente Android Studio.

Introdução
A documentação do Android, disponível em http://developer.android.com/intl/pt-
br/guide/topics/ui/themes.html, define um estilo como sendo uma “coleção de propriedades
que especificam o visual e o formato de um dado View ou Window”. Neste ponto é bom
lembrarmos que todos os widgets (botões, campos de texto e afins) que utilizamos nos
fragmentos são Views, como pode ser percebido em:

btnGuess = (Button) rootView.findViewById(R.id.btnGuess);

Ou ainda, de forma mais poderosa:

View rootView = inflater.inflate(R.layout.fragment_number_guess_game,

container, false);

Desta forma, os recursos de estilo do Android se aplicam a todos os componentes que

utilizados do curso. Além disso, a documentação demonstra que os estilos podem ser
utilizados diretamente em um elemento, por meio do XML que o define, ou por meio da
referência a um arquivo XML externo que contenha as mesmas definições.

A documentação também faz referência aos Temas, que nada mais são do que uma coleção de
estilos.

Por fim, ela também introduz o conceito de herança de estilos, a qual funciona de maneira
similar à herança de objetos em Java, isto é, permitindo a criação de um objeto (estilo) filho
que defina ou redefina apenas um conjunto de propriedades, delegando aquelas que não
foram alteradas para a definição presente no estilo pai. Vale salientar que a herança possui
múltiplos níveis e que caso nenhum dos estilos da cadeia hereditária definam a propriedade o
Android utilizará o valor padrão presente nas configurações do sistema.
Método 1: Alterando Propriedades de um Elemento
Podemos definir as propriedades de estilo de um elemento, um botão por exemplo, alterando
os valores configurados na tela de Design do Android Studio ou mesmo editando o XML do
fragmento no qual o elemento está inserido.

Esse método foi utilizado durante o curso para definir a cor do botão de gravação (“R”) do
Painel de Sons para vermelho. Assim, basta fazer a alteração conforme exibido na tela:

Acessado o modo de edição, podemos ver a definição no arquivo XML do fragmento:

<Button
android:text="R"
android:id="@+id/button_R"
android:layout_column="1"
android:layout_row="1"
android:textColor="#ff0000"
android:longClickable="true"/>

Outras propriedades imediatamente disponíveis são o tamanho do texto (textSize) e a fonte

(typeface). O conjunto completo, bem como as definições de todas as propriedades possíveis
pode ser consultado em:

http://developer.android.com/intl/pt-br/reference/android/R.attr.html
Assim, adicionando a linha em negrito no XML no fragmento principal de nossa MainActivity:

<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
android:paddingBottom="@dimen/activity_vertical_margin"
tools:context="curso.android.MainActivity$PlaceholderFragment"
android:background="@color/gray">

Teremos o seguinte resultado:

Note que o editor, o qual processa o XML para gerar a visualização, já disponibiliza a
propriedade atualizada.

Método 2: Criando um Arquivo de Estilos (Tema)

O arquivo de estilos nada mais é, portanto, que um XML que:

1. É salvo dentro do diretório /res/values

2. Define o elemento <style> com as propriedades relevantes

Nossa aplicação já foi criada com um arquivo padrão chamado styles.xml e que possui o
seguinte conteúdo:

<resources>
 <style name="AppTheme"
parent="android:Theme.Holo.Light.DarkActionBar">
</style>
</resources>

O uso deste tema é definido no manifesto da aplicação:

android:theme="@style/AppTheme"
Apesar de “vazio” este é o arquivo que define o estilo e as propriedades atuais de nossa
aplicação. O segredo aqui está justamente na herança, definida no elemento <style> pelo
atributo parente. Assim, nosso estilo padrão injeta os valores definidos no tema de sistema
“android:Theme.Holo.Light.DarkActionBar” sempre que lhe é requisitada uma
propriedade não declarada. Podemos confirmar este comportamento editando o arquivo para:

<style name="AppTheme"
parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:textColor">#00FF00</item>
</style>

O que resultará no seguinte comportamento:

Note, porém, que o texto dos botões não mudou de cor. Isso se deve ao botão ser um View
composto e haver injeção de outro estilo na herança. Podemos aplicar o estilo diretamente no
botão, o que fará com que o texto mude para verde:
Outro exemplo, desta vez utilizando estilos compostos pode ser utilizado para alterar a cor da
ActionBar:

<resources>

<style name="AppTheme"
parent="android:Theme.Holo.Light.DarkActionBar">
<item name="android:textColor">#00FF00</item>
<item name="android:actionBarStyle">@style/MyActionBar</item>
</style>

<style name="MyActionBar"
parent="@android:style/Widget.Holo.Light.ActionBar">
<item name="android:background">#C1000E</item>
</style>

</resources>
Bônus: Usando Drawables

O Android oferece uma interface geral, Drawable, com algumas implementações diferentes
que permitem a renderização personalizada de elementos da tela, como botões. As opções de
Drawable estão documentadas em:

http://developer.android.com/intl/pt-
br/guide/topics/resources/drawable-resource.html

Tomando um ShapeDrawable como exemplo podemos reimplementar a exibição de um dos

botões. Para isso precisaremos:

1. De um arquivo de Shape. Um XML com as especificações do objeto a ser desenhado

na tela.
2. Mapear o uso do arquivo de Shape no botão por meio de um estilo.

Podemos obter um arquivo de Shape configurado conforme nossa preferência no Android

Button Maker, http://angrytools.com/android/button/. Assim, por exemplo:

<?xml version="1.0" encoding="utf-8"?>

<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<corners
android:radius="14dp"
/>
<gradient
android:angle="45"
android:centerX="35%"
android:centerColor="#7995A8"
android:startColor="#E8E8E8"
android:endColor="#000000"
android:type="linear"
/>
<padding
android:left="0dp"
android:top="0dp"
android:right="0dp"
android:bottom="0dp"
/>
<size
android:width="270dp"
android:height="60dp"
/>
<stroke
android:width="3dp"
android:color="#878787"
/>
</shape>

Drawables devem ser salvos em /res/drawables, no caso buttonshape.xml

Depois basta configurar o background de um botão para utilizar o novo Drawable: