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.
|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|
|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.
Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “the” on the above pop up.
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.
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
Repeat the above step and create the card_layout_front.xml file. Below is the code for the card_layout_front.xml file
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.
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.