Skip to content
Related Articles

Related Articles

Improve Article

How to Add Page Curl Animation Between Images in Android?

  • Last Updated : 09 Mar, 2021

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. 

Page Curl Animation Between Images in Android Sample GIF

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: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.

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 :