terça-feira, 8 de maio de 2012

Utilizando Shadow em TextView

Olá Pessoal,


Hoje vou mostrar como utilizar sombra (shadow) em nossos textviews, esse é um recusro muito interessante na questão visual principalmente por evitar utilizar uma imagem somente para criar um visual mais elaborado em nossos aplicativos.

Antes já vou explicar os principais atributos da sombra (shadow):

android:shadowColor - cor que será utilizada na sombra.

android:shadowDx - define a posição horizontal da sombra, informando um valor negativo a sombra será alinhada a esquerda, informando um valor positivo a sombra será alinha a direita.

android:shadowDy - define a posição vertical da sombra, informando um valor negativo a sombra será alinhada para baixo, informando um valor positivo a sombra será alinha para cima.

android:shadowRadius - define o grau do esfumaçado da sombra, quanto maior o número mais esfumaçado será a sombra.


Abaixo seguem alguns exemplos de sombra.

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

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="3" />  

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="3" />              
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - baixo esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="3" />      
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="0" />         

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior esquerda"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="-3"
        android:shadowDy="-3" /> 
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="-3" />     

    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - superior direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="-3" />         
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - direita"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="1" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="0" />     
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - centro"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="3" 
        android:shadowColor="#F13000"        
        android:shadowDx="0"
        android:shadowDy="0" />     
        
    <TextView 
        android:layout_marginTop="15dp"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Escola de Android - simples"
        android:textColor="#000000" 
        android:textSize="18sp" 
        android:shadowRadius="0.01" 
        android:shadowColor="#F13000"        
        android:shadowDx="3"
        android:shadowDy="3" />     
    
</LinearLayout>


Abaixo segue o resultado de nosso teste:
Shadow

Por enquanto é isso pessoal, com mais essa técnica podemos melhorar ainda nossas interfaces com o usuário e com isso criar aplicativos de maior qualidade.


Desenvolvi o jogo Circus Puzzle Free ele é um quebra-cabeça e está publicado no Android Market, agradeço a todos que baixarem, jogarem e comentarem.



Desenv com qualidade!

Nenhum comentário: