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.
 

Android Range Bar (Seek bar) with two thumbs

This blog will help you to create a Android Seekbar with two thumbs. User can select values between two range i.e. between minimum and maximum. This sample project uses third party library present in github: RangeBar Github

Step1: Create Android project:

In your MainActivity file enter below lines of code:

 @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // Setup the new range seek bar
        RangeSeekBar<Integer> rangeSeekBar = new RangeSeekBar<Integer>(this);
        // Set the range
        rangeSeekBar.setRangeValues(0, 100);
        rangeSeekBar.setSelectedMinValue(20);
        rangeSeekBar.setSelectedMaxValue(88);

        // Add to layout
        LinearLayout layout = (LinearLayout) findViewById(R.id.seekbar_placeholder);
        layout.addView(rangeSeekBar);
    }

Step2: Add Files:




Download and add these below files in your project and then ctrl+shift+o in your eclipse in MainActivty file to import missing files:

File 1: PixelUtil.java
File 2: RangeSeekBar.java

Step3: Resource File:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:rsb="http://schemas.android.com/apk/res-auto"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:padding="5dp" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar initialized in code with ranges set" />

    <LinearLayout
        android:id="@+id/seekbar_placeholder"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with default range" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with ranges set" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="150"
        rsb:absoluteMinValue="20" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with ranges set and double values" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="140.54"
        rsb:absoluteMinValue="15.23" />

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Range seek bar from xml with single thumb to true" />

    <com.yahoo.mobile.client.android.util.RangeSeekBar
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        rsb:absoluteMaxValue="150"
        rsb:absoluteMinValue="20"
        rsb:singleThumb="true" />

</LinearLayout>

Step4: Clean and Run:
Now clean your project and run it on device or emulator. That's It, Its done.

Output:

View Pager With Tabs

Hello Guys, Today we are going to implement Android View Pager with Tabs.

Step 1: Create an Android Project and in your MainActivity Add below code:
package com.example.viewpagerwithtabsdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.view.ViewPager;
import android.support.v7.app.ActionBar;
import android.support.v7.app.ActionBar.Tab;
import android.support.v7.app.ActionBar.TabListener;
import android.support.v7.app.ActionBarActivity;

import com.example.viewpagerwithtabsdemo.bo.Student;
import com.example.viewpagerwithtabsdemo.fragment.BaseFragment;

@SuppressWarnings("deprecation")
public class MainActivity extends ActionBarActivity implements TabListener {

    ViewPager viewPager;
    ActionBar actionBar;
    ViewPagerAdapter mAdapter;

    public Student student;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // Specify that tabs should be displayed in the action bar.
        initViewPager();
        initActionBar();
    }

    private void initViewPager() {
        viewPager = (ViewPager) findViewById(R.id.pager);
        mAdapter = new ViewPagerAdapter(getSupportFragmentManager());

        viewPager.setAdapter(mAdapter);

        /**
         * on swiping the viewpager make respective tab selected
         * */
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int position) {
                // on changing the page
                // make respected tab selected
                actionBar.setSelectedNavigationItem(position);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
            }

            @Override
            public void onPageScrollStateChanged(int arg0) {
            }
        });

    }

    private void initActionBar() {
        actionBar = getSupportActionBar();
        actionBar.setHomeButtonEnabled(false);
        actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);

        // Adding Tabs
        actionBar.addTab(actionBar.newTab().setText("First")
                .setTabListener(this));
        actionBar.addTab(actionBar.newTab().setText("Second")
                .setTabListener(this));
    }

    @Override
    public void onTabReselected(Tab tab, FragmentTransaction ft) {
    }

    @Override
    public void onTabSelected(Tab tab, FragmentTransaction ft) {
        viewPager.setCurrentItem(tab.getPosition());
    }

    @Override
    public void onTabUnselected(Tab tab, FragmentTransaction ft) {
    }

    /**
     * Identifies whether the back is called form a child fragment or a parent
     * fragment and takes necessary steps then.
     */
    @Override
    public void onBackPressed() {
        // android:switcher is default tag provided by Android framework for
        // ViewPager default implementation.
        Fragment fragment = (Fragment) getSupportFragmentManager()
                .findFragmentByTag(
                        "android:switcher:" + R.id.pager + ":"
                                + viewPager.getCurrentItem());

        if (fragment != null && fragment instanceof BaseFragment) {
            if (fragment.getView() != null) {
                BaseFragment bf = (BaseFragment) fragment;
                if (bf.isShowingChild()) {
                    replaceChild(bf, viewPager.getCurrentItem());
                } else {
                    backButton();
                }
            }
        }
    }

    // Back Button Pressed
    private void backButton() {
        finish();
    }

    public void replaceChild(BaseFragment oldFrg, int position) {
        mAdapter.replaceChildFragment(oldFrg, position);
    }

}


Step 2: Create Listener for View pager page change
package com.example.viewpagerwithtabsdemo;

public interface PageFragmentListener {
    void onSwitchToNextFragment();
}


Step 3: Create View Pager Adapter


package com.example.viewpagerwithtabsdemo;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

import com.example.viewpagerwithtabsdemo.fragment.BaseFragment;
import com.example.viewpagerwithtabsdemo.fragment.FirstPageFragment;
import com.example.viewpagerwithtabsdemo.fragment.SecondPageFragment;
import com.example.viewpagerwithtabsdemo.fragment.ChildFragment;

public class ViewPagerAdapter extends FragmentPagerAdapter {

    private BaseFragment mFragmentAtPos1; // Fragment at index 1
    private final FragmentManager mFragmentManager;

    private static final int NUM_OF_ITEMS = 2; // No of ViewPager items

    private static final String STR_CHILD_TAG_2 = " -> child fragment of tag 2";

    public ViewPagerAdapter(FragmentManager fm) {
        super(fm);
        mFragmentManager = fm;
    }

    @Override
    public Fragment getItem(int position) {
        if (position == 1) {
            if (mFragmentAtPos1 == null) {
                mFragmentAtPos1 = SecondPageFragment
                        .newInstance(new PageFragmentListener() {
                            public void onSwitchToNextFragment() {
                                mFragmentManager.beginTransaction()
                                        .remove(mFragmentAtPos1).commit();
                                mFragmentAtPos1 = ChildFragment
                                        .newInstance(STR_CHILD_TAG_2);
                                mFragmentAtPos1.setShowingChild(true);
                                notifyDataSetChanged();
                            }
                        });
            }
            return mFragmentAtPos1;
        }

        return FirstPageFragment.newInstance();
    }

    @Override
    public int getCount() {
        return NUM_OF_ITEMS;
    }

    @Override
    public int getItemPosition(Object object) {
        if (object instanceof SecondPageFragment
                && mFragmentAtPos1 instanceof ChildFragment) {
            return POSITION_NONE;
        }
        else if (object instanceof ChildFragment) {
            return POSITION_NONE;
        }
        return POSITION_UNCHANGED;
       
    }

    public void replaceChildFragment(BaseFragment oldFrg, int position) {
        switch (position) {
        case 1:
            mFragmentManager.beginTransaction().remove(oldFrg).commit();
            mFragmentAtPos1 = SecondPageFragment
                    .newInstance(new PageFragmentListener() {
                        public void onSwitchToNextFragment() {
                            mFragmentManager.beginTransaction()
                                    .remove(mFragmentAtPos1).commit();
                            mFragmentAtPos1 = ChildFragment
                                    .newInstance(STR_CHILD_TAG_2);
                            mFragmentAtPos1.setShowingChild(true);
                            notifyDataSetChanged();
                        }
                    });
            notifyDataSetChanged();
            break;

        default:
            break;
        }
    }

}


Step 4: Create Fragments: 

Base Fragment:

public class BaseFragment extends Fragment {
   
    private boolean mShowingChild;
   
    public PageFragmentListener mListener;
   
    public boolean isShowingChild() {
        return mShowingChild;
    }

    public void setShowingChild(boolean showingChild) {
        mShowingChild = showingChild;
    }

}

First Fragment:

 /**
 * First fragment.
 */
public class FirstPageFragment extends BaseFragment {

    public FirstPageFragment() {
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_tab1, container, false);
        return view;
    }

    public static FirstPageFragment newInstance() {
        return new FirstPageFragment();
    }

}

Second Fragment:

public class SecondPageFragment extends BaseFragment {

    private View rootView;
    private static SecondPageFragment fragmentObject;

    public SecondPageFragment() {
    }

    public SecondPageFragment(PageFragmentListener listener) {
        mListener = listener;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        rootView = inflater.inflate(R.layout.fragment_tab2, container, false);
        Button button = (Button) rootView.findViewById(R.id.button);

        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mListener != null) {
                    // save form data.
                    saveFormData();

                    mListener.onSwitchToNextFragment();
                }
            }
        });

        initViewDetails();

        return rootView;
    }

    public static SecondPageFragment newInstance(PageFragmentListener listener) {
         fragmentObject=new SecondPageFragment(listener);
        return fragmentObject;
    }

    private void saveFormData() {
        Student student = ((MainActivity) getActivity()).student=new Student();

        student.setFirstName(((EditText) rootView.findViewById(R.id.firstName))
                .getText().toString());
        student.setLastName(((EditText) rootView.findViewById(R.id.secondName))
                .getText().toString());
    }

    private void initViewDetails() {
        Student student = ((MainActivity) getActivity()).student;
        if (student != null) {
            ((EditText) rootView.findViewById(R.id.firstName)).setText(student
                    .getFirstName());
            ((EditText) rootView.findViewById(R.id.secondName)).setText(student
                    .getLastName());
        }
    }
}

Child Fragment

public class ChildFragment extends BaseFragment {

    private String mTitle;

    public ChildFragment(String title) {
        mTitle = title;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_child, container, false);
        return view;
    }

    public static ChildFragment newInstance(String title) {
        return new ChildFragment(title);
    }

}

Step5: Modal/BO/Bean Class for saving object state:

public class Student {

    private String firstName;
    private String lastName;

    public String getFirstName() {
        return firstName;
    }

    public void setFirstName(String firstName) {
        this.firstName = firstName;
    }

    public String getLastName() {
        return lastName;
    }

    public void setLastName(String lastName) {
        this.lastName = lastName;
    }

}

Output:

 Attached Src: View Pager Demo Src