How to Add Easy FlipView in Android?

EasyFlipView is an Android library that allows us to easily create a flip view in our android app. We can use this feature in many apps such as the app in which we store the credit or debit card details of the user (the user can easily flip the card to view the CVV of the card). A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Attributes Table

Attribute Name	Default Value	Description
app:flipOnTouch=”true”	true	Whether the card should be flipped on touch or not.
app:flipDuration=”400″	400	The duration of flip animation in milliseconds.
app:flipEnabled=”true”	true	If this is set to false, then it won’t flip ever in Single View and it has to be always false for RecyclerView
app:flipType=”horizontal”	vertical	Whether card should flip in vertical or horizontal
app:flipFrom=”right”  app:flipFrom=”back”	left  front	Whether card should flip from left to right Or right to left(Horizontal type) or car should flip to front or back(Vertical type)
app:autoFlipBack=”true”	false	If this is set to true, then the card will be flipped back to the original front side after the time set in autoFlipBackTime.
app:autoFlipBackTime=”1000″	1000	The time in milliseconds (ms), after the card will be flipped back to the original front side.

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first do some pre-task

Go to app -> res -> values -> colors.xml file and set the colors for the app.

XML

<?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>

Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “the” on the above pop up.

implementation ‘com.wajahatkarim3.EasyFlipView:EasyFlipView:3.0.0’

Step 3: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to Relative layout and add the EasyFlipView and inside it, we include 2 layouts  card_layout_back.xml and card_layout_front.xml (We create a 2 layout in the next step ), follow the same step and add one more card_layout_front of horizontal type. Below is the code for the activity_main.xml file.

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>

Now go to res -> layout and right-click on it then New -> Layout Resource File (name the file card_layout_back). Now open the card_layout_back.xml file, add a simple ImageView, and set the src as the image you want. Below is the code for the card_layout_back.xml file

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>

Repeat the above step and create the card_layout_front.xml file. Below is the code for the card_layout_front.xml file

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>

Step 4: Coding Part

We can add an OnFlipAnimationListener to both the horizontal and vertical flip view and  when the user flips the card we simply show a toast message . Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

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();
            }
        });
    }
}

Output: