How to Add Easy FlipView in Android? - GeeksforGeeks

05 May, 2021
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. 
Attribute Name
Default Value
Description
app:flipFrom=”right” 
app:flipFrom=”back”
left 
front
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: 
Android-View
Android
Java
Java
Android
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Retrofit with Kotlin Coroutine in Android
Android Listview in Java with Example
How to Read Data from SQLite Database in Android?
How to Change the Background Color After Clicking the Button in Android?
Flutter - Custom Bottom Navigation Bar
Arrays in Java
Split() String method in Java with examples
For-each loop in Java
Arrays.sort() in Java with examples
Initialize an ArrayList in Java