Skip to content Skip to sidebar Skip to footer

Implement Viewpager Inside Vertical Viewpager

I have used Vertical Viewpager in my project which displays a collection of data. And In single data(item), I have more images to display. So I tried with viewpager. But when I scr

Solution 1:

You can use Vertical RecyclerView with Horizontal ViewPager

Here is the sample demo of your requirement with some bonus modification hope it helps you

MainActivity

publicclassMainActivityextendsAppCompatActivity {

    RecyclerView myRecyclerView;
    private ArrayList<DataModel> arrayList = newArrayList<>();
    DataAdapter adapter;

    @OverrideprotectedvoidonCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myRecyclerView = findViewById(R.id.myRecyclerView);
        myRecyclerView.setHasFixedSize(true);
        myRecyclerView.setLayoutManager(newLinearLayoutManager(this));

        addData();


        adapter = newDataAdapter(this, arrayList);
        myRecyclerView.setAdapter(adapter);
    }

    privatevoidaddData() {

        DataModeldataModel=newDataModel();
        dataModel.setTitle("Image collection One");
        ArrayList<Integer> list= newArrayList<>();

        for (inti=0; i < 5; i++) {
            list.add(R.drawable.kid);
        }
        dataModel.setArrayList(list);

        arrayList.add(dataModel);


        DataModeldataModel2=newDataModel();
        dataModel2.setTitle("Image collection Two");
        ArrayList<Integer> list2= newArrayList<>();

        for (inti=0; i < 5; i++) {
            list2.add(R.drawable.nilesh);
        }
        dataModel2.setArrayList(list2);

        arrayList.add(dataModel2);


        DataModeldataModel3=newDataModel();
        dataModel3.setTitle("Image collection Three");
        ArrayList<Integer> list3= newArrayList<>();

        for (inti=0; i < 5; i++) {
            list3.add(R.drawable.kid);
        }
        dataModel3.setArrayList(list3);

        arrayList.add(dataModel3);


        DataModeldataModel4=newDataModel();
        dataModel4.setTitle("Image collection Four");
        ArrayList<Integer> list4= newArrayList<>();

        for (inti=0; i < 5; i++) {
            list4.add(R.drawable.nilesh);
        }
        dataModel4.setArrayList(list4);

        arrayList.add(dataModel4);


    }
}

R.layout.activity_main

<?xml version="1.0" encoding="utf-8"?><LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"><android.support.v7.widget.RecyclerViewandroid:id="@+id/myRecyclerView"android:layout_width="match_parent"android:layout_height="wrap_content"/></LinearLayout>

DataAdapter

publicclassDataAdapterextendsRecyclerView.Adapter<DataAdapter.ViewHolder> {

    private Context context;
    private ArrayList<DataModel> arrayList;

    publicDataAdapter(Context context, ArrayList<DataModel> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }

    @NonNull@Overridepublic ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        Viewview= LayoutInflater.from(context).inflate(R.layout.custom_layout, parent, false);
        returnnewViewHolder(view);
    }

    @OverridepublicvoidonBindViewHolder(@NonNull ViewHolder holder, int position) {

        holder.tvTitle.setText(arrayList.get(position).getTitle());
        ImageAdapter imageAdapter= newImageAdapter(context,arrayList.get(position).getArrayList());
        holder.myViewPager.setAdapter(imageAdapter);
        holder.myTabLayout.setupWithViewPager(holder.myViewPager, true);

    }

    @OverridepublicintgetItemCount() {
        return arrayList.size();
    }

    publicclassViewHolderextendsRecyclerView.ViewHolder {

        ViewPager myViewPager;
        TextView tvTitle;
        Button myButton;
        TabLayout myTabLayout;
        publicViewHolder(View itemView) {
            super(itemView);

            myViewPager=itemView.findViewById(R.id.myViewPager);
            tvTitle=itemView.findViewById(R.id.tvTitle);
            myButton=itemView.findViewById(R.id.myButton);
            myTabLayout=itemView.findViewById(R.id.myTabLayout);

            myButton.setOnClickListener(newView.OnClickListener() {
                @OverridepublicvoidonClick(View v) {
                    Toast.makeText(context, "clicked position : "+getAdapterPosition(), Toast.LENGTH_SHORT).show();
                }
            });
        }
    }
}

R.layout.custom_layout

<android.support.v7.widget.CardViewxmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="wrap_content"app:cardElevation="4dp"app:cardUseCompatPadding="true"android:orientation="vertical"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><TextViewandroid:id="@+id/tvTitle"android:layout_width="wrap_content"android:layout_height="wrap_content"android:gravity="center"android:textColor="#199bd2"android:textSize="30sp"android:textStyle="bold"tools:text="Nilesh Rathod" /><RelativeLayoutandroid:layout_width="match_parent"android:layout_height="250dp"><android.support.v4.view.ViewPagerandroid:id="@+id/myViewPager"android:layout_width="match_parent"android:layout_height="wrap_content"></android.support.v4.view.ViewPager><android.support.design.widget.TabLayoutandroid:id="@+id/myTabLayout"app:tabBackground="@drawable/tab_selector"app:tabGravity="center"android:layout_alignParentBottom="true"app:tabIndicatorHeight="0dp"android:layout_width="match_parent"android:layout_height="wrap_content"/></RelativeLayout><Buttonandroid:id="@+id/myButton"android:layout_width="match_parent"android:layout_height="wrap_content"android:text="Click Me" /></LinearLayout></android.support.v7.widget.CardView>

ImageAdapter

publicclassImageAdapterextendsPagerAdapter {

    ArrayList<Integer> arrayList= newArrayList<>();
    privateLayoutInflater inflater;
    privateContext context;

    publicImageAdapter( Context context,ArrayList<Integer>imageArray) {
        this.arrayList = imageArray;
        this.context = context;
        inflater= LayoutInflater.from(context);
    }

    @OverridepublicvoiddestroyItem(ViewGroup container, int position, Objectobject) {
        container.removeView((View) object);
    }

    @Overridepublic int getCount() {
        return arrayList.size();
    }

    @OverridepublicObjectinstantiateItem(ViewGroup view, int position) {
        View imageLayout = inflater.inflate(R.layout.pager_layout, view, false);

        assert imageLayout != null;
        final ImageView imageView = (ImageView) imageLayout
                .findViewById(R.id.image);


        imageView.setImageResource(arrayList.get(position));

        view.addView(imageLayout, 0);

        return imageLayout;
    }

    @OverridepublicbooleanisViewFromObject(View view, Objectobject) {
        return view.equals(object);
    }

    @OverridepublicvoidrestoreState(Parcelable state, ClassLoader loader) {
    }

    @OverridepublicParcelablesaveState() {
        returnnull;
    }
}

R.layout.pager_layout

<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:padding="1dip" ><ImageViewandroid:id="@+id/image"android:layout_width="wrap_content"android:layout_height="wrap_content"android:adjustViewBounds="true"android:layout_gravity="center"android:src="@mipmap/ic_launcher"android:scaleType="centerCrop" /></LinearLayout>

DataModel

publicclassDataModel {
    String title;
    ArrayList<Integer> arrayList= newArrayList<>();
    publicStringgetTitle() {
        return title;
    }

    publicvoidsetTitle(String title) {
        this.title = title;
    }

    publicArrayList<Integer> getArrayList() {
        return arrayList;
    }

    publicvoidsetArrayList(ArrayList<Integer> arrayList) {
        this.arrayList = arrayList;
    }
}

tab_selector.xml

<?xml version="1.0" encoding="utf-8"?><selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/selected_dot"android:state_selected="true"/><itemandroid:drawable="@drawable/default_dot"/></selector>

@drawable/selected_dot

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shapeandroid:innerRadius="0dp"android:shape="ring"android:thickness="8dp"android:useLevel="false"><solidandroid:color="@color/colorAccent"/></shape></item></layer-list>

@drawable/default_dot

<?xml version="1.0" encoding="utf-8"?><layer-listxmlns:android="http://schemas.android.com/apk/res/android"><item><shapeandroid:innerRadius="0dp"android:shape="ring"android:thickness="8dp"android:useLevel="false"><solidandroid:color="@android:color/darker_gray"/></shape></item></layer-list>

OUTPUT

enter image description here

Post a Comment for "Implement Viewpager Inside Vertical Viewpager"