Android - Shape

Olá Pessoal,


Hoje vou apresentar alguns exemplo de utilização de shape esse que é o recurso responsável por criar efeitos gradientes, cantos arredondados entre outros em nosso componentes.

Para criar um shape devemos primeiro criar a pasta drawable dentro da pasta res.

Para esse projeto irei criar um shape para cada componente (LinearLayout, Button, TextView e TextView2).

Abaixo segue um print da estrutura do projeto.

Imagem utilizada de background do layout lunai.png:

Abaixo seguem todos os arquivos utilizados.

Arquivo shapebutton.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
    <gradient
        android:startColor="#FFFAFA"
        android:endColor="#00008B"
        android:angle="270" />
    
    <stroke
        android:width="2dp"
        android:color="#ffffff" />
    
    <corners
        android:radius="50dp" />
    
    <padding
        android:left="15dp"
        android:top="15dp"
        android:right="15dp"
        android:bottom="15dp" />
    
</shape>

Arquivo shapelinear.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    
    <gradient 
         android:startColor="#DDff0000" 
         android:endColor="#DDFFA500"
         android:angle="0"/> 
 
    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp"     
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/>
</shape>

Arquivo shapetextview.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
     
    <solid android:color="#551A8B" /> 
    
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
 
    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp"     
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/>
</shape>

Arquivo shapetextview2.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
     
    <solid android:color="#80000000" /> 
    
    <padding
        android:bottom="4dp"
        android:left="4dp"
        android:right="4dp"
        android:top="4dp" />
 
    <corners 
        android:bottomRightRadius="7dp" 
        android:bottomLeftRadius="7dp"     
        android:topLeftRadius="7dp" 
        android:topRightRadius="7dp"/>
</shape>

Arquivo main.xml

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

    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="20dp"
        android:background="@drawable/shapelinear"
        android:orientation="vertical" >

        <TextView
            android:id="@+id/textView1"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="TextView com fundo cheio"
            android:background="@drawable/shapetextview"
            android:textAppearance="?android:attr/textAppearanceLarge" />

        <Button
            android:id="@+id/button1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:text="Botão Padrão 1" />

        <Button
            android:id="@+id/button2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:text="Botão Padrão 2" />

    </LinearLayout>

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/linearLayout1"
        android:layout_below="@+id/linearLayout1"
        android:background="@drawable/shapebutton"
        android:layout_marginTop="20dp"
        android:text="Botão com fundo gradiente e borda branca" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/linearLayout1"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="20dp"
        android:background="@drawable/shapetextview2"
        android:text="textview com fundo transparente"
        android:textColor="@android:color/white" />

</RelativeLayout>

Abaixo segue uma imagem com o resultado do layout.

Agora uma breve explicação sobre os principais atributos de um shape:

Stroke = desenha uma borda sobre o componente
Corners = define os canots arredondados
Solid = define a cor de fundo do componente

Por enquanto é isso pessoal, com esses exemplos passados já podemos criar projetos mais elegantes.

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!