Htykuut

In my project, I need to show the list of item in 3 by 3 on the horizontal scroll view with left and right arrow. If I click on the right arrow next 3 item should display like below image

I am confused that I need to go with ViewPager or RecyclerView with SnapHelper or PagerSnapHelper. Is there any other suggestions on how I can achieve it

For answer this qustion you should use viewpager and in any page use recycler and sending data 3 by 3 in page and set data to recycler.

1. 
   

   The first Step you should add Viewpager in parent xml :
   
   
   activity_main.xml

   
   
   

   
   

   
   
   

   <ImageView
   
           android:id="@+id/left_arrow"
   
           android:layout_width="wrap_content"
   
           android:layout_alignParentLeft="true"
   
           android:layout_height="wrap_content"
   
           android:layout_centerVertical="true"
   
           android:layout_alignTop="@+id/view_pager"
   
           android:rotation="180"
   
           android:padding="8dp"
   
           android:layout_alignBottom="@id/view_pager"
   
           android:src="@drawable/ic_arrow"/>
   
   
   
   <android.support.v4.view.ViewPager
   
           android:layout_width="match_parent"
   
           android:id="@+id/view_pager"
   
           android:layout_toLeftOf="@id/right_arrow"
   
           android:layout_toRightOf="@id/left_arrow"
   
           android:layout_height="150dp"/>
   
   
   
   <com.rd.PageIndicatorView
   
           android:id="@+id/pageIndicatorView"
   
           android:layout_width="wrap_content"
   
           android:layout_height="wrap_content"
   
           android:layout_below="@+id/view_pager"
   
           app:piv_animationType="worm"
   
           app:piv_dynamicCount="true"
   
           android:layout_marginTop="10dp"
   
           android:layout_centerHorizontal="true"
   
           app:piv_interactiveAnimation="true"
   
           app:piv_radius="3dp"
   
           app:piv_unselectedColor="#999999"
   
           app:piv_selectedColor="#000000"
   
           app:piv_viewPager="@id/view_pager"
   
           attrs:piv_padding="8dp" />
   
   <ImageView
   
           android:id="@+id/right_arrow"
   
           android:padding="8dp"
   
           android:layout_alignTop="@+id/view_pager"
   
           android:layout_alignBottom="@id/view_pager"
   
           android:layout_alignParentRight="true"
   
           android:layout_width="wrap_content"
   
           android:layout_centerVertical="true"
   
           android:layout_height="wrap_content"
   
           android:src="@drawable/ic_arrow"/>
   
   

   
   
   
   
   


2. 
   

   In this step you should create Viewpager adapter :
   
   
   pageAdapter.kt

   
   
   

   override fun getItem(position: Int): Fragment {
   
       val firstItem = ((position + 1) * 3) - 2
   
       val lastItem = ((position + 1) * 3)
   
       val itemSet = arrayListOf<String>()
   
       for (i in firstItem..lastItem) {
   
           if (i <= items.size)
   
               itemSet.add(items[i - 1])
   
       }
   
       return ItemFragment.newInstance(itemSet)
   
   }
   
   
   
   override fun getCount(): Int {
   
       return size
   
   }
   
   

   
   


3. 
   

   In the third step, you should create a fragment to show each page of viewPager and just in Oncreate set recycler adapter and send data to adapter :
   
   
   ItemFragment

   
   
   

   // Creates the view controlled by the fragment
   
   val view = inflater.inflate(R.layout.page, container, false)
   
   val recycler = view.findViewById<RecyclerView>(R.id.recycler)
   
   
   
   // Retrieve and display the movie data from the Bundle
   
   val args = arguments
   
   recycler.layoutManager = GridLayoutManager(activity,3)
   
   recycler.adapter = ItemAdapter(args?.getStringArrayList("items")!!, this.activity!!)
   
   

   
   


4. 
   

   And The Last Just create RecyclerAdapter and show data to each item in list:
   
   
   ItemAdapter.kt

   
   
   

   override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
   
       return ViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false))
   
   }
   
   
   
   override fun onBindViewHolder(holder: ViewHolder, position: Int) {
   
       holder?.title?.text = items.get(position)
   
   }
   
   
   
   override fun getItemCount(): Int {
   
       return items.size
   
   }
   
   

   
   
   

   Result :
   
   

   
   

if you want to see the full source, just go to this link