App Tutorial

In questa guida scoprirai come usare il FloatingActionButton Android per mettere in risalto un’azione principale all’interno della tua app. Vedremo cos’è, a cosa serve e come integrarlo correttamente nell’interfaccia per migliorare l’esperienza utente. Gli esempi pratici sono realizzati con Java e Android Studio, così potrai seguirli e adattarli subito ai tuoi progetti. Continua a leggere per implementare passo dopo passo un Floating Action Button perfettamente funzionante.

Floating Action Button (FAB), permette di eseguire un’ azione specifica sullo schermo.
Di solito è posizionato nell’ angolo in basso a destra ed è di forma circolare.
In questo esempio andiamo ad aggiungere un Fab al layout per rispondere al tocco del pulsante:

activity_main.xml
<?xml version=”1.0″ encoding=”utf-8″?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;
xmlns:app=”http://schemas.android.com/apk/res-auto&#8221;
xmlns:tools=”http://schemas.android.com/tools&#8221;
    android:layout_width=”match_parent”
    android:layout_height=”match_parent”
    tools:context=”.MainActivity”>

<com.google.android.material.floatingactionbutton.FloatingActionButton

android:src=”@drawable/ic_launcher_background”
        android:layout_width=”wrap_content”
        android:layout_height=”wrap_content”
        android:onClick=”floatingButton”
        app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”/>

<androidx.constraintlayout.widget.ConstraintLayout>

Cos’è il FloatingActionButton Android?

Il FloatingActionButton (FAB) è un componente dell’interfaccia utente che implementa il Material Design di Google. Si tratta di un pulsante circolare in rilievo che rimane visibile durante lo scorrimento dei contenuti e rappresenta l’azione principale o più importante all’interno di una schermata. Secondo le linee guida di Material Design, il FAB dovrebbe essere utilizzato per enfatizzare un’azione primaria e non deve contenere azioni secondarie o meno critiche. È ideale per operazioni come aggiungere un nuovo elemento, inviare un messaggio, avviare una registrazione, o altre azioni che gli utenti eseguono frequentemente. La sua posizione standard è l’angolo inferiore destro dello schermo, ma può essere personalizzato secondo le esigenze del layout.

FloatingActionButton Android: aggiungere il FAB nel layout XML

Per aggiungere un FloatingActionButton al tuo layout, devi utilizzare il componente com.google.android.material.floatingactionbutton.FloatingActionButton nel tuo file XML. Assicurati di avere la dipendenza Material Design nel tuo file build.gradle. Di seguito un esempio completo che mostra come aggiungere un FAB con attributi personalizzati:

Gli attributi principali utilizzati sono: app:srcCompat per impostare l’icona (compatibile con versioni precedenti), app:backgroundTint per personalizzare il colore di sfondo, app:fabSize per scegliere tra “normal” (56dp) e “mini” (40dp), e gli attributi di constraint per posizionare il pulsante correttamente nel layout. L’attributo android:layout_margin aggiunge spazio ai bordi per evitare che il FAB tocchi il margine dello schermo. Per ulteriori dettagli sulla classe Java e sui metodi disponibili, consulta la guida Android Developer.

Gestire il click del FloatingActionButton in Java

Dopo aver aggiunto il FAB nel layout XML, è necessario gestire l’evento di click in Java. Puoi farlo utilizzando un OnClickListener nel tuo Activity. Ecco come implementarlo correttamente:

FloatingActionButton fab = findViewById(R.id.fab_main);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // Esegui l'azione quando il FAB viene premuto
        Toast.makeText(MainActivity.this,
            "Floating Action Button Clicked",
            Toast.LENGTH_SHORT).show();
        
        // Puoi anche avviare un nuovo Activity
        // Intent intent = new Intent(MainActivity.this, NewItemActivity.class);
        // startActivity(intent);
    }
});

In alternativa, puoi utilizzare una lambda expression (Java 8+) per un codice più conciso: fab.setOnClickListener(v -> { /* azioni */ });. All’interno del metodo onClick, puoi eseguire qualsiasi operazione desideri: mostrare un Toast, lanciare un nuovo Activity, aggiungere elementi a un database, o inviare dati a un server. È buona pratica fornire un feedback visivo all’utente quando preme il FAB, ad esempio con un’animazione o un messaggio di conferma.

Personalizzazione del FloatingActionButton Android

Il FloatingActionButton offre numerose opzioni di personalizzazione per adattarsi al design della tua app. Puoi modificare il colore utilizzando app:backgroundTint nel XML o setBackgroundTintList() in Java. La dimensione può essere impostata tramite app:fabSize con i valori “normal” (56dp) per il pulsante standard o “mini” (40dp) per una versione più piccola. Per personalizzare l’icona, utilizza app:srcCompat con il drawable desiderato. La posizione viene controllata tramite gli attributi di constraint (bottomStart, bottomEnd, ecc.). Puoi anche aggiungere animazioni al FAB utilizzando PropertyAnimator o AnimationSet per creare effetti di zoom o rotazione quando viene premuto. Per un’esperienza utente completa, considera di implementare animazioni di entrata/uscita e feedback tattile quando il pulsante viene interagito.

MainActivity.java
package com.example.FoatingActionButton;

import android.view.View;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
}public void floatingButton(View view) {
Toast.makeText(MainActivity.this,
“Floating Action Button Clicked”,
Toast.LENGTH_SHORT).show();
}

}