Android Curl Effect Image

Step 1

Contents

• 1 Introduction
• 2 Adding support library in the dependencies
• 3 Creating Layout
• 4 Initializing the PageCurlView
• 5 Creating an ArrayList
• 6 Call the setCurlView() method
• 7 Add the curl speed
• 8 Get the best of Android plus exclusive deals and freebies in your inbox!

Introduction

Android Page Curl Effect is 2D view which provides a page curl illusion while swapping through the images. In this tutorial, we are going implement the page curl effect through a simple example using numAndroidPageCurlEffect library. In this library, only canvas has been used so that it can be used in any Android application. The numAndroidPageCurlEffect library is inspired by android-page-curl repositiory.

Step 1

Adding support library in the dependencies

To make the page curl effect for image, we need to add the numAndroidPageCurl library in the dependencies. Open your build.gradle(app) and add the library in the dependencies.

dependencies {
   
    compile 'app.num.numandroidpagecurleffect:numandroidpagecurleffect:1.0'}

Step 3




Creating Layout



We need to add the app.num.numandroidpagecurleffect.PageCurlView tag in layout xml file to make the page curl effect for image. We must add the first page in the background. Use the following code:

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="app.pagecurleffect.MainActivity">

    <app.num.numandroidpagecurleffect.PageCurlView        android:layout_width="match_parent"        android:layout_height="fill_parent"        android:id="@+id/pagecurl_view"        android:background="@drawable/page1"/>

</RelativeLayout>




Step 4




Initializing the PageCurlView



Now, we will initialize the id of PageCurlView to use the properties of class PageCurlView. It will help to display the curl effect on image.




1

2

3

4

5

6

7

8

9


<br />

public class MainActivity extends AppCompatActivity {</p>

<p>    @Override<br />

    protected void onCreate(Bundle savedInstanceState) {<br />

        super.onCreate(savedInstanceState);<br />

        setContentView(R.layout.activity_main);</p>

<p>        PageCurlView pageCurlView = (PageCurlView) findViewById(R.id.pagecurl_view);<br />

    }<br />

}<br />









Step 5




Creating an ArrayList



We need to create an ArrayList which is an integer type. We will add the id of image drawables to get the images from source. Use the following code to create an ArrayLsit:




1

2

3

4

5

6

7

8

9

10

11

12


<br />

public class MainActivity extends AppCompatActivity {</p>

<p>    @Override<br />

    protected void onCreate(Bundle savedInstanceState) {<br />

        super.onCreate(savedInstanceState);<br />

        setContentView(R.layout.activity_main);</p>

<p>        PageCurlView pageCurlView = (PageCurlView) findViewById(R.id.dcgpagecurlPageCurlView1);</p>

<p>        List&lt;Integer&gt; pages_id = new ArrayList&lt;&gt;();<br />

        pages_id.add(R.drawable.page1);<br />

        pages_id.add(R.drawable.page2);</p>

<p>    }<br />

}<br />









Step 6




Call the setCurlView() method



We need to pass the list of image in the setCurlView() method. It sets list of images in PageCurlView class and this class make the curl effect on images.




1

2

3

4

5

6

7

8

9

10

11

12

13


<br />

public class MainActivity extends AppCompatActivity {</p>

<p>    @Override<br />

    protected void onCreate(Bundle savedInstanceState) {<br />

        super.onCreate(savedInstanceState);<br />

        setContentView(R.layout.activity_main);</p>

<p>        PageCurlView pageCurlView = (PageCurlView) findViewById(R.id.dcgpagecurlPageCurlView1);</p>

<p>        List&lt;Integer&gt; pages_id = new ArrayList&lt;&gt;();<br />

        pages_id.add(R.drawable.page1);<br />

        pages_id.add(R.drawable.page2);</p>

<p>        pageCurlView.setCurlView(pages_id);</p>

<p>    }<br />

}<br />









Step 8




Add the curl speed



We can set the curl speed via setCurlSpeed() method. It is optional and by default it is set to 62.




1

2

3

4

5

6

7

8

9

10

11

12

13

14


<br />

public class MainActivity extends AppCompatActivity {</p>

<p>    @Override<br />

    protected void onCreate(Bundle savedInstanceState) {<br />

        super.onCreate(savedInstanceState);<br />

        setContentView(R.layout.activity_main);</p>

<p>        PageCurlView pageCurlView = (PageCurlView) findViewById(R.id.dcgpagecurlPageCurlView1);</p>

<p>        List&lt;Integer&gt; pages_id = new ArrayList&lt;&gt;();<br />

        pages_id.add(R.drawable.page1);<br />

        pages_id.add(R.drawable.page2);</p>

<p>        pageCurlView.setCurlView(pages_id);<br />

        pageCurlView.setCurlSpeed(65);</p>

<p>    }<br />

}<br />










Final MainActivity.java





import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

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

import app.num.numandroidpagecurleffect.PageCurlView;

public class MainActivity extends AppCompatActivity {

    @Override    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        PageCurlView pageCurlView = (PageCurlView) findViewById(R.id.pagecurl_view);

        List<Integer> pages_id = new ArrayList<>();
        pages_id.add(R.drawable.page1);
        pages_id.add(R.drawable.page2);

        pageCurlView.setCurlView(pages_id);
        pageCurlView.setCurlSpeed(65);
    }
}