Estilos / Temas / Botões Personalizados / Botão Flutuante

O SDK do Android fornece estilos e temas definidos para ser usado em um app. Quando um projeto na IDE é criado um tema já é disponibilizado, mas o desenvolvedor pode optar também criar ou personalizar seus próprios estilos e temas.

Exemplos práticos (Estilos e Temas)

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="colorBackground">#F0F0F0</color>
    <color name="colorText">#333333</color>
    <color name="colorPrimary">#E91E63</color>
    <color name="colorPrimaryDark">#4CAF50</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorHintText">#888888</color>
</resources>

edittext_bg.xml (coloque no diretório drawable)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/white"/>
    <corners android:radius="8dp"/>
    <stroke android:color="@color/colorPrimary"
        android:width="2dp"/>
</shape>

themes.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.ExemploTemasEstilos" parent="Theme.Material3.DayNight.NoActionBar">
        <!-- Customize your light theme here. -->
        <item name="android:background">@color/colorBackground</item>
        <item name="android:textColor">@color/colorText</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="Theme.ExemploTemasEstilos" parent="Base.Theme.ExemploTemasEstilos" />
    <style name="CustomTextView" parent="TextAppearance.AppCompat">
        <item name="android:textColor">@color/colorText</item>
        <item name="android:textSize">18sp</item>
        <item name="android:fontFamily">sans-serif</item>
    </style>
    <style name="CustomButton" parent="Widget.AppCompat.Button.Colored">
        <item name="android:background">@color/colorPrimary</item>
        <item name="android:textColor">#FFFFFF</item>
        <item name="android:textSize">16sp</item>
        <item name="android:paddingLeft">16dp</item>
        <item name="android:paddingRight">16dp</item>
    </style>
    <style name="CustomEditText" parent="Widget.AppCompat.EditText">
        <item name="android:background">@drawable/edittext_bg</item>
        <item name="android:textColor">@color/colorText</item>
        <item name="android:hint">@color/colorHintText</item>
        <item name="android:paddingLeft">12dp</item>
        <item name="android:paddingRight">12dp</item>
    </style>
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="16dp"
    android:background="@color/colorBackground">
    <TextView
        android:id="@+id/textView"
        style="@style/CustomTextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Olá, Android!"
        android:layout_marginBottom="24dp"/>
    <EditText
        android:id="@+id/editText"
        style="@style/CustomEditText"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:paddingTop="20dp"
        android:hint="Digite algo..."/>
    <Button
        android:id="@+id/button"
        style="@style/CustomButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Clique aqui"/>
</LinearLayout>

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.TextView;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    private TextView textView;
    private EditText editText;
    private Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        textView = findViewById(R.id.textView);
        editText = findViewById(R.id.editText);
        button = findViewById(R.id.button);
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                textView.setText(editText.getText().toString());
            }
        });
    }
}

Você pode aproveitar os recursos de estilização para personalizar as formas dos Buttons.

Exemplos práticos (Botões Personalizados)

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="black">#FF000000</color>
    <color name="white">#FFFFFFFF</color>
    <color name="colorBackground">#F0F0F0</color>
    <color name="colorText">#333333</color>
    <color name="colorPrimary">#E91E63</color>
    <color name="colorPrimaryDark">#4CAF50</color>
    <color name="colorAccent">#03DAC5</color>
    <color name="colorHintText">#888888</color>
</resources>

button_custom.xml (coloque no diretório drawable)

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/colorAccent"/>
    <corners android:radius="30dp"/>
    <stroke android:color="@color/colorPrimaryDark"
        android:width="2dp"/>
</shape>

theme.xml

<resources xmlns:tools="http://schemas.android.com/tools">
    <!-- Base application theme. -->
    <style name="Base.Theme.ExemploTemasEstilos"
        parent="Theme.AppCompat.Light.NoActionBar">
    </style>
    <style name="Theme.ExemploTemasEstilos" parent="Base.Theme.ExemploTemasEstilos" />
</resources>

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    android:padding="16dp">
    <Button
        android:id="@+id/buttonOval"
        android:layout_width="200dp"
        android:layout_height="60dp"
        android:text="Clique aqui"
        android:textColor="#FFFFFF"
        android:textSize="18sp"
        android:background="@drawable/button_custom"
        android:layout_marginBottom="24dp"/>
</LinearLayout>

MainActivity.java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity {
    private Button buttonOval;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        buttonOval = findViewById(R.id.buttonOval);
        buttonOval.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Botão oval clicado!", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Segundo a Google Developers (2025), "um botão de ação flutuante (FAB, na sigla em inglês) é um botão circular que aciona a ação principal na IU do seu app."

Ainda, de acordo com a Google Developers (2025), "Os botões de ação flutuantes são usados para um tipo especial de ação promovida. Eles são diferenciados por um ícone circulado flutuando acima da IU e têm comportamentos de movimento especiais relacionados à transformação, lançamento e transferência do ponto de ancoragem."

Referências do texto entre aspas:

GOOGLE DEVELOPERS. Adicionar um botão flutuante. Disponível em: https://developer.android.com/guide/topics/ui/floating-action-button?hl=pt-br. Acesso em: 14 jul. 2025.
GOOGLE DEVELOPERS.FloatingActionButton. Disponível em: https://developer.android.com/reference/com/google/android/material/floatingactionbutton/FloatingActionButton?hl=pt-br. Acesso em: 14 jul. 2025.

Adicionar o botão flutuante em seu projeto, é uma tarefa simples. Para adicionar a tag <com.google.android.material.floatingactionbutton.FloatingActionButton /> juntamente com alguns atributos no arquivo de xml de layout. E depois usar a classe FloatingActionButton em uma classe .java.

Exemplos práticos (Botão Flutuante)

activity_main.xml

<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">
   <com.google.android.material.floatingactionbutton.FloatingActionButton
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_margin="16dp"
       android:id="@+id/fab"
       android:src="@android:drawable/ic_dialog_email"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintLeft_toLeftOf="parent"
       app:layout_constraintRight_toRightOf="parent"
       app:layout_constraintTop_toTopOf="parent"
       />
</androidx.constraintlayout.widget.ConstraintLayout>

MainActivity.java

import androidx.appcompat.app.AppCompatActivity;
import android.content.Intent;
import android.os.Bundle;
import android.provider.MediaStore;
import android.view.View;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
import com.google.android.material.snackbar.Snackbar;
public class MainActivity extends AppCompatActivity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
       FloatingActionButton fab = findViewById(R.id.fab);  //conversão do xml para o tipo de classe
       fab.setOnClickListener(new View.OnClickListener() {  //adicionar um listener para capturar evento de clique
           @Override
           public void onClick(View view) {   //método fornecido pela interface
               Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
                       .setAction("Action", null).show(); //mostrar uma mensagem, semelhante ao Toast. No método setAction é possível fazer que o Snackbar trate um evento. No exemplo, foi passado null, pois a ideia é apenas mostrar o texto na tela.
               Intent intent =  new Intent(MediaStore.ACTION_IMAGE_CAPTURE); //cria um objeto de mensagem com a ação de capturar uma imagem. Dessa forma, o app que tem a capacidade de tratar essa ação será chamado. Por exemplo, o app nativo que aciona a câmera do celular.
               startActivity(intent);
           }
       });
   }
}