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
Delphi 10 Seattle Básico
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
React Native - 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!
