Android Date Slider with View Pager

In this post we are going to implement a Date Slider with View Pager. Output will be look like this:

Step 1: Add View pager in your layout file

             <android.support.v4.view.ViewPager
                android:id="@+id/pager"
                android:background="@color/white"
                android:layout_width="fill_parent"
                android:layout_height="54dp" />

Step 2: Initialize View Pager in Activity file:

private void initViewPager() {
        adapter = new BookNowDateListAdapter(this, R.layout.layout_date_item,
                getDates());
        adapter.setCurrentItem(0);

        pager = (ViewPager) findViewById(R.id.pager);
        pager.setAdapter(adapter);

        // set intial position.
        onPagerItemClick(pager.getChildAt(0), 0);
    }

Step 3: Create Custom Date Objects :

Create Custom BO/Modal class for Date Object with following fields. Generate their Setter & Getters.

    private String date;
    private String month;
    private String year;
    private String day;
    private String formattedDate;

    private Date dateObj;

Create ArrayList of these custom date objects to show in Activity

private ArrayList<CustomDate> getDates() {
        dates = new ArrayList<CustomDate>();

        Calendar calendar = Calendar.getInstance();
        calendar.setTime(new Date());

        for (int index = 1; index < 365; index++) {

            CustomDate date = new CustomDate();
            date.setDate("" + calendar.get(Calendar.DATE));
            date.setDay(getDay(calendar.get(Calendar.DAY_OF_WEEK)));
            date.setYear("" + calendar.get(Calendar.YEAR));
            date.setMonth("" + getMonth(calendar.get(Calendar.MONTH)));

            date.setFormattedDate(calendar.get(Calendar.YEAR) + "-"
                    + (calendar.get(Calendar.MONTH) + 1) + "-"
                    + calendar.get(Calendar.DATE));

            dates.add(date);

            calendar.add(Calendar.DATE, 1);

        }
        return dates;
    }

    private String getDay(int index) {
        switch (index) {
        case Calendar.SUNDAY:
            return "SUN";
        case Calendar.MONDAY:
            return "MON";
        case Calendar.TUESDAY:
            return "TUE";
        case Calendar.WEDNESDAY:
            return "WED";
        case Calendar.THURSDAY:
            return "THUR";
        case Calendar.FRIDAY:
            return "FRI";
        case Calendar.SATURDAY:
            return "SAT";
        }
        return "";
    }

    private String getMonth(int index) {
        switch (index) {
        case Calendar.JANUARY:
            return "JANUARY";
        case Calendar.FEBRUARY:
            return "FEBRUARY";
        case Calendar.MARCH:
            return "MARCH";
        case Calendar.APRIL:
            return "APRIL";
        case Calendar.MAY:
            return "MAY";
        case Calendar.JUNE:
            return "JUNE";
        case Calendar.JULY:
            return "JULY";
        case Calendar.AUGUST:
            return "AUGUST";
        case Calendar.SEPTEMBER:
            return "SEPTEMBER";
        case Calendar.OCTOBER:
            return "OCTOBER";
        case Calendar.NOVEMBER:
            return "NOVEMBER";
        case Calendar.DECEMBER:
            return "DECEMBER";
        }
        return "";
    }

 Step 4: Handle View Pager click to show selected Date:

public void onPagerItemClick(View view, int index) {
        System.out.println("" + index);
        adapter.setCurrentItem(index);
        pager.setAdapter(adapter);
    }

Step 5: Create View Pager Adapter

public class BookNowDateListAdapter extends PagerAdapter {

    private Context mContext;
    private ArrayList<CustomDate> dates;
    private LayoutInflater inflater;
    private int currentItemPos;

    public BookNowDateListAdapter(Context context, int resourceId,
            ArrayList<CustomDate> objects) {
        this.mContext = context;
        this.dates = objects;

        inflater = (LayoutInflater) context
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public void setCurrentItem(int item) {
        this.currentItemPos = item;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ViewHolder holder;

        CustomDate date = this.dates.get(position);

        View convertView = inflater.inflate(R.layout.layout_date_item,
                container, false);
        holder = new ViewHolder();

        holder.dateTextView = (TextView) convertView
                .findViewById(R.id.layout_date_text);
        holder.dayTextview = (TextView) convertView
                .findViewById(R.id.layout_date_day);
        holder.monthTextView = (TextView) convertView
                .findViewById(R.id.layout_date_month);

        holder.outerLayout = (LinearLayout) convertView
                .findViewById(R.id.layout_date_item_outer_layout);

        convertView.setTag(Integer.valueOf(position));

        holder.dateTextView.setText(date.getDate());
        holder.dayTextview.setText(date.getDay());
        holder.monthTextView.setText(date.getMonth());

        convertView.setOnClickListener(new OnClickListener() {

            @Override
            public void onClick(View v) {
                // TODO Auto-generated method stub
                ((MyActivity) mContext).onPagerItemClick(v,
                        (Integer) v.getTag());
            }
        });

        if (position == currentItemPos) {
            holder.outerLayout.setBackgroundColor(Color.parseColor("#EC522C"));
        } else {
            holder.outerLayout.setBackgroundColor(Color.parseColor("#ffffff"));
        }

        ((ViewPager) container).addView(convertView);

        return convertView;
    }

    private class ViewHolder {
        private TextView monthTextView;
        private TextView dayTextview;
        private TextView dateTextView;

        private LinearLayout outerLayout;
    }

    @Override
    public int getCount() {
        return dates.size();
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        // TODO Auto-generated method stub
        return view == (object);
    }

    @Override
    public int getItemPosition(Object object) {
        return POSITION_NONE;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        View view = (View) object;
        ((ViewPager) container).removeView(view);
        view = null;
    }

    public float getPageWidth(int position) {
        return 0.2f;
    }
}

Step 6: Clean and Run the project:
Clean and run the project. It will show the output as shown in the picture above in blog.