android - MultiViewPager+ZoomOutPageTransformer not working properly -

i'm trying implement viewpager using multiviewpager , using google's zoomoutpagetransformer effect, purpose achieving image :

but can't display 2 pages in right , left , each time single page in middle of screen! view pager code :

        mviewpager.setpagemargin(            -64);     madapter = new viewpageradapter(getactivity(), mclasses);     mviewpager.setpagetransformer(true, new zoomoutpagetransformer());     mviewpager.setadapter(madapter); 

this 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 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 have tried this , multiviewpager developer's answer here can please me achieve goal? thanks

this 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                                                                 //                                                                 // intent                                                                 // activity                                                                 // 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) {                                 // nothing close 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 !                                                                             // , remove                                                                             // deleted item                                                                             // user's eyes lol                                 dialog.dismiss();                             }                         });                          builder.setnegativebutton("خیر", new dialoginterface.onclicklistener() {                              @override                             public void onclick(dialoginterface dialog, int which) {                                 // 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); } 

}

look @ example fragment page layout 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 relativelayout width set match_parent , inner framelayout explicit width of 200dp. in inner framelayout ends being fragment page.

your layout has app:matchchildwidth="@+id/textview_class_title" not viewgroup inner framelayout.

you need rewrite fragment page layout have inner viewgroup textviews inside.

also, not explicitly call setpagemargin(), multiviewpager sets page margin internally based on measurements.

if still having problems getting work, recommend starting sample application multiviewpager , modifying until layout results looking for.