Pantalla deslizante hacia arriba en Android

La pantalla deslizante hacia arriba es otra característica común que vemos en la mayoría de las aplicaciones. Esta pantalla deslizante hacia arriba se puede usar para mostrar algún contenido después de hacer clic en el botón o para mostrar el menú. El uso de esta pantalla deslizante en nuestra aplicación mejora la experiencia del usuario. En este artículo vamos a ver cómo implementar la pantalla deslizante hacia arriba en Android. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. 

Aplicaciones de la pantalla deslizante hacia arriba

• La pantalla deslizante hacia arriba se puede usar para mostrar algún contenido después de hacer clic en el botón en otra forma atractiva.
• Esta pantalla deslizante hacia arriba también se puede usar para mostrar opciones de menú adicionales.
• El uso de Sliding Up Screen en nuestra aplicación mejora la experiencia del usuario.

Atributos de la pantalla deslizante hacia arriba

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: agregue la dependencia de la biblioteca Sliding Up Screen en el archivo build.gradle

Luego navegue a los scripts de Gradle y luego al nivel build.gradle (Módulo) . Agregue la siguiente línea en el archivo build.gradle en la sección de dependencias.

implementación ‘com.sotres.slidinguppanel:biblioteca:3.4.0’

ahora haga clic en Sincronizar ahora sincronizará todos sus archivos en build.gradle() .

Paso 3: cree una nueva pantalla deslizante hacia arriba en su archivo activity_main.xml

Vaya a la aplicación > res > diseño para abrir el archivo activity_main.xml . 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"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="16dp"
    tools:context=".MainActivity">
  
    <!--Sliding Up Screen-->
    <com.sothree.slidinguppanel.SlidingUpPanelLayout 
        xmlns:sothree="http://schemas.android.com/apk/res-auto"
        android:id="@+id/sliding_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="bottom"
        sothree:umanoPanelHeight="68dp"
        sothree:umanoShadowHeight="4dp">
  
        <!--First Screen-->
        <include
            layout="@layout/layout_first"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
  
        <!--Second Screen-->
        <include
            layout="@layout/layout_second"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </com.sothree.slidinguppanel.SlidingUpPanelLayout>
      
</RelativeLayout>

Paso 4: Cree una pantalla 1 y una pantalla 2 en la carpeta de diseño

Vaya a la aplicación > res > diseño y cree el archivo layout_first.xml y layout_second.xml en la carpeta de diseño. Siga el código que se indica a continuación.

archivo layout_first.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:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
  
    <!--Text view to display text-->
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is First Screen" />
      
    <!--Button for click-->
    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click" />
      
</LinearLayout>

archivo layout_second.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:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">
  
    <!--Text view to display text-->
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is Second Screen" />
  
    <!--Button for click-->
    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Click Again" />
      
</LinearLayout>

Ahora haga clic en la opción de ejecución , tomará algún tiempo construir Gradle . Después de eso, obtendrá la salida en su dispositivo como se indica a continuación.

Producción: