Ejemplo de la hoja inferior de Android en Kotlin

La hoja inferior se ve en muchas de las aplicaciones, como Google Drive, Google Maps y la mayoría de las aplicaciones utilizan la hoja inferior para mostrar los datos dentro de la aplicación. En este artículo, veremos cómo implementar una hoja inferior en la aplicación de Android usando Kotlin en Android Studio. 

¿Qué es la hoja inferior? 

Bottom Sheet es un componente de la biblioteca de soporte de diseño de Android que se usa para mostrar diferentes acciones en un diseño de interfaz de usuario expandible. Es un widget expandible que se abre desde la parte inferior del dispositivo Android al hacer clic en un botón o vista específica. 

¿Tipos de sábanas inferiores? 

Hay dos tipos diferentes de Hoja inferior como 

1. Hoja inferior persistente y 
2. Hoja inferior modal

1. Hoja inferior persistente

Se mostrará una hoja inferior persistente en la parte inferior de la pantalla en nuestra aplicación de Android. Esta hoja se mostrará en la parte inferior de la pantalla haciendo visible una parte del contenido. La elevación de esta hoja inferior es la misma que la de la aplicación. Los usuarios pueden navegar tanto a la aplicación como a la hoja inferior a la vez. A continuación se muestra el ejemplo de la hoja inferior persistente. 

2. Hoja inferior modal 

La hoja inferior modal también se mostrará en la parte inferior de la pantalla, pero la diferencia es que el usuario no podrá usar el contenido de fondo de la aplicación cuando la hoja inferior esté abierta. Este tipo de bajera tiene una elevación ligeramente superior a la de la aplicación. Cuando esta hoja inferior esté abierta, el usuario no podrá acceder al contenido de la aplicación. Los usuarios pueden a la vez utilizar la hoja inferior o el contenido de la aplicación. A continuación se muestra el ejemplo de la hoja inferior modal. 

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

Construiremos una aplicación simple en la que mostraremos los detalles del curso en nuestras hojas inferiores, como el nombre del curso, la duración del curso, las pistas del curso y muchos más. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer 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 Kotlin como lenguaje de programación.

Paso 2: 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:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
  
    <!--below is the button for opening our bottom sheet-->
    <Button
        android:id="@+id/idBtnShowBottomSheet"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="Show Bottom Sheet"
        android:textAllCaps="false" />
      
</RelativeLayout>

Paso 3: crear un archivo de diseño para nuestra hoja inferior 

Navegue a la aplicación> res> diseño> Haga clic con el botón derecho en él> Nuevo> Archivo de recursos de diseño y asígnele el nombre bottom_sheet_dialog y agregue el código a continuación. 

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
  
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="2dp">
  
        <!--image view for displaying course image-->
        <ImageView
            android:id="@+id/idIVCourse"
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:layout_margin="10dp"
            android:src="@drawable/dsa" />
  
        <!--text view for displaying course name-->
        <TextView
            android:id="@+id/idTVCourseName"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="DSA Self Paced Course"
            android:textColor="@color/black"
            android:textSize="18sp"
            android:textStyle="bold" />
  
        <!--text view for displaying course tracks-->
        <TextView
            android:id="@+id/idTVCourseTracks"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCourseName"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="Course Tracks : 30"
            android:textColor="@color/black"
            android:textSize="15sp" />
  
        <!--text view for displaying course duration-->
        <TextView
            android:id="@+id/idTVCourseDuration"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idTVCourseTracks"
            android:layout_marginTop="10dp"
            android:layout_toEndOf="@id/idIVCourse"
            android:layout_toRightOf="@id/idIVCourse"
            android:text="Course Duration : 4 Months"
            android:textColor="@color/black"
            android:textSize="15sp" />
        
        <!--button for dismissing our dialog-->
        <Button
            android:id="@+id/idBtnDismiss"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/idIVCourse"
            android:layout_margin="10dp"
            android:text="Dismiss dialog"
            android:textAllCaps="false" />
  
    </RelativeLayout>
  
</androidx.cardview.widget.CardView>

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.

import android.os.Bundle
import android.widget.Button
import androidx.appcompat.app.AppCompatActivity
import com.google.android.material.bottomsheet.BottomSheetDialog
  
class MainActivity : AppCompatActivity() {
      
    // creating a variable for our button
    lateinit var btnShowBottomSheet: Button
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
          
        // initializing our variable for button with its id.
        btnShowBottomSheet = findViewById(R.id.idBtnShowBottomSheet);
          
        // adding on click listener for our button.
        btnShowBottomSheet.setOnClickListener {
              
            // on below line we are creating a new bottom sheet dialog.
            val dialog = BottomSheetDialog(this)
              
            // on below line we are inflating a layout file which we have created.
            val view = layoutInflater.inflate(R.layout.bottom_sheet_dialog, null)
              
            // on below line we are creating a variable for our button 
            // which we are using to dismiss our dialog.
            val btnClose = view.findViewById<Button>(R.id.idBtnDismiss)
              
            // on below line we are adding on click listener 
            // for our dismissing the dialog button.
            btnClose.setOnClickListener {
                // on below line we are calling a dismiss 
                // method to close our dialog.
                dialog.dismiss()
            }
            // below line is use to set cancelable to avoid 
            // closing of dialog box when clicking on the screen.
            dialog.setCancelable(false)
              
            // on below line we are setting
            // content view to our view.
            dialog.setContentView(view)
              
            // on below line we are calling 
            // a show method to display a dialog.
            dialog.show()
        }
    }
}

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

Producción: