MultiViewPager+ZoomOutPageTransformer not working properly

Question

I'm trying to implement viewpager using MultiViewPager and Using google's zoomoutpageTransformer as effect, purpose is achieving something like this image :

but i can't display those two pages in right and left , each time i get a single page in middle of screen! this is my view pager code :

        mViewPager.setPageMargin(
           -64);
    mAdapter = new ViewPagerAdapter(getActivity(), mClasses);
    mViewPager.setPageTransformer(true, new ZoomOutPageTransformer());
    mViewPager.setAdapter(mAdapter);

this is my viewpager in xml :

<ir.phzrobin.Utils.MultiViewPager
    android:id="@+id/viewPager"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_margin="20dp"
    app:matchChildWidth="@+id/textview_class_title" >
</ir.phzrobin.Utils.MultiViewPager>

and this is my viewpager page layout :

    <TextView
        android:id="@+id/textview_class_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerVertical="true"
        android:layout_centerHorizontal="true"
        android:layout_gravity="top"
        android:layout_margin="5dp"
        android:gravity="center_horizontal"
        android:padding="10dp"
        android:text="fsafjabf"
        android:textAlignment="gravity"
        android:textColor="@color/white"
        android:textSize="17sp" />

    <TextView
        android:id="@+id/textview_class_teacher"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/textview_class_title"
        android:layout_centerVertical="true"
        android:layout_margin="5dp"
        android:gravity="center_horizontal"
        android:padding="10dp"
        android:text="fsafjabf"
        android:textAlignment="gravity"
        android:textColor="@color/white"
        android:textSize="17sp" />

    <ImageView
        android:id="@+id/button_options"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_margin="20dp"
        android:layout_marginRight="2dp"
        android:background="@drawable/overflow" />
</RelativeLayout>

what i have tried is this and also the multiviewpager developer's answer from here can anybody please help me to achieve a goal? thanks

this is view pager adapter:

public class ViewPagerAdapter extends PagerAdapter {

// ImageLoader imageLoader = ImageLoader.getInstance();
// DisplayImageOptions options;
// private ImageLoadingListener imageListener;

Context activity;
List<Classes> items;

public ViewPagerAdapter(Context activity, List<Classes> items) {

    this.activity = activity;
    this.items = items;
}

public void setItems(List<Classes> items) {
    this.items = items;
    notifyDataSetChanged();
}

@Override
public int getCount() {
    // TODO Auto-generated method stub
    return items.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
    // TODO Auto-generated method stub
    return arg0 == arg1;
}

@Override
public Object instantiateItem(ViewGroup container, int position) {
    final int pos = position;
    // TODO Auto-generated method stub
    LayoutInflater inflater = (LayoutInflater) activity
            .getSystemService(Activity.LAYOUT_INFLATER_SERVICE);
    View view = inflater.inflate(R.layout.row_viewpager, container, false);

    TextView mClassTitle = (TextView) view
            .findViewById(R.id.textview_class_title);
    mClassTitle.setText("عنوان درس: " + items.get(pos).getSubject());
    mClassTitle.setTypeface(AppFont.GetAppFont());
    ((TextView) view.findViewById(R.id.textview_class_teacher))
            .setText("نام استاد: " + items.get(pos).getMasterName());
    ((TextView) view.findViewById(R.id.textview_class_teacher))
            .setTypeface(AppFont.GetAppFont());
    RelativeLayout mLayout = (RelativeLayout) view
            .findViewById(R.id.rl_viewpager);
    mLayout.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {

            Intent _intent = new Intent(ContextVal.GetAppContext(),
                    ClassNotes.class);
            _intent.putExtra("CLASSID",
                    String.valueOf(items.get(pos).getID())); // set selected
                                                                // item id
                                                                // into
                                                                // intent
                                                                // activity
                                                                // to use in
                                                                // Classnotes
                                                                // Activity!
            activity.startActivity(_intent); // open notes activity

        }
    });
    ImageView mOverFlow = (ImageView) view.findViewById(R.id.button_options);
    mOverFlow.setOnClickListener(new OnClickListener() {

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            PopupMenu popup = new PopupMenu(ContextVal.GetAppContext(), v);
            popup.getMenuInflater().inflate(R.menu.poupup_menu, popup.getMenu());
            popup.setOnMenuItemClickListener(new PopupMenu.OnMenuItemClickListener() {
                public boolean onMenuItemClick(MenuItem item) {
                    if(item.getIcon() != null)
                    {//edit item
                        Intent _ClassWindow = new Intent(ContextVal.GetAppContext(),
                                AddNewClass.class);
                        _ClassWindow.putExtra("CLASSID", String.valueOf(items.get(pos).getID()));
                        activity.startActivity(_ClassWindow);                       }
                    else{//delete item
                        AlertDialog.Builder builder = new AlertDialog.Builder(
                                ContextVal.GetAppContext());

                        builder.setTitle("حذف کلاس");
                        builder.setMessage("آیا مطمعن هستید که میخواهید این درس را حذف کنید ؟");

                        builder.setPositiveButton("بله", new DialogInterface.OnClickListener() {

                            public void onClick(DialogInterface dialog, int which) {
                                // Do nothing but close the dialog
                                Log.e("onClick", "YES");
                                DatabaseHandler _db = new DatabaseHandler(ContextVal
                                        .GetAppContext());
                                _db.deleteClass(items.get(pos));
                                _db.deleteClassNotes(items.get(pos).getID());
                                ContextVal.mViewFragment.RefreshViewPager(); // Refresh Items !
                                                                            // and remove
                                                                            // deleted item from
                                                                            // user's eyes lol
                                dialog.dismiss();
                            }
                        });

                        builder.setNegativeButton("خیر", new DialogInterface.OnClickListener() {

                            @Override
                            public void onClick(DialogInterface dialog, int which) {
                                // Do nothing
                                Log.e("onClick", "NO");
                                dialog.dismiss();
                            }
                        });
                        AlertDialog alert = builder.create();
                        alert.show();                       }

                    return true;
                }
            });
            popup.show();
        }
    });

    container.addView(view, 0);
    return view;
}

@Override
public void destroyItem(ViewGroup container, int position, Object object) {
    // TODO Auto-generated method stub
    container.removeView((View) object);
}

}

Answer 1

Look at this example fragment page layout from the MultiViewPager sample on GitHub:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}">

    <FrameLayout
        android:id="@+id/vg_cover"
        android:layout_width="200dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        tools:ignore="UselessParent">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:background="@drawable/bg_page"
            android:scaleType="centerInside"
            android:src="@drawable/im_pixplicity"
            tools:ignore="ContentDescription" />

        <TextView
            android:id="@+id/tv_item"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="16dp"
            android:gravity="center" />

    </FrameLayout>

</RelativeLayout>

There is a RelativeLayout with width set to match_parent and an inner FrameLayout with an explicit width of 200dp. What is in that inner FrameLayout ends up being the fragment page.

Your layout has app:matchChildWidth="@+id/textview_class_title" but that is not a ViewGroup like the inner FrameLayout.

You need to rewrite your fragment page layout so you have an inner ViewGroup with all your TextViews inside.

Also, do not explicitly call setPageMargin(), MultiViewPager sets the page margin internally based on all the measurements.

If you are still having problems getting this to work, I recommend starting with the sample application for MultiViewPager and modifying it until you get the layout results you are looking for.

Answer 2

I have multiple fragment in my activity, and I use FragmentStatePagerAdapter as PageAdapter and MultiViewPager as ViewPager.

These code below works fine with Google's ZoomOutPageTransformer:

Activity:

    <com.tencent.qest.ui.components.MultiViewPager
    android:id="@+id/pager"
    android:layout_marginTop="20dp"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    app:matchChildWidth="@+id/card_container"
    android:layout_below="@+id/pager_numbers"/>

Fragment:

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="wrap_content">
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/card_container"
    android:layout_width="240dp"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal">
    <ImageView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:id="@+id/img_banner_card"
        android:layout_gravity="center_horizontal"
        android:minHeight="64dp"
        android:src="@drawable/place_holder_1"

        android:layout_marginBottom="-4dp"
        android:adjustViewBounds="false"
        android:scaleType="center"
        android:maxHeight="64dp" />
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        tools:context="com.tencent.qest.ui.fragments.SimpleInfoCardFragment"
        android:padding="18dp"
        android:background="@color/accent"
        android:gravity="center_vertical"
        android:layout_below="@+id/img_banner_card"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true">

        <!-- TODO: Update blank fragment layout -->


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/txt_card_normal"
            android:text="10.发放入职礼品"
            android:id="@+id/tv_Title"
            android:textSize="30dp"
            android:paddingBottom="5dp"
            android:layout_gravity="left"
            android:paddingTop="5dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            style="@style/txt_card_normal"
            android:text="地点：4楼休闲厅"
            android:id="@+id/tv_SubTitle"
            android:layout_gravity="center_horizontal|left"
            android:textSize="20dp"
            android:paddingBottom="5dp"
            android:paddingTop="4dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Tips:必须完成前9项后才可以领取入职礼品哦！"
            android:id="@+id/tv_Content"
            android:layout_gravity="center_horizontal|left"
            style="@style/txt_card_normal" />
    </LinearLayout>
</RelativeLayout>

Answer 3

I just made it fine with this custom PageTransformer and MultiviewPager :

public class ScalePageTransformer implements ViewPager.PageTransformer{
    private static final float scaleMax = 0.8f;
    @Override
    public void transformPage(View view, float position) {
        if (position<=0){
            float scale = scaleMax + (1+position)*0.2f;
            ViewCompat.setScaleX(view, scale);
            ViewCompat.setScaleY(view, scale);
        } else {
            float scale = scaleMax + (1-position)*0.2f;
            ViewCompat.setScaleX(view, scale);
            ViewCompat.setScaleY(view, scale);
        }
    }
}