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

El botón de acción flotante de contador se ve en la mayoría de las aplicaciones de comercio electrónico donde estamos usando la funcionalidad para mostrar la cantidad de artículos que están presentes en el carrito de compras del usuario. En este artículo, veremos cómo implementar este botón de acción flotante en nuestra aplicación de Android en Android Studio. 

¿Qué vamos a construir en este artículo? 

Construiremos una aplicación simple en la que simplemente mostraremos un botón de acción flotante y le agregaremos un contador. Al hacer clic en ese botón, estaremos incrementando y decrementando el contador que se aplica en ese botón de acción flotante. A continuación se muestra el video en el que veremos lo que vamos a construir en este artículo. 

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: Agregar dependencia

Navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.   

implementación ‘com.github.andremion:counterfab:1.2.2’ 

Después de agregar esta dependencia, ahora sincronice su proyecto y avanzaremos hacia el trabajo con el archivo XML. 

Paso 3: trabajar con el archivo activity_main.xml

Vaya a la aplicación > res > diseño > actividad_principal.xml y agregue el siguiente código a ese archivo. A continuación se muestra el código para el archivo  activity_main.xml .

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    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:id="@+id/idRLView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="horizontal"
        android:weightSum="2">
  
        <!--creating a counter fab for incrementing a count-->
        <com.andremion.counterfab.CounterFab
            android:id="@+id/fabOne"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:src="@drawable/ic_add"
            android:tint="@color/purple_200"
            app:backgroundTint="@color/white"
            app:badgeBackgroundColor="@color/purple_200"
            app:badgePosition="RightTop"
            app:badgeTextColor="@color/white" />
  
        <!--creating a counter fab for decrementing a count-->
        <!--in this we are passing badge position as top right
            badge text color as white
            badge back ground color as green -->
        <com.andremion.counterfab.CounterFab
            android:id="@+id/fabTwo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_margin="20dp"
            android:layout_weight="1"
            android:src="@drawable/ic_sub_icon"
            android:tint="@color/white"
            app:backgroundTint="@color/white"
            app:badgeBackgroundColor="@color/purple_200"
            app:badgePosition="RightTop"
            app:badgeTextColor="@color/white" />
    </LinearLayout>
      
</RelativeLayout>

Paso 4: 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 androidx.appcompat.app.AppCompatActivity;
  
import com.andremion.counterfab.CounterFab;
  
public class MainActivity extends AppCompatActivity {
  
    CounterFab fabOne, fabTwo;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
          
        // initializing our variables.
        fabOne = findViewById(R.id.fabOne);
        fabTwo = findViewById(R.id.fabTwo);
          
        // on below line we are setting default
        // count as 10 for both our fab.
        fabOne.setCount(10);
        fabTwo.setCount(10);
          
        // on below line we are adding click listener for fab one and fab two.
        fabOne.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are calling a
                // method to increase the fab count.
                fabOne.increase();
            }
        });
        fabTwo.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // on below line we are calling a 
                // method to decrease the fab count.
                fabTwo.decrease();
            }
        });
    }
}

Ahora ejecute su aplicación y vea el resultado de la aplicación. 

Producción: