Saturday, 20 October 2012

Creating DatePicker using DialogFragment in android

Android has transform its UI after 3.1. They had deprecated Activity Group and so many other thing and introduce Fragment. Maintaining Fragment is comparatively easy. Just few month back they they introduce DialogFragment and deprecated showDialog(id) method. it affects creating DatePicker and TimePicker also.so today we will discuss about creating DatePicker using brand new concept DialogFragment.

For More Information on  Fragment Visit Integration Of Action Bar And Fragment

Creating DatePicker using DialogFragment is quite easy. Lets divide it in step and make it more easy :)

Step 1) Repeated step create a new Project

Step 2) Add one button to your main xml. So that on click this button we can show Date Picker

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <Button
        android:id="@+id/date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="50dp"
        android:text="@string/show_date_picker_fragment" />

</LinearLayout>  
View Of XML

Step 3) Change your activity to a Fragment Activity and replace with below code

package com.home;

import java.util.Calendar;

import android.app.DatePickerDialog.OnDateSetListener;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.DatePicker;
import android.widget.Toast;

import com.dialog.DatePickerFragment;

public class MainActivity extends FragmentActivity {

 @Override
 public void onCreate(Bundle savedInstanceState) {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.activity_main);
  findViewById(R.id.date).setOnClickListener(new OnClickListener() {

   @Override
   public void onClick(View v) {
    showDatePicker();
   }
  });
 }

 private void showDatePicker() {
  DatePickerFragment date = new DatePickerFragment();
  /**
   * Set Up Current Date Into dialog
   */
  Calendar calender = Calendar.getInstance();
  Bundle args = new Bundle();
  args.putInt("year", calender.get(Calendar.YEAR));
  args.putInt("month", calender.get(Calendar.MONTH));
  args.putInt("day", calender.get(Calendar.DAY_OF_MONTH));
  date.setArguments(args);
  /**
   * Set Call back to capture selected date
   */
  date.setCallBack(ondate);
  date.show(getSupportFragmentManager(), "Date Picker");
 }

 OnDateSetListener ondate = new OnDateSetListener() {
  @Override
  public void onDateSet(DatePicker view, int year, int monthOfYear,
    int dayOfMonth) {
   Toast.makeText(
     MainActivity.this,
     String.valueOf(year) + "-" + String.valueOf(monthOfYear)
       + "-" + String.valueOf(dayOfMonth),
     Toast.LENGTH_LONG).show();
  }
 };

 @Override
 public boolean onCreateOptionsMenu(Menu menu) {
  getMenuInflater().inflate(R.menu.activity_main, menu);
  return true;
 }

}

Step Final ) Now you are done from your side..We just need to create one class that will extends DialogFragment and will return a DatePicker .

package com.dialog;

import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.DialogFragment;

public class DatePickerFragment extends DialogFragment {
 OnDateSetListener ondateSet;

 public DatePickerFragment() {
 }

 public void setCallBack(OnDateSetListener ondate) {
  ondateSet = ondate;
 }

 private int year, month, day;

 @Override
 public void setArguments(Bundle args) {
  super.setArguments(args);
  year = args.getInt("year");
  month = args.getInt("month");
  day = args.getInt("day");
 }

 @Override
 public Dialog onCreateDialog(Bundle savedInstanceState) {
  return new DatePickerDialog(getActivity(), ondateSet, year, month, day);
 }
}  

See how to integrate Action bar with Tab