¿Cómo agregar Easy FlipView en Android?

EasyFlipView es una biblioteca de Android que nos permite crear fácilmente una vista flip en nuestra aplicación de Android. Podemos usar esta función en muchas aplicaciones, como la aplicación en la que almacenamos los detalles de la tarjeta de crédito o débito del usuario (el usuario puede voltear fácilmente la tarjeta para ver el CVV de la tarjeta). 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 . 

Tabla de atributos

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: antes de ir a la sección de codificación, primero haga una tarea previa

Vaya a aplicación -> res -> valores -> archivo colors.xml y configure los colores para la aplicación.

<?xml version="1.0" encoding="utf-8"?>
<resources>
  
    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>
    <color name="white">#ffffff</color>
   
</resources>

Vaya a la sección Gradle Scripts -> build.gradle (Módulo: aplicación) e importe las siguientes dependencias y haga clic en «el» en la ventana emergente anterior.

implementación ‘com.wajahatkarim3.EasyFlipView:EasyFlipView:3.0.0’

Paso 3: Diseño de la interfaz de usuario

En activity_main.xml, elimine la Vista de texto predeterminada y cambie el diseño a Diseño relativo y agregue EasyFlipView y, dentro de él, incluimos 2 diseños   card_layout_back.xml y card_layout_front.xml (Creamos un diseño 2 en el siguiente paso), siga las mismo paso y agregue una card_layout_front más de tipo horizontal . 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: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">
  
    <!-- Vertical Flip View -->
    <com.wajahatkarim3.easyflipview.EasyFlipView
        android:id="@+id/easyFlipViewVertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:autoFlipBack="true"
        app:autoFlipBackTime="2000"
        app:flipDuration="400"
        app:flipEnabled="true"
        app:flipFrom="front"
        app:flipOnTouch="true"
        app:flipType="vertical">
  
        <!-- Back Layout  -->
        <include layout="@layout/card_layout_back" />
  
        <!-- Front Layout -->
        <include layout="@layout/card_layout_front" />
  
    </com.wajahatkarim3.easyflipview.EasyFlipView>
  
    <!-- Horizontal Flip View -->
    <com.wajahatkarim3.easyflipview.EasyFlipView
        android:id="@+id/easyFlipViewHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:autoFlipBack="false"
        app:flipDuration="400"
        app:flipEnabled="true"
        app:flipFrom="right"
        app:flipOnTouch="true"
        app:flipType="horizontal">
  
        <!-- Back Layout -->
        <include layout="@layout/card_layout_back" />
  
        <!-- Front Layout  -->
        <include layout="@layout/card_layout_front" />
  
    </com.wajahatkarim3.easyflipview.EasyFlipView>
      
</RelativeLayout>

Ahora vaya a res -> diseño y haga clic con el botón derecho en él, luego Nuevo -> Archivo de recursos de diseño (nombre el archivo card_layout_back ). Ahora abra el archivo card_layout_back.xml , agregue un ImageView simple y configure el src como la imagen que desea. A continuación se muestra el código para el archivo card_layout_back.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!-- simple image view -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@drawable/card_back" />
      
</androidx.constraintlayout.widget.ConstraintLayout>

Repita el paso anterior y cree el archivo card_layout_front.xml . A continuación se muestra el código para el archivo card_layout_front.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  
    <!-- simple image view -->
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:src="@drawable/card_front" />
  
</androidx.constraintlayout.widget.ConstraintLayout>

Paso 4: Parte de codificación

Podemos agregar un OnFlipAnimationListener tanto a la vista horizontal como a la vertical y cuando el usuario voltea la tarjeta, simplemente mostramos un mensaje de brindis. A continuación se muestra el código completo 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 android.widget.Toast;
  
import androidx.appcompat.app.AppCompatActivity;
  
import com.wajahatkarim3.easyflipview.EasyFlipView;
  
public class MainActivity extends AppCompatActivity {
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // creating objects of  EasyFlipView
        EasyFlipView easyFlipViewVertical = (EasyFlipView) findViewById(R.id.easyFlipViewVertical);
        EasyFlipView easyFlipViewHorizontal = (EasyFlipView) findViewById(R.id.easyFlipViewHorizontal);
  
  
        // creating OnFlipAnimationListener for easyFlipViewVertical
        easyFlipViewVertical.setOnFlipListener(new EasyFlipView.OnFlipAnimationListener() {
            @Override
            public void onViewFlipCompleted(EasyFlipView flipView, EasyFlipView.FlipState newCurrentSide) {
                // showing simple toast message to the user
                Toast.makeText(MainActivity.this, "Vertical Flip Completed :)", Toast.LENGTH_SHORT).show();
            }
        });
  
        // creating OnFlipAnimationListener for easyFlipViewHorizontal
        easyFlipViewHorizontal.setOnFlipListener(new EasyFlipView.OnFlipAnimationListener() {
            @Override
            public void onViewFlipCompleted(EasyFlipView flipView, EasyFlipView.FlipState newCurrentSide) {
                // showing simple toast message to the user
                Toast.makeText(MainActivity.this, "Horizontal Flip Completed :)", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Producción: