Advanced Android - Page Flip

Previous
Quiz
Next
Aphid FlipView is a UI component to accomplish the flipping animation like Flipboard does.

Example

This example demostrate about how to integrate Page Flip.

Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project.

Step 2 − Add the following code to res/layout/activity_main.xml.

<?xml version = "1.0" encoding = "utf-8"?>
<LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android"
   xmlns:flip = "http://schemas.android.com/apk/res-auto"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent"
   android:orientation = "vertical">
   <TextView
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:background = "@android:color/darker_gray"
      android:paddingLeft = "10dp"
      android:text = "@string/header"
      android:textAppearance = "@android:style/TextAppearance.Large" />
   <com.aphidmobile.flip.FlipViewController
      android:id = "@+id/flip_view"
      android:layout_width = "match_parent"
      android:layout_height = "0dp"
      android:layout_weight = "1"
      flip:orientation = "vertical" />
   <TextView
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:background = "@android:color/darker_gray"
      android:paddingLeft = "10dp"
      android:text = "@string/footer"
      android:textAppearance = "@android:style/TextAppearance.Large" />
</LinearLayout>

Step 3 − Add the following code to src/MainActivity.java

package info.devexchanges.pageflip;

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

import com.aphidmobile.flip.FlipViewController;

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
   private FlipViewController flipViewController;
   private FlipperAdapter adapter;
   private ArrayList<String> stringArrayList;
   
   @Override
   protected void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.activity_main);
      
      flipViewController = (FlipViewController)findViewById(R.id.flip_view);
      stringArrayList = new ArrayList<>();
      readDataFromAssets();
      
      //create and attach adapter to flipper view
      adapter = new FlipperAdapter(this, stringArrayList);
      flipViewController.setAdapter(adapter);
   } 
   private void readDataFromAssets() {
      BufferedReader reader = null;
      try {
         reader = new BufferedReader(new InputStreamReader(
            getAssets().open("loremipsum.txt")));
         
         String line;
         while ((line = reader.readLine()) != null) {
            stringArrayList.add(line);
         } 
      } catch (IOException e) {
         e.printStackTrace();
      } finally {
         if (reader != null) {
            try {
               reader.close();
            } catch (IOException e) {
               e.printStackTrace();
            } 
         }
      }
   }
}

Step 4 − Add the following code to src/FlipViewAdapter.java

package info.devexchanges.pageflip;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.List;

public class FlipperAdapter extends BaseAdapter {
   private AppCompatActivity appCompatActivity;
   private List<String> strings;
   private int[] drawableIds = {
      R.mipmap.black_cat, 
      R.mipmap.cat, 
      R.mipmap.cat_2, 
      R.mipmap.cat_3,
      R.mipmap.cute_kittens, 
      R.mipmap.cute_white_kitten, 
      R.mipmap.explorer_cat, 
      R.mipmap.funny_cat,
      R.mipmap.happy_caturday
   }; 
   public FlipperAdapter(AppCompatActivity appCompatActivity, List<String> strings) {
      super();
      this.strings = strings;
      this.appCompatActivity = appCompatActivity;
   } 
   
   @Override
   public int getCount() {
      return strings.size();
   } 
   
   @Override
   public String getItem(int position) {
      return strings.get(position);
   } 
   
   @Override
   public long getItemId(int position) {
      return strings.indexOf(getItem(position));
   } 
   
   @Override
   public View getView(int position, View convertView, ViewGroup parent) {
      ViewHolder holder;
      LayoutInflater inflater = (LayoutInflater) 
         appCompatActivity.getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
         
      // If holder not exist then locate all view from UI file.
      if (convertView == null) {
         // inflate UI from XML file
         convertView = inflater.inflate(R.layout.item_page, parent, false);
         
         // get all UI view
         holder = new ViewHolder(convertView);
         
         // set tag for holder
         convertView.setTag(holder);
      } else {
         // if holder created, get tag from view
         holder = (ViewHolder) convertView.getTag();
      } 
      holder.textView.setText(getItem(position));
      holder.imageView.setImageResource(drawableIds[position]);
      
      return convertView;
   } 
   private static class ViewHolder {
      private TextView textView;
      private ImageView imageView;
      
      public ViewHolder(View v) {
         imageView = (ImageView)v.findViewById(R.id.image);
         textView = (TextView) v.findViewById(R.id.text);
      } 
   }
}

Step 5 − Add the following code to res/layout/item_page.xml.xml.

<ScrollView
   xmlns:android =" http://schemas.android.com/apk/res/android"
   android:layout_width = "match_parent"
   android:layout_height = "match_parent">
   <LinearLayout
      android:layout_width = "match_parent"
      android:layout_height = "wrap_content"
      android:orientation = "vertical">
      <ImageView
         android:id = "@+id/image" 
         android:layout_width = "200dp"
         android:layout_height = "200dp"
         android:layout_gravity = "center"
         android:layout_marginTop = "10dp"
         android:contentDescription = "@string/app_name"
         android:scaleType = "centerCrop" />
      <TextView
         android:id = "@+id/text"
         android:padding = "10dp"
         android:layout_width = "match_parent"
         android:layout_height = "wrap_content"
         android:textAppearance = "?android:attr/textAppearanceMediumInverse"
         android:textColor = "@android:color/black" />
   </LinearLayout>
</ScrollView>

Step 6 − Add the following code to manifest.xml

<?xml version = "1.0" encoding = "utf-8"?>
<manifest xmlns:android = "http://schemas.android.com/apk/res/android"
   package = "myapplication.example.com.myapplication">
   <uses-permission android:name = "android.permission.INTERNET" ></uses-permission>
   <application
      android:allowBackup = "true"
      android:icon = "@mipmap/ic_launcher"
      android:label = "@string/app_name"
      android:supportsRtl = "true"
      android:theme = "@style/AppTheme">
      <activity android:name = ".MainActivity">
         <intent-filter>
            <action android:name = "android.intent.action.MAIN" />
            <category android:name = "android.intent.category.LAUNCHER"/>
         </intent-filter>
      </activity>
      <activity android:name = ".VideoViewActivity" />
     
   </application>
</manifest>

Step 7 − Add the following code to build.gradle

apply plugin: 'com.android.application'

android {
   compileSdkVersion 23
   buildToolsVersion "23.0.1"
   
   defaultConfig {
      applicationId "info.devexchanges.pageflip"
      minSdkVersion 14
      targetSdkVersion 23
      versionCode 1
      versionName "1.0"
   } 
   buildTypes {
      release {
         minifyEnabled false
         proguardFiles getDefaultProguardFile('proguard-android.txt'), 
         'proguard-rules.pro'
      } 
   }
}
dependencies {
   compile fileTree(dir: 'libs', include: ['*.jar'])
   testCompile 'junit:junit:4.12'
   compile 'com.android.support:appcompat-v7:23.1.0'
   compile project(':aphidFlipViewLibrary')
}

Let's try to run your application. I assume you have connected your actual Android Mobile device with your computer. To run the app from android studio, open one of your project's activity files and click Run Eclipse Run Icon icon from the toolbar. Select your mobile device as an option and then check your mobile device which will display your default screen −

Eclipse Run Icon

Download source code here

Print Page
Previous
Next
Advertisements