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. Este documento mostra como adicionar um FAB ao seu layout, personalizar parte da aparência dele e responder aos toques no botão.
Para saber mais sobre como projetar um FAB para seu app de acordo com as Diretrizes do Material Design, consulte FAB do Material Design (link em inglês).
![Uma imagem mostrando uma tela de app com um floatActionButton vermelho](https://developer.android.com/static/training/material/images/fab.png?authuser=9&hl=pt-br)
Adicionar o botão de ação flutuante ao layout
O código abaixo mostra como o
FloatingActionButton
aparece no arquivo de layout:
<com.google.android.material.floatingactionbutton.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="end|bottom" android:src="@drawable/ic_my_icon" android:contentDescription="@string/submit" android:layout_margin="16dp" />
Por padrão, um FAB é colorido pelo atributo colorAccent
, que você pode
personalizar com a paleta de cores
do tema.
É possível configurar outras propriedades do FAB usando atributos XML ou métodos correspondentes, como estes:
- O tamanho do FAB, usando o atributo
app:fabSize
ou o métodosetSize()
- A cor de ondulação do FAB, usando o atributo
app:rippleColor
ou o métodosetRippleColor()
. - O ícone do FAB, usando o atributo
android:src
ou o métodosetImageDrawable()
Responder aos toques no botão
Em seguida, você pode aplicar um
View.OnClickListener
para
processar os toques no FAB. Por exemplo, o código abaixo mostra uma
Snackbar
quando
o usuário toca no FAB:
Kotlin
val fab: View = findViewById(R.id.fab) fab.setOnClickListener { view -> Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null) .show() }
Java
FloatingActionButton fab = findViewById(R.id.fab); fab.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG) .setAction("Action", null).show(); } });
Para saber mais sobre os recursos do FAB, consulte a referência da API
para o
FloatingActionButton
.