Botón de acción flotante extendido en Android con ejemplo

Requisito previo: botón de acción flotante (FAB) en Android con ejemplo

En el artículo Botón de acción flotante (FAB) , hemos discutido sobre el Botón de acción flotante normal/regular y el Mini botón de acción flotante. En este artículo, analicemos e implementemos un botón de acción flotante extendido en Android que se extiende cuando se hace clic y se reduce cuando se cierra y también muestra la información sobre el botón de acción flotante secundario para el contexto en el que han aparecido los botones de acción flotante secundarios. qué

Pasos para crear un botón de acción flotante extendido

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 una dependencia al archivo Gradle de nivel de aplicación.

• Aquí estamos usando el botón de acción flotante que está diseñado y desarrollado por el equipo de diseño de materiales de Google.
• Agregue la dependencia en el archivo build.gradle(app) como:

implementación ‘com.google.android.material:material:1.3.0-alpha02’

• Asegúrese de agregar la dependencia al archivo Gradle del nivel de la aplicación. Después de agregar la dependencia, debe hacer clic en el botón «Sincronizar ahora» que aparece en la esquina superior derecha del IDE de Android Studio.
• Cuando haga clic en el botón Sincronizar ahora, asegúrese de estar conectado a la red para que pueda descargar los archivos necesarios.
• Consulte la imagen a continuación si no puede obtener los pasos mencionados anteriormente o si no puede ubicar el archivo Gradle del nivel de la aplicación:

Paso 3: Cambie el tema base de la aplicación en el archivo styles.xml

• El tema debe cambiarse ya que el botón de acción ExtendedFloating es la clase secundaria de los botones de diseño de materiales de Google. Por lo tanto, necesita que el tema MaterialComponent se aplique al tema Base de la aplicación. De lo contrario, la aplicación se bloqueará inmediatamente tan pronto como iniciemos la aplicación.
• Puede consultar este artículo: Botones de diseño de materiales en Android con ejemplo , ya que el botón de diseño de material extendido es una clase secundaria de los botones de diseño de materiales. El artículo dice las ventajas de tener botones de diseño de materiales y por qué es necesario cambiar el tema.
• aplicación -> src -> principal -> res -> valores -> estilos.xml MaterialComponents AppCompat estilos.xml

<resources> 
    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.MaterialComponents.DayNight.DarkActionBar"> 
        <!-- Customize your theme here -->
        <item name="colorPrimary">@color/colorPrimary</item> 
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item> 
        <item name="colorAccent">@color/colorAccent</item> 
    </style>
</resources>

Si no puede obtener las cosas en el paso mencionado anteriormente, puede consultar esta imagen.

Paso 4: importa algunos de los íconos vectoriales en la carpeta dibujable

• En este caso, se importan iconos simples de agregar vector, agregar alarma, vector, agregar vector de persona con fines de demostración.
• Para importar cualquier vector en el proyecto, es necesario hacer clic con el botón derecho en la carpeta dibujable -> Nuevo -> Vector activo.
• Se abrirá una nueva ventana emergente y elija cualquier vector que desee haciendo clic en el botón Clip Art .
• Puede consultar la siguiente imagen para ver cómo abrir el selector de activos vectoriales.

• Puede consultar la siguiente imagen para saber cómo ubicar el botón Clip Art y elegir los vectores.

Paso 5: trabajar con el archivo activity_main.xml 

• En el archivo activity_main.xml que agrega el botón de acción flotante extendido (FAB).
• Invoque el siguiente código dentro del archivo activity_main.xml. Para una comprensión clara, consulte los comentarios dentro del código que se proporciona a continuación:

<?xml version="1.0" encoding="utf-8"?>
<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"
    tools:ignore="HardcodedText">
  
    <!--This will be the parent Floating Action Button-->
    <!--After the implementation the Floating Action Button at
         the bottom right corner as we have constrained accordingly-->
    <!--After clicking the above button the 
        following two buttons will pop up.
         So this button is considered as parent FAB-->
    <!--After opening the application it looks like regular 
        FAB but after user clicks it, it extends-->
    <!--This functionality has been handled in the MainActivity.java-->
    <com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton
        android:id="@+id/add_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end"
        android:layout_marginEnd="16dp"
        android:layout_marginBottom="16dp"
        android:backgroundTint="@color/colorAccent"
        android:text="Actions"
        app:icon="@drawable/ic_add_black_24dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent" />
  
    <!--Floating action button for add alarm-->
    <!--Make sure that you are constraining this 
        button to the parent button-->
    <!--Make sure to add backgroundTint attribute to match
         the entire application color-->
    <!--because after changing the base application theme the color
         of the FAB is set Blue as default-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_alarm_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_fab"
        app:srcCompat="@drawable/ic_add_alarm_black_24dp" />
  
    <!--Action name text for the add alarm button-->
    <!--Make sure that you are constraining this 
        Text to the add Alarm FAB button-->
    <TextView
        android:id="@+id/add_alarm_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Alarm"
        app:layout_constraintBottom_toBottomOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_alarm_fab"
        app:layout_constraintTop_toTopOf="@+id/add_alarm_fab" />
  
    <!--Floating action button for add person-->
    <!--Make sure that you are constraining this button 
        to the add Alarm FAB button-->
    <!--Make sure to add backgroundTint attribute to match
         the entire application color-->
    <!--because after changing the base application theme
         the color of the FAB is set Blue as default-->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/add_person_fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="24dp"
        android:backgroundTint="@color/colorAccent"
        app:fabSize="normal"
        app:layout_constraintBottom_toTopOf="@+id/add_alarm_fab"
        app:layout_constraintEnd_toEndOf="@+id/add_alarm_fab"
        app:layout_constraintStart_toStartOf="@+id/add_alarm_fab"
        app:srcCompat="@drawable/ic_person_add_black_24dp" />
  
    <!--Action name text for the add person button-->
    <!--Make sure that you are constraining this Text
         to the add Person FAB button-->
    <TextView
        android:id="@+id/add_person_action_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Add Person"
        app:layout_constraintBottom_toBottomOf="@+id/add_person_fab"
        app:layout_constraintEnd_toStartOf="@+id/add_person_fab"
        app:layout_constraintTop_toTopOf="@+id/add_person_fab" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 6: trabajar con el archivo MainActivity.java 

• Antes de proceder a ver la salida, es mejor manejar el botón de acción flotante principal y sus botones de acción flotante secundarios, ya que si no se hace, puede terminar obteniendo una salida inusual.
• Para manejarlos, invoque el siguiente código en el 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.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;
import com.google.android.material.floatingactionbutton.ExtendedFloatingActionButton;
import com.google.android.material.floatingactionbutton.FloatingActionButton;
  
public class MainActivity extends AppCompatActivity {
  
    // Use the FloatingActionButton for all the add person
    // and add alarm
    FloatingActionButton mAddAlarmFab, mAddPersonFab;
  
    // Use the ExtendedFloatingActionButton to handle the
    // parent FAB
    ExtendedFloatingActionButton mAddFab;
  
    // These TextViews are taken to make visible and
    // invisible along with FABs except parent FAB's action
    // name
    TextView addAlarmActionText, addPersonActionText;
  
    // to check whether sub FABs are visible or not
    Boolean isAllFabsVisible;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // Register all the FABs with their appropriate IDs
          // This FAB button is the Parent
        mAddFab = findViewById(R.id.add_fab); 
        // FAB button
        mAddAlarmFab = findViewById(R.id.add_alarm_fab);
        mAddPersonFab = findViewById(R.id.add_person_fab);
  
        // Also register the action name text, of all the
        // FABs. except parent FAB action name text
        addAlarmActionText = findViewById(R.id.add_alarm_action_text);
        addPersonActionText = findViewById(R.id.add_person_action_text);
  
        // Now set all the FABs and all the action name
        // texts as GONE
        mAddAlarmFab.setVisibility(View.GONE);
        mAddPersonFab.setVisibility(View.GONE);
        addAlarmActionText.setVisibility(View.GONE);
        addPersonActionText.setVisibility(View.GONE);
  
        // make the boolean variable as false, as all the
        // action name texts and all the sub FABs are
        // invisible
        isAllFabsVisible = false;
  
        // Set the Extended floating action button to
        // shrinked state initially
        mAddFab.shrink();
  
        // We will make all the FABs and action name texts
        // visible only when Parent FAB button is clicked So
        // we have to handle the Parent FAB button first, by
        // using setOnClickListener you can see below
        mAddFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        if (!isAllFabsVisible) {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs VISIBLE.
                            mAddAlarmFab.show();
                            mAddPersonFab.show();
                            addAlarmActionText.setVisibility(View.VISIBLE);
                            addPersonActionText.setVisibility(View.VISIBLE);
  
                            // Now extend the parent FAB, as
                            // user clicks on the shrinked
                            // parent FAB
                            mAddFab.extend();
  
                            // make the boolean variable true as
                            // we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = true;
                        } else {
  
                            // when isAllFabsVisible becomes
                            // true make all the action name
                            // texts and FABs GONE.
                            mAddAlarmFab.hide();
                            mAddPersonFab.hide();
                            addAlarmActionText.setVisibility(View.GONE);
                            addPersonActionText.setVisibility(View.GONE);
  
                            // Set the FAB to shrink after user
                            // closes all the sub FABs
                            mAddFab.shrink();
  
                            // make the boolean variable false
                            // as we have set the sub FABs
                            // visibility to GONE
                            isAllFabsVisible = false;
                        }
                    }
                });
  
        // below is the sample action to handle add person
        // FAB. Here it shows simple Toast msg. The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddPersonFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Person Added", Toast.LENGTH_SHORT).show();
                    }
                });
  
        // below is the sample action to handle add alarm
        // FAB. Here it shows simple Toast msg The Toast
        // will be shown only when they are visible and only
        // when user clicks on them
        mAddAlarmFab.setOnClickListener(
                new View.OnClickListener() {
                    @Override
                    public void onClick(View view) {
                        Toast.makeText(MainActivity.this, "Alarm Added", Toast.LENGTH_SHORT).show();
                    }
                });
    }
}

Salida: ejecutar en el emulador