Page curl not working in Action bar tabs

Question

• I am referred the Harism page curl to implement it in Action bar tabs.Because I thought this is the only thing should fulfill my requirement.

• Below I am showing the output what I get it till now.

  

• I need to add the pager curl in Viewpager.So that the action bar tabs will swipe along with curl page.

• Below I am posted the codes related to that.

MainActivity.java:

public class MainActivity extends FragmentActivity implements
        ActionBar.TabListener {

    private CurlView mCurlView;


    private ViewPager viewPager;
    private TabsPagerAdapter mAdapter;
    private ActionBar actionBar;

    @SuppressWarnings("unused")
    private Menu optionsMenu;
    private MenuItem menuItem;

    // Tab titles
    private String[] tabs = { "Top Rated", "Games", "Movies" };

    @SuppressWarnings("deprecation")
    @SuppressLint("NewApi")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_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);

        // Initilization
        viewPager = (ViewPager) findViewById(R.id.pager);
        actionBar = getActionBar();
        mAdapter = new TabsPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);


        actionBar.setDisplayOptions(ActionBar.DISPLAY_SHOW_HOME
                | ActionBar.DISPLAY_SHOW_TITLE | ActionBar.DISPLAY_SHOW_CUSTOM);

        // Adding Tabs
        for (String tab_name : tabs) {
            actionBar.addTab(actionBar.newTab().setText(tab_name)
                    .setTabListener(this));
        }

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);

            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });

    }

    @Override
    public void onPause() {
        super.onPause();
        mCurlView.onPause();
    }

    @Override
    public void onResume() {
        super.onResume();
        mCurlView.onResume();
    }

    @Override
    public Object getLastCustomNonConfigurationInstance() {
        return mCurlView.getCurrentIndex();
    }

        /**
        * Bitmap provider.
        */
        private class PageProvider implements CurlView.PageProvider {

            // Bitmap resources.
        private int[] mBitmapIds = { R.layout.fragment_top_rated, R.layout.fragment_games,
            R.layout.fragment_movies };

        @Override
        public int getPageCount() {
        return 2;
        }
        private Bitmap loadBitmap(int width, int height, int index) {
            LayoutInflater inflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            Log.d("index", String.valueOf(index));
            View v = inflater.inflate(mBitmapIds[index], null);
            v.measure(MeasureSpec.makeMeasureSpec(width, MeasureSpec.EXACTLY),
                    MeasureSpec.makeMeasureSpec(height, MeasureSpec.EXACTLY));
            v.layout(0, 0, v.getMeasuredWidth(), v.getMeasuredHeight());
            Bitmap b = Bitmap.createBitmap(v.getWidth(), v.getHeight(),
                    Bitmap.Config.ARGB_8888);
            Canvas c = new Canvas(b);
            v.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.
            default:

                Bitmap front = loadBitmap(width, height, 0);
                page.setTexture(front, CurlPage.SIDE_FRONT);
                page.setColor(Color.rgb(180, 180, 180), 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);
            }
        }
    }

    }

activity_main.xml:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <info.androidhive.tabsswipe.adapter.CurlView
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/curl"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
    </info.androidhive.tabsswipe.adapter.CurlView>

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
    </android.support.v4.view.ViewPager>

</LinearLayout>

TopRatedFragment.java:

public class TopRatedFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {

        View rootView = inflater.inflate(R.layout.fragment_top_rated, container, false);

        return rootView;
    }
}

fragment_top_rated.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#fa6a6a"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Design Top Rated Screen"
        android:textSize="20dp" />

</RelativeLayout>

TabsPagerAdapter.java:

import info.androidhive.tabsswipe.GamesFragment;
import info.androidhive.tabsswipe.MoviesFragment;
import info.androidhive.tabsswipe.TopRatedFragment;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

public class TabsPagerAdapter extends FragmentPagerAdapter {

    public TabsPagerAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int index) {

        switch (index) {
        case 0:
            // Top Rated fragment activity

            return new TopRatedFragment();
        case 1:
            // Games fragment activity
            return new GamesFragment();
        case 2:
            // Movies fragment activity
            return new MoviesFragment();
        }

        return null;
    }

    @Override
    public int getCount() {
        // get item count - equal to number of tabs
        return 3;
    }

}

My issue is I need to add the page curl in ViewPager.So that I can do the swipe along with viewpager.I didn't know how to do that.But I am trying to get it.Any suggestion is mostly appreciated.Thank you.

Answer 1

Harism's page curl is designed for bitmaps, not for views. With that module, it is not possible to reach what you want, unless your tab contains only bitmaps

Answer 2

ActionBar tabs are deprecated in 5.0

Perhaps a page transform that doesn't break for use with a viewpager.

    if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.HONEYCOMB) {
        mPager.setPageTransformer(true, new DepthPageTransformer());
    }



public class DepthPageTransformer implements ViewPager.PageTransformer {

private static final String TAG="DepthTransformer";
private static float MIN_SCALE = 0.75f;

@TargetApi(Build.VERSION_CODES.HONEYCOMB)
public void transformPage(View view, float position) {
    int pageWidth = view.getWidth();
    Log.d(TAG, "VIew " + view + " Position: " + position);

    if (position <= -1) { // [-Infinity,-1) ] ***

        // RLP> I Changed to include "-1" as well: When position is -1, the view is not visible

        // This page is way off-screen to the left.

        view.setAlpha(0);
        Log.d(TAG, "VIew "+view+" Position: "+position+", way left");
        view.setVisibility(View.GONE);

    } else if (position <= 0) { // [ (-1,0]
        // Use the default slide transition when moving to the left page
        view.setAlpha(1);
        view.setTranslationX(0);
        view.setScaleX(1);
        view.setScaleY(1);
        if (position==0) {
            Log.d(TAG, "View "+view+" focused now?");
        }

        if (view.getVisibility()!=View.VISIBLE)
            view.setVisibility(View.VISIBLE);

    } else if (position <= 1) { // (0,1]

        // Fade the page out.
        view.setAlpha(1 - position);

        // Counteract the default slide transition

        // I THINK THIS IS WHAT BREAKS EVERYTHING
        // ViewPager normally has the views one after another, but this makes all views on top

        view.setTranslationX(pageWidth * -position);

        // Scale the page down (between MIN_SCALE and 1)

        float scaleFactor = MIN_SCALE + (1 - MIN_SCALE) * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

        if (position==1) {

            Log.d(TAG, "View "+view+" invisible now?");
            view.setVisibility(View.GONE);
            // we totally hide the view. This seems to solve focus issue

        } else {
            if (view.getVisibility()!=View.VISIBLE)
                view.setVisibility(View.VISIBLE);
        }

    } else { // (1,+Infinity]
        // This page is way off-screen to the right.
        view.setAlpha(0);

        // we totally hide the view. This seems to solve focus issue
        // I have to check for strange side-effects, but so far I found none :)

        view.setVisibility(View.GONE);

        Log.d(TAG, "VIew "+view+" Position: "+position+", way right");
    }
}
}