Page Curl Animation in android?

Ramesh Akula picture Ramesh Akula · May 11, 2012 · Viewed 7.5k times · Source

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.

enter image description here

Answer

DearDhruv picture DearDhruv · Sep 4, 2013

I found one sample code.

youtube

mediafire