Page Curl Animation in android?
Asked Answered
Y

2

10

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

Yanirayank answered 11/5, 2012 at 10:5 Comment(3)
Can you get solution for it ?.....If yes then please you tell me.Renfrew
I think there is not any way to reach your goal by using harism's code because whatever view you add it will be displayed as bitmapOrpiment
Please share some code stuff if you have done this.Panhandle
C
5

I found one sample code.

youtube

mediafire

Catchpenny answered 4/9, 2013 at 9:17 Comment(3)
I have gone through Curl effect as well as flip effect in android where pages of a book are turned but what i need is turn effect on book means when we have a book with first and last cover as hard bound then the turning style will be different from curl and flip effect. So please can any one tell me how to implement this and any supporting links or tutorials or examples (are appreciated ) Thank youStanwin
Above links are not working anymore, Please share some code stuff if you have done this.Panhandle
@ShoebSiddique Hello, It is working, Please check your proxy or Firewall if it is blocking it.Catchpenny
G
0

On swipe you can convert your dynamic view into a bitmap data and then pass it to the page curl library (hide the actual view). After page curl effect has completed, you can restore your view.

Geis answered 19/1, 2013 at 17:58 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.