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.

mais de 5 anos atrás

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.

React Native - Armazenamento de arquivos com Firebase Storage
Curso React Native - Armazenamento de arquivos com Firebase Storage
Conhecer 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="..."/>.

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 - Utilizando Broadcast Receivers nas aplicações
Curso Android - Utilizando Broadcast Receivers nas aplicações
Conhecer 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!

Autor(a) do artigo

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.

Todos os artigos

Artigos relacionados Ver todos