Criando um botão customizado no Android via XML

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.

Curso React Native - Componentes nativos

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.

Curso Kotlin - Fundamentos

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!