Adicionar um botão de ação flutuante

Testar o Compose

O Jetpack Compose é o kit de ferramentas de interface recomendado para Android. Aprenda a adicionar componentes no Compose.

Botão de ação flutuante →

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).

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étodo setSize()
• A cor de ondulação do FAB, usando o atributo app:rippleColor ou o método setRippleColor().
• O ícone do FAB, usando o atributo android:src ou o método setImageDrawable()

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:

val fab: View = findViewById(R.id.fab)
fab.setOnClickListener { view ->
    Snackbar.make(view, "Here's a Snackbar", Snackbar.LENGTH_LONG)
            .setAction("Action", null)
            .show()
}

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.