quinta-feira, 28 de maio de 2015

Botões e Edits com bordas arredondas em Android

Para criar botões e campos de edição com bordas arredondadas no Android, devemos fazer o seguinte.
Primeiro precisamos criar o arquivo de layout do nosso exemplo que deverá chamar exemplo_tela.xml que ficará na pasta /res/layout:

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

‹TextView
     android:id="@+id/textView1"
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:text="Nome" / ›

‹EditText
     android:id="@+id/editText1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:ems="10" ›
   ‹requestFocus / ›
‹/EditText ›

‹Button
    android:id="@+id/button1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
    android:text="Pesquisar" / ›

‹/LinearLayout ›


Depois vamos criar o arquivo  responsável por realizar o efeito arredondado nos componentes que desejamos. O nome dele será  borda_arredondada.xml. Este arquivo deverá ficar na pasta  /res/drawable

‹shape xmlns:android="http://schemas.android.com/apk/res/android"    android:padding="10dp"
   android:shape="rectangle" ›

   ‹solid android:color="#8B008B" / ›

   ‹corners
       android:bottomLeftRadius="10dp"
       android:bottomRightRadius="10dp"
       android:topLeftRadius="10dp"
       android:topRightRadius="10dp" / ›

‹/shape ›

A tag shape  é usada para definir a forma que se quer aplicar no componente, no nosso exemplo definimos uma forma bem simples que foi rectangle.

A tag solid  é usada para definir as propriedades do componente como a cor de fundo, cor da fonte, etc.

A tag corners  é tag que define a propriedades do cantos do componente, é essa tag que irá de fato aplicar as bordas arredondadas.

Para aplicarmos de fato o efeito arredondado nos componentes que queremos basta adicionar o atributo background no componente que queremos, como mostra a linha verde marcada.

‹Button
    android:id="@+id/button1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="15dp"
    android:layout_marginRight="15dp"
   android:background="@drawable/borda_arredondada"  
    android:text="Pesquisar" / ›