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.
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
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);
images.add(R.drawable.img2);
images.add(R.drawable.img3);
pageCurlView.setCurlView(images);
pageCurlView.setCurlSpeed( 600 );
|
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);
images.add(R.drawable.img2);
images.add(R.drawable.img3);
pageCurlView.setCurlView(images);
pageCurlView.setCurlSpeed( 600 );
}
}
|
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.
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...