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. 

XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    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">

    <app.num.numandroidpagecurleffect.PageCurlView
        android:id="@+id/pagecurlView"
        android:layout_width="match_parent"
        android:layout_height="500dp"
        android:layout_gravity="center">
    </app.num.numandroidpagecurleffect.PageCurlView>

</LinearLayout>

Step 4: Working with the MainActivity.java file

Now, go to MainActivity class and paste the code just before your onCreate method.

Java

PageCurlView pageCurlView;
List<Integer> images;

Create an ArrayList of Images and Set them for PageCurl Animation

In MainActivity class paste the below code in our onCreate method.

Java

pageCurlView = findViewById(R.id.pagecurlView);
images= new ArrayList<>();

images.add(R.drawable.img1); // First Image
images.add(R.drawable.img2); // Second Image
images.add(R.drawable.img3); // Third Image

pageCurlView.setCurlView(images);
pageCurlView.setCurlSpeed(600); // Set the speed in ms

Below is the complete code for the MainActivity.java file.

Java

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import java.util.ArrayList;
import java.util.List;

import app.num.numandroidpagecurleffect.PageCurlView;

public class MainActivity extends AppCompatActivity {

    PageCurlView pageCurlView;
    List<Integer> images;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        pageCurlView = findViewById(R.id.pagecurlView);
        images = new ArrayList<>();

        images.add(R.drawable.img1); // First Image
        images.add(R.drawable.img2); // Second Image
        images.add(R.drawable.img3); // Third Image

        pageCurlView.setCurlView(images);
        pageCurlView.setCurlSpeed(600); // Set the speed in ms
    }
}

Now, we have done with the code, you can just run your application on an android emulator or on a physical device.

Output:

Resources: You can also find this project on GitHub and explore more with its code.