Animación de deslizamiento líquido en Android

La animación Liquid Swipe se usa para deslizar la página como el agua que muestra diferentes diseños y patrones en la pantalla. Crea un estado flotante. La animación Liquid Swipe es un procedimiento de diseño de tendencia significativa. El movimiento puede ayudar a mantener a los clientes inspirados por el diseño de la interfaz de usuario durante más tiempo y más motivados para colaborar con el contenido. Este método proporciona a la aplicación una apariencia suave de una manera nueva. En este artículo, vamos a desarrollar el efecto de animación Liquid Swipe en Android Studio.

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

En este artículo, desarrollaremos una aplicación de muestra con el efecto de animación Liquid Swipe sobre su actividad. A continuación se proporciona un GIF de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

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: Cree un nombre de archivo github.properties

Ahora, dentro de la carpeta Proyecto, vaya a gradle.properties> Nuevo> Archivo y luego cree un nuevo archivo llamado github.properties. A continuación se proporciona una imagen de la implementación paso a paso para su ayuda.

Paso 3: trabajar con el archivo github.properties

Agregue las líneas de código escritas a continuación en el archivo github.properties , pero recuerde que debe colocar su nombre de usuario de github delante de gpr.usr y el token de github delante de gpr.key .

gpr.usr = github_username_here
gpr.key = github_generated_token_here

¿Cómo generar el token de Github?

Dentro de su cuenta de GitHub, vaya a Configuración > Configuración de desarrollador > Tokens de acceso personal > Generar un nuevo token y coloque ese token generado dentro de github.propertie s al frente de gpr.key.

Paso 4: Agregar repositorio maven

Ahora, ve a la raíz build.gradle(Project) y agrega estas líneas al final de los repositorios debajo de jcenter() dentro de la sección allprojects{ }.

def githubProperties = new Properties()
    githubProperties.load(new FileInputStream(rootProject.file("github.properties")))
    repositories {
        maven {
            name = "GitHubPackages"
  
            url = uri("https://maven.pkg.github.com/Cuberto/liquid-swipe-android")
            credentials {
                /** Create github.properties in root project folder file with     
                ** gpr.usr=GITHUB_USER_ID & gpr.key=PERSONAL_ACCESS_TOKEN 
                ** Or set env variable GPR_USER & GPR_API_KEY if not adding a properties file**/
                username = githubProperties['gpr.usr'] ?: System.getenv("GPR_USER")
                password = githubProperties['gpr.key'] ?: System.getenv("GPR_API_KEY")
            }
      }
}

Paso 5: Agregar dependencia

Ahora, navegue a Gradle Scripts > build.gradle(Module:app) agregue las siguientes dependencias en la sección de dependencias. 

implementation 'com.cuberto:liquid-swipe:1.0.0'
implementation 'androidx.core:core-ktx:1.3.2'
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.4.10"

Finalmente, sincronice su proyecto y ahora tenemos todo lo que necesitaremos durante la implementación, así que ahora avance hacia su implementación.  

Paso 6: crea dos fragmentos en blanco

Para crear un fragmento en blanco, consulte Cómo crear un nuevo fragmento en Android Studio . Siga los pasos proporcionados en el enlace y cree dos fragmentos en blanco para esta aplicación. Para este artículo, hemos creado dos fragmentos con el nombre Fragment1 y Fragment2 .

Paso 7: Trabajar con el archivo fragment_1.xml

Vaya a la aplicación > res > diseño > fragment_1.xml y pegue el código escrito a continuación en el archivo  fragment_1.xml  .

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    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:background="#0F9D58"
    tools:context=".Fragment1">
  
    <!-- TODO: Update blank fragment layout -->
  
    <!-- Create a ImageView and set it's position -->
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="100dp"
        android:layout_marginTop="200dp"
        android:src="@drawable/geeksforgeeks2" />
      
</FrameLayout>

Paso 8: Trabajar con el archivo fragment_2.xml

A continuación, vaya a la aplicación > res > diseño > fragment_2.xml y pegue el código escrito a continuación en el  archivo  fragment_2.xml .

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 
    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:background="#FFC107"
    tools:context=".Fragment2">
  
    <!-- TODO: Update blank fragment layout -->
  
</FrameLayout>

Paso 9: Crea una clase viewPager 

Vaya a la aplicación > java > nombre del paquete y cree una nueva clase llamada viewPager.java y agregue el código escrito a continuación en la clase viewPager . Se agregan comentarios dentro del código para comprender el código con más detalle.

import androidx.annotation.NonNull;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
  
public class viewPager extends FragmentPagerAdapter {
  
    // creation of constructor of viewPager class
    public viewPager(@NonNull FragmentManager fm, int behaviour) {
        super(fm, behaviour);
    }
  
    @NonNull
  
    @Override
  
    // create the getItem method of
    // FragmentPagerAdapter class
    public Fragment getItem(int position) {
  
        switch (position) {
            case 0:
                return new Fragment1();    // Fragment1 is the name of first blank fragment, 
                                           // you can replace its name with your created fragment name
            case 1:
                return new Fragment2();    // Fragment2 is the name of second blank fragment, 
                                           // you can replace its name with your created fragment name
        }
        return null;
    }
  
    @Override
    public int getCount() {
        return 2;
    }
}

Paso 10: trabajar con el archivo activity_main.xml

Ahora, vaya a la aplicación > res > diseño > actividad_principal.xml y pegue el código escrito a continuación en el archivo actividad_principal.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:id="@+id/relative_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#0F9D58"
    tools:context=".MainActivity">
  
    <!-- apply LiquidPager on main activity -->
    <com.cuberto.liquid_swipe.LiquidPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"></com.cuberto.liquid_swipe.LiquidPager>
  
</RelativeLayout>

Paso 11: trabajar con el archivo MainActivity.java

Vaya a la aplicación > java > nombre del paquete > 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 androidx.appcompat.app.AppCompatActivity;
  
import com.cuberto.liquid_swipe.LiquidPager;
  
public class MainActivity extends AppCompatActivity {
      
    // declare LiquidPager
    LiquidPager pager;
      
    // declare viewPager
    viewPager viewPager;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // definition of pager using method findViewById()
        pager = findViewById(R.id.pager);
  
        // calling the constructor of viewPager class
        viewPager = new viewPager(getSupportFragmentManager(), 1);
        pager.setAdapter(viewPager);
    }
}

Eso es todo, ahora la aplicación está lista para instalarse en el dispositivo. Así es como se ve la salida de la aplicación.

Producción: