RecyclerView as WheelPicker

Case Study :

Working with an E-Commerce application, I was asked to implement a custom date/time picker for delivery time slot as below.

Fig. 1.1 TimeSlot Picker

Being a lazy developer, my first approach was to look for a library that would make my work a lot easier. And after few (actually many) Google searches, I decided to use AigeStudio’s WheelPicker library.

And where things started to go wrong?

  • Our UI slightly changed and we were having different formats of time for API response and App UI (they were very different). So I had to use a more complex Object model for Collection.
  • Since, There were two WheelPickers in the UI and the data in second one was entirely dependent upon that in first one. There were a lot of issues with changing data.

As Solution to first problem, one can simply override the toString() function and return the required date/time format.

But, In second case there were a lot of issues with changing data. The library provides a single setData() method which in most cases didn’t worked well for us. setSelectedItemPosition() wasn’t working either in few cases.

And then I just get to know of SnapHelper in RecyclerView.


SnapHelper is the utility class that help to implement snapping in RecyclerView. Support library 24.2.0 introduced two helper classes SnapHelper and LinearSnapHelper for handling snapping in RecyclerView.

Fig 1.2 Demo App

Github Project

Making List


MainActivity XML Layout


<?xml version="1.0" encoding="utf-8"?>
<     xmlns:android=""     xmlns:tools=""     android:layout_width="match_parent"     android:layout_height="match_parent"     android:orientation="vertical"     tools:context="com.github.angads25.androidwheel.MainActivity">
    <         android:id="@+id/tv_date"         android:layout_width="match_parent"         android:layout_height="?android:attr/listPreferredItemHeightSmall"         android:gravity="center"         android:textSize="18sp"         android:textStyle="bold"         tools:text="@string/app_name"/>
    <         android:id="@+id/date_picker"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:background="#000000"         android:foreground="@drawable/shape_picker_shade"         tools:listitem="@layout/list_item_date_time"/>

Pojo for Date

package com.github.angads25.androidwheel;
 * Created by Angad Singh on 26/11/17.
public class DateBean {
    private String date;
    private long timeStamp;
    public String getDate() {
        return date;
    public void setDate(String date) { = date;
    public long getTimeStamp() {
        return timeStamp;
    public void setTimeStamp(long timeStamp) {
        this.timeStamp = timeStamp;


RecyclerView list item


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout     xmlns:android=""     xmlns:tools=""     android:layout_width="match_parent"     android:layout_height="?android:attr/listPreferredItemHeight"     android:background="#333333">
    <         android:id="@+id/tv_data"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:gravity="center"         android:textSize="16sp"         android:layout_gravity="center_vertical"         android:layout_marginLeft="16dp"         android:layout_marginStart="16dp"         android:layout_marginRight="16dp"         android:layout_marginEnd="16dp"         android:textColor="#FFFFFF"         tools:text="@string/app_name"/>

Adapter class for RecyclerView

package com.github.angads25.androidwheel;


import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import java.util.ArrayList;


* Created by Angad Singh on 22/11/17.


public class PickerAdapter extends RecyclerView.Adapter {
private Context context;
private ArrayList strings;

public PickerAdapter(Context context, ArrayList strings) {
this.context = context;
this.strings = strings;

public PickerViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
View view = LayoutInflater.from(context).inflate(R.layout.list_item_date_time, parent, false);
return new PickerViewHolder(view);

public void onBindViewHolder(PickerViewHolder holder, int position) {

public int getItemCount() {
return strings.size();

class PickerViewHolder extends RecyclerView.ViewHolder {
private AppCompatTextView tvData;

PickerViewHolder(View itemView) {
tvData = itemView.findViewById(;

Making RecyclerView Snap Center Item

package com.github.angads25.androidwheel;
import android.os.Bundle;
import android.util.TypedValue;
import android.view.View;
import android.widget.AbsListView;
import java.util.ArrayList;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity {
    private String[] months = {
            "Jan", "Feb", "Mar",
            "Apr", "May", "Jun",
            "Jul", "Aug", "Sep",
            "Oct", "Nov", "Dec"
    private AppCompatTextView dateTv;
    protected void onCreate(Bundle savedInstanceState) {
        // Maximum visible items in WheelPicker as a time.
        int maxItems = 3;
        // We will adjust height of recyclerView to fit
        // exactly maximum visible items.
        int recyclerViewHeight = 0;
        TypedValue tv = new TypedValue();
        if (getTheme().resolveAttribute(android.R.attr.listPreferredItemHeight, tv, true)) {
            // Calculating recyclerView height from listItemHeight
            // we are using in our recyclerView list item.
            recyclerViewHeight = maxItems * TypedValue.complexToDimensionPixelSize(, getResources().getDisplayMetrics());
        dateTv = findViewById(;
        final RecyclerView dateList = findViewById(;
        LinearLayoutCompat.LayoutParams dateParams = (LinearLayoutCompat.LayoutParams) dateList.getLayoutParams();
        dateParams.height = recyclerViewHeight;
        final ArrayList<DateBean> arrayList = new ArrayList<>();
        // Adding blank field in beginning of list so that
        // first date item is selectable.
        DateBean padding = new DateBean();
        // Adding 7 consecutive days to date picker.
        Calendar calendar = Calendar.getInstance();
        for(int i = 0; i < 7; i++) {
            DateBean date = new DateBean();
                    months[calendar.get(Calendar.MONTH)] + " " +
                    calendar.get(Calendar.DAY_OF_MONTH) + ", " +
            calendar.add(Calendar.DAY_OF_MONTH, 1);
        // Adding blank field in last so that last item is
        // selectable.
        PickerAdapter adapter = new PickerAdapter(MainActivity.this, arrayList);
        final LinearLayoutManager manager = new LinearLayoutManager(
        final LinearSnapHelper snapHelper = new LinearSnapHelper();
        // Attaching SnapHelper to recyclerView.
        // Setting layout manager to recyclerView.
        // Setting adapter to recyclerView.
        // Listening to scroll events on RecyclerView.
        dateList.addOnScrollListener(new RecyclerView.OnScrollListener() {
            public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
                super.onScrollStateChanged(recyclerView, newState);
                if(newState == AbsListView.OnScrollListener.SCROLL_STATE_IDLE) {
                    View centerView = snapHelper.findSnapView(manager);
                    // Getting position of the center/snapped item.
                    int pos = manager.getPosition(centerView);

Wheel Picker In Action:

Fig. 1.3 Wheel Picker


Fig. 1.4 TimeSlot Picker

I personally think that RecyclerView picker is far better than any other pickers. It comes with all the advantages of RecyclerView. We can use customized item types, add animations and even more.





Recent Post

  • How to Connect A Biometric Attendance Device to a System through JS and Node.js?

    In the world of highly advanced workspaces, the utilization of biometric attendance structures has come to be important for accurate and steady tracking of worker or student attendance. This blog publishes objectives to provide a complete guide on integrating a biometric attendance device with a gadget with the use of JavaScript and Node.Js. By making […]

  • How to Implement File Uploads in Node.js with Multer?

    For many web applications that let users share papers, photos, and other types of material, file uploads are a necessary functionality. Multer is a well-liked middleware used for Handling file uploads in Node.js using Multer the Node.js environment to effectively handle file uploads. We’ll look at how to use Multer to create file uploads […]

  • How to Use Local Storage to Persist Data in a JavaScript Application?

    Data persistence is a key aspect of web applications. In JavaScript, one of the primary tools for achieving this is Local Storage, a part of the Web Storage API. This JavaScript data persistence tool provides a simple key-value storage mechanism within the user’s browser. Unlike session storage, which persists data only during a session, Local […]

  • How to Use WordPress API?

    WordPress stands out as a leading content management system, celebrated for its dynamic capabilities in website and blog development. Renowned for its rich feature set and extensive customization options, WordPress empowers creators to fashion captivating online experiences. In recent times, WordPress has expanded its horizons into the realm of APIs, granting developers a potent tool […]

  • How to Use Post and Pre Hooks in Mongoose?

    In Mongoose, a widely-used library for working with MongoDB, there are valuable tools called “Pre and Post Hooks.” These hooks, also known as “Mongoose Middleware” or “Mongoose Model Hooks,” allow developers to run their own code just before or after specific actions on the database. With “Pre Hooks,” you can customize actions before they happen, […]

  • How To Create Reusable Components in React: Best Practices

    Rеact is a popular library for building usеr intеrfacеs with JavaScript. One of the main benefits of Rеact is its ability to create reusable componеnts that can be used in different parts of your application. Reusable componеnts can help you savе timе, rеducе codе duplication, and еnsurе consistеncy in your UI. However, creating rеusablе componеnts […]