Android DatePickerDialog

Here we will create a simple app which displays a DatePickerDialog on clicking an ImageView and displays the selected date in a TextView.

Step 1: Create a new project with name ‘Date Picker’ and package name com.myexample.appcompat.picker. Fill the forms and click “Finish” button.

Step 2: In app level build.gradle add following dependencies:

dependencies {
	compile fileTree(dir: 'libs', include: ['*.jar'])
	compile 'com.android.support:appcompat-v7:27.0.2'
	compile 'com.android.support:design:27.0.2'
	compile 'com.android.support:support-v4:27.0.2'
}

Step 3: In drawable folder add image of a Calendar icon ‘calendar.png’.

Step 4: Open res -> layout -> xml (or) main.xml and add codes for displaying an EditText, and an ImageView.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
	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"
	tools:context=".MainActivity">

	<ScrollView
		android:id="@+id/vscroll1"
		android:layout_width="match_parent"
		android:layout_height="match_parent">

		<LinearLayout
			android:id="@+id/linear1"
			android:layout_width="match_parent"
			android:layout_height="wrap_content"
			android:background="#FFFFFF"
			android:orientation="vertical">

			<LinearLayout
				android:id="@+id/linear4"
				android:layout_width="match_parent"
				android:layout_height="wrap_content"
				android:padding="8dp"
				android:orientation="horizontal">

				<TextView
					android:id="@+id/textview2"
					android:layout_width="wrap_content"
					android:layout_height="wrap_content"
					android:padding="8dp"
					android:text="Date of Birth:"
					android:textSize="18sp"
					android:textColor="#37474F"
					android:layout_weight="1"/>

				<EditText
					android:id="@+id/edittext1"
					android:layout_width="120dp"
					android:layout_height="wrap_content"
					android:layout_margin="8dp"
					android:padding="8dp"
					android:background="#B2DFDB"
					android:textSize="16sp"
					android:textColor="#000000"
					android:hint="Click here"
					android:textColorHint="#607D8B"
					android:enabled="false"/>

				<ImageView
					android:id="@+id/imageview1"
					android:layout_width="40dp"
					android:layout_height="40dp"
					android:layout_margin="8dp"
					android:src="@drawable/calendar"
					android:scaleType="fitXY"/>

			</LinearLayout>

		</LinearLayout>

	</ScrollView>

</RelativeLayout>		

Step 5: Open app -> java -> package and open MainActivity.java. Add following code in it.

package com.myexample.appcompat.picker;

import android.app.*;
import android.os.*;
import android.view.*;
import android.view.View.*;
import android.support.v7.app.AppCompatActivity;
import android.widget.*;
import java.util.Calendar;
import java.text.SimpleDateFormat;

public class MainActivity extends AppCompatActivity {
	// Declare EditText, and ImageView
	private ImageView imageview1;
	private EditText edittext1;
	
	@Override
	protected void onCreate(Bundle _savedInstanceState) {
		super.onCreate(_savedInstanceState);
		setContentView(R.layout.main);
		initialize();
	}
	
	private void initialize() {
		edittext1 = (EditText) findViewById(R.id.edittext1);
		imageview1 = (ImageView) findViewById(R.id.imageview1);
		
		
		// Show DatePickerDialog when imageview1 is clicked.
		imageview1.setOnClickListener(new View.OnClickListener() {
				@Override
				public void onClick(View view) {
					showDatePickerDialog(imageview1);
				}
			});
	}
	
	// Define showDatePickerDialog(View).
	public void showDatePickerDialog(View v) {
		// Create and show a new DatePickerFragment.
		DialogFragment newFragment = new DatePickerFragment();
		newFragment.show(getFragmentManager(), "datePicker");
	}

	// Define a DialogFragment class DatePickerFragment.
	public static class DatePickerFragment extends DialogFragment implements DatePickerDialog.OnDateSetListener {
		// Define a new Calendar for current date
		Calendar now = Calendar.getInstance();
		@Override
		public Dialog onCreateDialog(Bundle savedInstanceState) {
			// Create DatePickerFragment (a DialogFragment) with a new DatePickerDialog,
			// Present day of month, month, and year are set as the day, month, and year of this DatePickerDialog.
			int y = now.get(Calendar.YEAR);
			int m = now.get(Calendar.MONTH);
			int d = now.get(Calendar.DAY_OF_MONTH);
			return new DatePickerDialog(getActivity(), this, y, m, d);
		}
		// When Date is selected
		public void onDateSet(DatePicker view, int year, int month, int day) {
			int mon = month +1;	
			String date = day + "/" + mon + "/" + year;
			// Define the EditText again using it's ID in main.xml.
			EditText edittext21 = getActivity().findViewById(R.id.edittext1);
			edittext21.setText(date);
		}
	}
}

Output:
Now run the app. If you click on the ImageView it will display the DatePickerDialog from which date of birth can be selected. On selecting the date of birth, it displays the selected date in EditText.

Leave a Reply