Para este exemplo criei um projeto com dois botões com cor em degradê como demonstrado na Figura 1.
Figura 1
Para montar o layout dois dois botões foi utilizado o seguinte código no arquivo main.xml (Listagem 1):
Listagem 1:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
<!-- View utilizada como separador -->
<View
android:layout_width="fill_parent"
android:layout_height="10sp"
android:id="@+id/view1"
/>
<Button
android:id="@+id/btnJpg"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/view1"
android:text="Design por Figura Jpg"
android:background="@drawable/botao_azul_selector"
/>
<!-- View utilizada como separador -->
<View
android:layout_width="fill_parent"
android:layout_height="10sp"
android:id="@+id/view2"
android:layout_below="@+id/btnJpg"
/>
<Button
android:id="@+id/btnXml"
android:layout_width="200dp"
android:layout_height="50dp"
android:layout_centerHorizontal="true"
android:layout_below="@+id/view2"
android:text="Design por Arquivo Xml"
android:background="@drawable/botao_verde_selector"
/>
</RelativeLayout>
No primeiro botão btnJpg foi utilizado como cor de fundo duas figuras em degradê uma para quando o botão for pressionado e outra para quando o botão for solto. É necessário utilizar duas figuras para dar o efeito dinâmico do botão estar sendo pressionado.
Para configurar este efeito utilizei um recurso chamado de StateListDrawable que é um arquivo xml onde podemos configurar figuras diferentes para cada estado, por exemplo de um botão.
Este arquivo xml deve ser colocado em um diretório \drawable. O arquivo para configurar o primeiro botão é o botão_azul_selector (Listagem 2), configurado no atributo android:background="@drawable/botao_azul_selector".
Listagem 2:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:state_pressed="true"
android:drawable="@drawable/botao_azul_on"
/>
<item
android:drawable="@drawable/botao_azul_off"
/>
</selector>
No estado android:state_pressed foi utilizada a figura botao_azul_on para representar o botão quando pressionado e a figura botao_azul_off para representar o botão no estado não pressionado. As figuras do botão devem estar em um diretório \drawable.
No segundo botão btnXml foi utilizada uma outra técnica de configurar a cor de fundo do botão. O princípio é o mesmo, foi utilizado um arquivo Xml para configurar a aparência do botão em cada um dos estados (pressionado ou não), só que desta vez ao invés de utilizar figuras .jpg, foram utilizadas tags para construir a forma geométrica do botão. O arquivo botao_verde_selector também deve ser colocado em um diretório \drawable (Listagem 3):
Listagem 3:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true" >
<shape>
<gradient
android:startColor="@color/verde_claro"
android:endColor="@color/verde_escuro"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/verde_escuro" />
<corners
android:radius="10dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
<item>
<shape>
<gradient
android:startColor="@color/verde_escuro"
android:endColor="@color/verde_claro"
android:angle="270" />
<stroke
android:width="1dp"
android:color="@color/verde_escuro" />
<corners
android:radius="10dp" />
<padding
android:left="10dp"
android:top="10dp"
android:right="10dp"
android:bottom="10dp" />
</shape>
</item>
</selector>
A aparência do botão verde é construída através da tag de forma <shape> cujo default é o retângulo. Dentro desta tag temos a tag <gradient> que define a cor degradê, a tag <stroke> que define a largura e a cor do contorno do botão, a tag <corners> que define o ângulo da borda arredondada do nosso botão e a tag <padding> que define o posicionamento do conteúdo e não da forma geométrica do botão.
Observe que foram criadas duas tags <item>, uma para o estado pressionado do botão e outra para o estado default do botão.
Para rodar a aplicação foi criada a Activity Principal (Listagem 4):
Listagem 4:
public class Principal extends Activity {
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
}
}
