Android Criando um botão customizado no Android via XML

No Android é possível modificar a aparência de um botão (tamanho, cor, borda, alinhamento etc) via XML. Veja nesse artigo como podemos fazer isso.

Daniel Viana 12 de abril de 2017

Ao adicionarmos um botão no layout pelo Android Studio ele fica com a seguinte aparência:

Mas não quer dizer que devemos utilizá-la em todos os botões do aplicativo. É possível modificá-la (tamanho, cor, borda, alinhamento etc) por meio de arquivos XML. Para entender melhor as propriedades que definem a aparência, vamos criar um botão como o da imagem abaixo:

Para isso, crie um novo arquivo do tipo Drawable Resource File. Basta clicar com o botão direito sobre a pasta drawable > New:

Depois basta definir o nome do arquivo que deseja criar:

Neste caso, criei o arquivo com o nome botao_customizado e implementei o seguinte código:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <corners
        android:radius="5dp"
        />

    <solid
        android:color="@android:color/holo_red_light"
        />

    <stroke
        android:width="2dp"
        android:color="@android:color/background_dark"
        />
</shape>

Primeiro é montado um shape, que define a forma geométrica do botão, neste caso é um retângulo (android:shape="rectangle"). Está propriedade também aceita os valores line, oval e ring que definem outras geometrias para o botão.

Android - Básico
Curso de Android - Básico
CONHEÇA O CURSO

No elemento “ definimos a propriedade android:radius="..." para determinar o valor do arredondamento dos cantos do botão.

O elemento “ determina a cor de fundo do botão por meio da propriedade android:color="..."/&gt;.

E por fim, o elemento “ define a espessura da borda (android:width="...") e a cor para a mesma (android:color="...").

Para que o botão passe a ter esse novo modelo, basta definir o arquivo criado na propriedade android:background="@drawable/botao_customizado" do botão.

Além dos elementos utilizados até agora, temos o elemento “ para definir o fundo do botão com cores formando um gradiente ao invés de utilizar uma cor sólida. Como neste exemplo:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >

    <corners
        android:radius="5dp"
        />

    <stroke
        android:width="2dp"
        android:color="@android:color/background_dark"
        />

    <gradient
        android:startColor="#fff"
        android:endColor="#363636"
        android:angle="45"
        android:centerColor="#FFA500"/>
</shape>

Neste elemento temos as propriedades android:startColor="...", android:endColor="..." e android:centerColor="..." para definir a cor inicial, final e central do gradiente, respectivamente. E também é utilizado a propriedade android:angle="..." que determina o ângulo do gradiente.

Com estes elementos e suas propriedades é possível criar uma infinidade de modelos diferentes para utilizar nos botões.

Android - Intermediário
Curso de Android - Intermediário
CONHEÇA O CURSO

Para automatizar parte do processo de customização de um botão, é possível utilizar o site AngryTools que determina os valores da propriedade e ele vai te mostrando um preview do botão e ao finalizar ele gera os arquivos XML para utilizar. o/

Agora que você conhece um pouco sobre esta customização, faça diversos exemplos, modifique as propriedades e veja a diferença entre elas. Afinal, nada melhor que praticar para aprender!

Um abraço e até a próxima!

Deixe seu comentário

Conheça o autor desse artigo

  • Foto Autor Daniel Viana
    Daniel Viana

    Instrutor, Desenvolvedor Android, Mestrando em Bioinformática pela UFMG, MBA Executivo em Gerenciamento de Projetos pela UCAM, Graduado em Ciência da Computação pela FUNIP, Membro da SBC, ACM e AB3C.

    Posts desse Autor

Artigos relacionados