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
Post a Comment for "Implement Viewpager Inside Vertical Viewpager"