A documentação do Android, disponível em

Transcrição

1 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 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.

2 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:

3 Assim, adicionando a linha em negrito no XML no fragmento principal de nossa MainActivity: <RelativeLayout xmlns:android=" xmlns: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>

4 <style name="apptheme" parent="android:theme.holo.light.darkactionbar"> </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> 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:

5 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 name="myactionbar" parent="@android:style/widget.holo.light.actionbar"> <item name="android:background">#c1000e</item> </resources>

6 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: 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, Assim, por exemplo: <?xml version="1.0" encoding="utf-8"?> <shape xmlns: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:

7