Button com efeito no background XML

Button com efeito no background XML

Nesse tutorial vou descrever como fazer Button com efeito no background XML para que assim você faça um botão com efeito.

Primeiramente vamos criar um projeto vazio(Empty) para fazer as mudanças e criar um botão com efeito no clique.

Se você não sabe como criar um projeto vazio então veja o tutorial Como criar um projeto no Android Studio.

Logo depois de criar um projeto vazio vamos criar um background para o nosso botão com o nome de button_background.

Se você não sabe como criar um background então veja o tutorial Como criar um Background no Android Studio.

Vamos deixa o código do nosso arquivo de background como o seguinte.

button_background

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <gradient android:type="radial"
               android:gradientRadius="700"
               android:startColor="#333"
               android:endColor="#FFF" />
            <stroke android:width="5px" android:color="#797575"/>
            <corners android:radius="20dp"/>
        </shape>
    </item>
</selector>

Logo depois de criar e editar o arquivo de background vamos então editar a nossa activity_main e modificar apenas TextView do Hello World! para virar um Button e inserir o background e o efeito de seleção.

O código do nosso layout deve estar assim como o seguinte.

activity_main

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        android:textColor="#FFF"
        android:padding="30dp"
        android:foreground="?android:attr/selectableItemBackground"
        android:theme="@android:style/ThemeOverlay.Material.Dark"
        android:background="@drawable/button_background"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Vamos então compilar e executar o projeto para ver como fica o Button.

Button com efeito no background XML
Button

Enfim espero poder ter ajudado com mais este tutorial sobre como fazer Button com efeito no background XML.

Veja também os vídeos em:

Ainda assim se estiver com alguma dúvida entre em nosso canal no telegram clicando no link abaixo.




Rodrigo Leutz
Desenvolvedor Web e Android ( Kotlin e Java )