Botón de acción flotante de Android en Kotlin

Los botones de acción flotantes se utilizan en las aplicaciones de Android para indicar al usuario alguna tarea basada en prioridades. Generalmente, los botones de acción flotantes en las aplicaciones de Android se encuentran alineados con el extremo inferior de la aplicación. En este artículo, veremos cómo implementar el botón de acción flotante en Android usando Kotlin . A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo.

Nota : si está buscando implementar el botón de acción flotante en Android usando Java, consulte el siguiente artículo: Botón de acción flotante en Android usando Java

Implementación paso a paso

Paso 1: crea un nuevo proyecto en Android Studio

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

Paso 2: agregue íconos para botones de acción flotantes en la carpeta dibujable

Navega a la aplicación > res > carpeta dibujable. Haga clic con el botón derecho en él> Nuevo> Activo vectorial> Ahora seleccione el icono que desea agregar y simplemente haga clic en Finalizar para agregar ese icono a la carpeta dibujable. 

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 . Se agregan comentarios dentro del código para comprender el código con más detalle.

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
 
    <!--on below line we are creating a
        vertical linear layout for our fabs.-->
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:orientation="vertical"
        android:padding="10dp">
 
        <!--on below line we are creating a add fab-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABHome"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_home"
            android:visibility="gone"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />
 
        <!--on below line we are creating a home fab
             and setting its visibility to gone-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABSettings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_settings"
            android:visibility="gone"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />
 
        <!--on below line we are creating a settings fab
            and setting its visibility to gone-->
        <com.google.android.material.floatingactionbutton.FloatingActionButton
            android:id="@+id/idFABAdd"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="8dp"
            android:layout_marginBottom="16dp"
            android:background="@color/purple_200"
            android:contentDescription="@string/app_name"
            android:padding="4dp"
            android:src="@drawable/ic_add"
            app:backgroundTint="@color/purple_200"
            app:tint="@color/white" />
 
    </LinearLayout>
   
</RelativeLayout>

Paso 4: trabajar con el archivo MainActivity.kt

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

package com.gtappdevelopers.kotlingfgproject
 
import android.os.Bundle
import android.view.View
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.floatingactionbutton.FloatingActionButton
 
class MainActivity : AppCompatActivity() {
 
    // on below line we are creating variable for all
    // floating action buttons and a boolean variable.
    lateinit var addFAB: FloatingActionButton
    lateinit var homeFAB: FloatingActionButton
    lateinit var settingsFAB: FloatingActionButton
    var fabVisible = false
 
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        
        // initializing variables of floating
        // action button on below line.
        addFAB = findViewById(R.id.idFABAdd)
        homeFAB = findViewById(R.id.idFABHome)
        settingsFAB = findViewById(R.id.idFABSettings)
         
        // on below line we are initializing our
        // fab visibility boolean variable
        fabVisible = false
 
        // on below line we are adding on click listener
        // for our add floating action button
        addFAB.setOnClickListener {
            // on below line we are checking
            // fab visible variable.
            if (!fabVisible) {
               
                // if its false we are displaying home fab
                // and settings fab by changing their
                // visibility to visible.
                homeFAB.show()
                settingsFAB.show()
                 
                // on below line we are setting
                // their visibility to visible.
                homeFAB.visibility = View.VISIBLE
                settingsFAB.visibility = View.VISIBLE
                 
                // on below line we are checking image icon of add fab
                addFAB.setImageDrawable(resources.getDrawable(R.drawable.ic_close))
                
                 // on below line we are changing
                 // fab visible to true
                fabVisible = true
            } else {
               
                // if the condition is true then we
                // are hiding home and settings fab
                homeFAB.hide()
                settingsFAB.hide()
                 
                // on below line we are changing the
                // visibility of home and settings fab
                homeFAB.visibility = View.GONE
                settingsFAB.visibility = View.GONE
               
                // on below line we are changing image source for add fab
                addFAB.setImageDrawable(resources.getDrawable(R.drawable.ic_add))
                 
                // on below line we are changing
                // fab visible to false.
                fabVisible = false
            }
        }
 
        // on below line we are adding
        // click listener for our home fab
        homeFAB.setOnClickListener {
            // on below line we are displaying a toast message.
            Toast.makeText(this@MainActivity, "Home clicked..", Toast.LENGTH_LONG).show()
        }
 
        // on below line we are adding on
        // click listener for settings fab
        settingsFAB.setOnClickListener {
            // on below line we are displaying a toast message
            Toast.makeText(this@MainActivity, "Settings clicked..", Toast.LENGTH_LONG).show()
        }
    }
}

Ahora ejecute su aplicación para ver el resultado. 

Producción: