terça-feira, 27 de julho de 2010

Utilização de Estilos no Android - Parte 1

Olá povo,

Aqui vai mais um post sobre UI com Android. Vou falar um pouco sobre como modificar a aparência dos componentes do Android utilizando estilos, similares aos CSS que encontramos no HTML.

Dentro da pasta res de um projeto Android, ficam os arquivos de recursos. As subpastas drawable (imagens), layout (arquivos de definição de tela) e values (textos ou strings) são figurinhas fáceis em qualquer projeto. No entanto, nos arquivos que ficam dentro da pasta values (que não necessariamente precisa se chamar strings.xml) podemos definir também cores, estilos e temas para serem aplicados nas telas do nosso programa. Isso ajuda em futuras manutenções que você queira fazer no visual do seu aplicativo, uma vez que todas as telas estarão referenciando um local centralizado.

Vamos dar uma olhada no nosso arquivo res/values/meurecurso.xml


<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Strings -->
<string name="msg_verde_e_branco">
Texto verde e branco
</string>

<string name="msg_vermelho_e_branco">
Texto vermelho e branco
</string>

<!-- Cores -->
<color name="vermelho">#FF0000</color>
<color name="verde">#00FF00</color>
<color name="branco">#FFFFFF</color>

<!-- Estilo -->
<style name="estiloExemplo">
<item name="android:textSize">16dp</item>
<item name="android:textColor">
@color/branco
</item>
<item name="android:background">
@color/vermelho
</item>
<item name="android:textStyle">italic</item>
</style>
</resources>


Notem que com a tag <color> atribuimos um nome ao valor da cor em hexadecimal no formato AARRGGBB. Já o estilo, é uma combinação de propriedades e valores para a mesma que serão aplicados de uma vez a um componente. No nosso caso, foram as propriedades: textSize, textColor, textStyle e background.

Agora é só utilizarmos esses carinhas no nosso arquivo de layout como abaixo.


<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">

<TextView
android:layout_height="wrap_content"
android:layout_width="fill_parent"
android:text="@string/msg_verde_e_branco"
android:background="@color/verde"
android:textColor="@color/branco"
android:textStyle="bold" />

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/msg_vermelho_e_branco"
style="@style/estiloExemplo" />
</LinearLayout>


O resultado, ficará como na imagem abaixo;



Notem que o primeiro TextField utiliza individualmente as cores que definimos no nosso arquivo de valores. Enquanto que o segundo, aplica várias propriedades de uma vez através da propriedade style.

4br4ços,
nglauber

4 comentários:

Unknown disse...

Olá Professor,

Tem como alterar o estilo de fonte do título da action bar?

Nelson Glauber disse...

Oi Wellington,

Essa solução parece funcionar... Dá uma olhada.
http://www.tristanwaddington.com/2013/03/styling-the-android-action-bar-with-a-custom-font/

4br4ç05,
nglauber

opoetaeasolidao disse...

Olá professor!
Tem como justificar texto do textview com esse estilo?

Nelson Glauber disse...

Olá opoetasolidao,

O TextView nativo não dá esse suporte. Mas você pode utilizar esse componente aqui: https://github.com/bluejamesbond/TextJustify-Android.

4br4ç05,
nglauber