Skip to content
Related Articles

Related Articles

Improve Article
How to Add Easy FlipView in Android?
  • Last Updated : 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. 

Add Easy FlipView in Android Sample GIF

Attributes Table

Attribute Name

Default Value

Description



app:flipOnTouch=”true”trueWhether the card should be flipped on touch or not.
app:flipDuration=”400″400The duration of flip animation in milliseconds.
app:flipEnabled=”true”trueIf 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”verticalWhether 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”falseIf 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″1000The 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: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 
    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 
    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: 

Attention reader! Don’t stop learning now. Get hold of all the important Java Foundation and Collections concepts with the Fundamentals of Java and Java Collections Course at a student-friendly price and become industry ready. To complete your preparation from learning a language to DS Algo and many more,  please refer Complete Interview Preparation Course.




My Personal Notes arrow_drop_up
Recommended Articles
Page :