Hoja inferior modal en Android con ejemplos

En este artículo, aprenderemos cómo agregar Modal Bottom Sheet en nuestra aplicación. Hemos visto este componente de interfaz de usuario en aplicaciones diarias como Google Drive, Maps o Music Player App. La hoja inferior modal siempre aparece desde la parte inferior de la pantalla y si el usuario hace clic en el contenido externo, se descarta. Se puede arrastrar verticalmente y se puede descartar deslizándolo hacia abajo.

Acercarse:

1. Agregue la biblioteca de soporte en el archivo build.gradle y agregue la dependencia en la sección de dependencias. Con la ayuda de esta biblioteca podemos heredar BottomSheetDialogFragment que nos ayuda a implementar el componente Bottom Sheet.

   dependencies {                implementation 'com.google.android.material:material:1.2.0-alpha02'      }

2. Ahora cree un archivo bottom_sheet_layout.xml y agregue el siguiente código. Aquí diseñamos el diseño de nuestra hoja Modal inferior. Tiene una vista de texto y dos botones .

   bottom_sheet_layout.xml

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="match_parent"     android:gravity="center_horizontal"     android:orientation="vertical"     android:padding="16dp">        <TextView         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="This is a Modal BottomSheet"         android:textSize="25sp" />        <Button         android:layout_margin="10dp"         android:id="@+id/algo_button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Share this Algorithm" />        <Button         android:layout_margin="10dp"         android:id="@+id/course_button"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Share this Course" />    </LinearLayout>

3. Ahora cree BottomSheetDialog.java y agregue el siguiente código. Este archivo extiende BottomSheetFragment y es por eso que actúa como un fragmento. Cuando el usuario hace clic en cualquier parte inferior de la hoja modal, se invoca onClickListener() .

   BottomSheetDialog.java

   package org.geeksforgeeks.gfgmodalsheet;    import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import android.widget.Toast;    import androidx.annotation.Nullable; import com.google.android.material.bottomsheet.BottomSheetDialogFragment;    public class BottomSheetDialog extends BottomSheetDialogFragment {        @Override     public View onCreateView(LayoutInflater inflater, @Nullable                                                       ViewGroup container, @Nullable Bundle savedInstanceState)     {         View v = inflater.inflate(R.layout.bottom_sheet_layout,                                   container, false);            Button algo_button = v.findViewById(R.id.algo_button);         Button course_button = v.findViewById(R.id.course_button);            algo_button.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v)             {                 Toast.makeText(getActivity(),                                "Algorithm Shared", Toast.LENGTH_SHORT)                     .show();                 dismiss();             }         });            course_button.setOnClickListener(new View.OnClickListener() {             @Override             public void onClick(View v)             {                 Toast.makeText(getActivity(),                                "Course Shared", Toast.LENGTH_SHORT)                     .show();                 dismiss();             }         });         return v;     } }

4. Agregue el siguiente código en el archivo activity_main.xml . Aquí agregamos un botón en el diseño de actividad_principal.

   actividad_principal.java

   <?xml version="1.0" encoding="utf-8"?> <LinearLayout     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"     android:gravity="center_horizontal"     android:orientation="vertical"     tools:context=".MainActivity">        <Button         android:layout_marginTop="30dp"         android:id="@+id/open_bottom_sheet"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:text="Open Modal Bottom Sheet" /> </LinearLayout>

5. Agregue el siguiente código en el archivo MainActivity.java . Aquí se adjunta un onClickListener con el botón. Si el usuario hace clic en él, se invoca y se muestra el cuadro de diálogo de la hoja inferior al usuario.

   MainActivity.java

   package org.geeksforgeeks.gfgmodalsheet;    import androidx.appcompat.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.Button;    public class MainActivity extends AppCompatActivity {        @Override     protected void onCreate(Bundle savedInstanceState)     {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);            Button OpenBottomSheet = findViewById(R.id.open_bottom_sheet);            OpenBottomSheet.setOnClickListener(             new View.OnClickListener() {                 @Override                 public void onClick(View v)                 {                     BottomSheetDialog bottomSheet = new BottomSheetDialog();                     bottomSheet.show(getSupportFragmentManager(),                                      "ModalBottomSheet");                 }             });     } }

Producción: