Botón de acción flotante usando la biblioteca de opciones Fab en Android

El botón de acción flotante que usa Fab Options es otra forma única de mostrar varias opciones. Con la ayuda de esto, podemos navegar fácilmente a diferentes pantallas. Este botón de acción flotante muestra varios menús con animación. Por lo tanto, aumenta la experiencia del usuario. En este artículo, vamos a aprender cómo implementar el botón de acción flotante usando la biblioteca de opciones Fab en Android . qué

Aplicaciones del botón de acción flotante usando Fab Option

• El botón de acción flotante que usa la opción Fab proporciona una buena experiencia de usuario.
• El botón de acción flotante que usa la opción Fab ayuda a proporcionar varios menús en forma animada.
• El botón de acción flotante que usa Fab Option facilita la navegación a diferentes pantallas.

Atributos del botón de acción flotante usando la opción Fab

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregue la dependencia del botón de acción flotante usando la biblioteca Fab Option en el archivo build.gradle

Luego navegue a los scripts de gradle y luego al nivel build.gradle (Módulo) . Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.github.joaquimley:faboptions:1.2.0’

Ahora haga clic en Sincronizar ahora sincronizará todos sus archivos en build.gradle() .

Paso 3: cree un nuevo botón de acción flotante usando Fab Option en su archivo activity_main.xml

aplicación > res > diseño > actividad_principal.xml actividad_principal.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--Text View heading-->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:text="Geeks for Geeks"
        android:textColor="@color/purple_200"
        android:textSize="20dp"
        android:textStyle="bold" />
  
    <!--Fab Options-->
    <com.joaquimley.faboptions.FabOptions
        android:id="@+id/fab_options"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom" />
      
</RelativeLayout>

Paso 4: Cree un nuevo archivo de menú en su carpeta de recursos

Vaya a la aplicación > res > haga clic con el botón derecho en > Nuevo > Archivo de recursos de Android y elija el tipo de recurso como » Menú » e ingrese el nombre del archivo como » menú » y haga clic en el botón Aceptar . Ingrese el siguiente código en el archivo menu.xml .

<?xml version="1.0" encoding="utf-8"?>
<menu 
    xmlns:android="http://schemas.android.com/apk/res/android">
  
    <!--Menu items-->
    <item
        android:id="@+id/balance"
        android:icon="@drawable/ic_baseline_account_balance_24"
        android:title="Bank" />
  
    <item
        android:id="@+id/download"
        android:icon="@drawable/ic_baseline_cloud_download_24"
        android:title="Download" />
  
    <item
        android:id="@+id/photo"
        android:icon="@drawable/ic_baseline_add_a_photo_24"
        android:title="Add Photo" />
  
    <item
        android:id="@+id/account"
        android:icon="@drawable/ic_baseline_account_circle_24"
        android:title="Account" />
      
</menu>

Paso 5: trabajar con el archivo MainActivity.java

Vaya al archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.joaquimley.faboptions.FabOptions;
  
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Fab Options Code
        FabOptions fabOptions = (FabOptions) findViewById(R.id.fab_options);
        fabOptions.setButtonsMenu(this, R.menu.menu);
        fabOptions.setOnClickListener(this);
    }
  
    @Override
    public void onClick(View v) {
        // Menu given along with toast
        switch (v.getId()) {
            case R.id.balance:
                Toast.makeText(this, "Bank", Toast.LENGTH_SHORT).show();
                break;
            case R.id.download:
                Toast.makeText(this, "Download", Toast.LENGTH_SHORT).show();
                break;
            case R.id.photo:
                Toast.makeText(this, "Add Photo", Toast.LENGTH_SHORT).show();
                break;
            case R.id.account:
                Toast.makeText(this, "Account", Toast.LENGTH_SHORT).show();
                break;
        }
    }
}

Ahora haga clic en la opción de ejecución , tomará algún tiempo construir Gradle. Después de eso, obtendrá la salida en su dispositivo como se indica a continuación.

Producción: