Page Curl Animation in android?

android, page-curl, view

Solution

I found one sample code.

youtube

mediafire

Problem

Can anybody have idea about that implementing curling effect for the views or layout. I searched a lot of things about it, but i can't get any idea. I refer this following links https://github.com/harism/android_page_curl http://code.google.com/p/android-page-curl/ But both links are used to give effects to images only.I tried with harism code, i just create one layout and convert into bitmap after i displaying it.It is succeeded for me.But it doesnt works like a view. Means that just a static page (with no scrollbars if text size exceeded). Please suggest me regarding this if any ideas. ``` public class CurlActivity extends Activity { private CurlView mCurlView; private BitmapDrawable[] bmp = new BitmapDrawable[7]; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); int index = 0; if (getLastNonConfigurationInstance() != null) { index = (Integer) getLastNonConfigurationInstance(); } mCurlView = (CurlView) findViewById(R.id.curl); mCurlView.setPageProvider(new PageProvider()); mCurlView.setSizeChangedObserver(new SizeChangedObserver()); mCurlView.setCurrentIndex(index); mCurlView.setBackgroundColor(0xFF202830); for (int i = 0; i < bmp.length; i++) { bmp[0] = (BitmapDrawable) getResources().getDrawable( R.drawable.obama); bmp[1] = (BitmapDrawable) getResources().getDrawable( R.drawable.road_rage); if (i < 2) continue; TextView b = new TextView(this); b.setLayoutParams(new LayoutParams(480, 854)); b.setText("page " + i); b.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18); b.setTextColor(Color.BLACK); b.setBackgroundColor(Color.WHITE); bmp[i] = new BitmapDrawable(loadBitmapFromView(b)); } // This is something somewhat experimental. Before uncommenting next // line, please see method comments in CurlView. // mCurlView.setEnableTouchPressure(true); } public static Bitmap loadBitmapFromView(View v) { Bitmap b = Bitmap.createBitmap(v.getLayoutParams().width, v.getLayoutParams().height, Bitmap.Config.ARGB_8888); Canvas c = new Canvas(b); v.layout(0, 0, v.getLayoutParams().width, v.getLayoutParams().height); v.draw(c); return b; } @Override public void onPause() { super.onPause(); mCurlView.onPause(); } @Override public void onResume() { super.onResume(); mCurlView.onResume(); } @Override public Object onRetainNonConfigurationInstance() { return mCurlView.getCurrentIndex(); } /** * Bitmap provider. */ private class PageProvider implements CurlView.PageProvider { // Bitmap resources. // private int[] mBitmapIds = { R.drawable.obama, R.drawable.road_rage, // R.drawable.taipei_101, R.drawable.world }; @Override public int getPageCount() { return 7; } private Bitmap loadBitmap(int width, int height, int index) { Bitmap b = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888); b.eraseColor(0xFFFFFFFF); Canvas c = new Canvas(b); Drawable d = bmp[index]; // Drawable d = getResources().getDrawable(mBitmapIds[index]); int margin = 5; int border = 3; Rect r = new Rect(margin, margin, width - margin, height - margin); int imageWidth = r.width() - (border * 2); int imageHeight = imageWidth * d.getIntrinsicHeight() / d.getIntrinsicWidth(); if (imageHeight > r.height() - (border * 2)) { imageHeight = r.height() - (border * 2); imageWidth = imageHeight * d.getIntrinsicWidth() / d.getIntrinsicHeight(); } r.left += ((r.width() - imageWidth) / 2) - border; r.right = r.left + imageWidth + border + border; r.top += ((r.height() - imageHeight) / 2) - border; r.bottom = r.top + imageHeight + border + border; Paint p = new Paint(); /** * Border Color */ p.setColor(Color.RED); //p.setColor(0xFFC0C0C0); c.drawRect(r, p); r.left += border; r.right -= border; r.top += border; r.bottom -= border; d.setBounds(r); d.draw(c); return b; } @Override public void updatePage(CurlPage page, int width, int height, int index) { switch (index) { // First case is image on front side, solid colored back. case 0: { Bitmap front = loadBitmap(width, height, 0); page.setTexture(front, CurlPage.SIDE_FRONT); page.setColor(Color.rgb(180, 180, 180), CurlPage.SIDE_BACK); break; } // Second case is image on back side, solid colored front. case 1: { Bitmap back = loadBitmap(width, height, 2); page.setTexture(back, CurlPage.SIDE_BACK); page.setColor(Color.CYAN, CurlPage.SIDE_FRONT); break; } // Third case is images on both sides. case 2: { Bitmap front = loadBitmap(width, height, 1); Bitmap back = loadBitmap(width, height, 3); page.setTexture(front, CurlPage.SIDE_FRONT); page.setTexture(back, CurlPage.SIDE_BACK); break; } // Fourth case is images on both sides - plus they are blend against // separate colors. case 3: { Bitmap front = loadBitmap(width, height, 2); Bitmap back = loadBitmap(width, height, 1); page.setTexture(front, CurlPage.SIDE_FRONT); page.setTexture(back, CurlPage.SIDE_BACK); page.setColor(Color.argb(127, 170, 130, 255), CurlPage.SIDE_FRONT); page.setColor(Color.WHITE, CurlPage.SIDE_BACK); break; } // Fifth case is same image is assigned to front and back. In this // scenario only one texture is used and shared for both sides. case 4: Bitmap front = loadBitmap(width, height, 0); page.setTexture(front, CurlPage.SIDE_BOTH); page.setColor(Color.argb(127, 255, 255, 255), CurlPage.SIDE_BACK); break; } } } /** * CurlView size changed observer. */ private class SizeChangedObserver implements CurlView.SizeChangedObserver { @Override public void onSizeChanged(int w, int h) { if (w > h) { mCurlView.setViewMode(CurlView.SHOW_TWO_PAGES); mCurlView.setMargins(.1f, .05f, .1f, .05f); } else { mCurlView.setViewMode(CurlView.SHOW_ONE_PAGE); mCurlView.setMargins(.1f, .1f, .1f, .1f); } } } } ``` screenshot like this.

Original source