How to Add Page Curl Animation Between Images in Android?
Animations are the best way to create a good looking user-interfaces. Users love to see animation in an android application. And this becomes even more necessary when we have to make some kind of special apps, For example, if we are creating an application for a book Then we should create an animation that gives a real-world feel to the user while he moves one page to another. He should have some experience in such a way that he actually goes from one page to another in the real-world. In today’s article, we are going to learn about another animation of android which is called the page curl animation. It will give a feel like curling a page while the user moves from one image to another.
Approach: We will use a library in this article, and in XML we will use an object of that library app.num.numandroidpagecurleffect.PageCurlView and give the width and height attributes match_parent. After that, we will create an ArrayList of images in our java or Kotlin class and we will set that list to CurlView with the help of this library. For reference and as a resource we will upload the project made in this article at GitHub and will provide the repository link to you people so that you can explore more. 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.
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 Add Dependency for Library
Make sure that Android is selected at the top left corner for the project structure. Then, navigate to Gradle Scripts/build.gradle (Module: app) and paste this code implementation ‘app.num.numandroidpagecurleffect:numandroidpagecurleffect:1.0’ inside dependencies.
After that click on Sync Now at the top right corner of the screen.
Step 3: Working with the activity_main.xml file
Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file.
Step 4: Working with the MainActivity.java file
Now, go to MainActivity class and paste the code just before your onCreate method.
Create an ArrayList of Images and Set them for PageCurl Animation
In MainActivity class paste the below code in our onCreate method.
Below is the complete code for the MainActivity.java file.
Now, we have done with the code, you can just run your application on an android emulator or on a physical device.
Resources: You can also find this project on GitHub and explore more with its code.