Now, I would like to present to readers an external library which can help you build a Material Design Date/Time picker Dialog from Android 4.0 (97.4% running devices now). Let's start!
DEMO VIDEO:
Importing library
app/build.gralde:
dependencies {
compile 'com.wdullaer:materialdatetimepicker:2.3.0'
}Show Date/Time Picker Dialog
Calendar instance to build date/time for TimePickerDialog or DatePickerDialog.
For example, build and config a Date Picker Dialog simple like this:
Calendar now = Calendar.getInstance();
DatePickerDialog datepickerdialog = DatePickerDialog.newInstance(
MainActivity.this,
now.get(Calendar.YEAR),
now.get(Calendar.MONTH),
now.get(Calendar.DAY_OF_MONTH)
);
datepickerdialog.setThemeDark(true); //set dark them for dialog?
datepickerdialog.vibrate(true); //vibrate on choosing date?
datepickerdialog.dismissOnPause(true); //dismiss dialog when onPause() called?
datepickerdialog.showYearPickerFirst(false); //choose year first?
datepickerdialog.setAccentColor(Color.parseColor("#9C27A0")); // custom accent color
datepickerdialog.setTitle("Please select a date"); //dialog title
datepickerdialog.show(getFragmentManager(), "Datepickerdialog"); //show dialog
Absolutely similarity, building a Time Picker Dialog:
Calendar now = Calendar.getInstance();
TimePickerDialog timepickerdialog = TimePickerDialog.newInstance(MainActivity.this,
now.get(Calendar.HOUR_OF_DAY), now.get(Calendar.MINUTE), true);
timepickerdialog.setThemeDark(false); //Dark Theme?
timepickerdialog.vibrate(false); //vibrate on choosing time?
timepickerdialog.dismissOnPause(false); //dismiss the dialog onPause() called?
timepickerdialog.enableSeconds(true); //show seconds?
//Handling cancel event
timepickerdialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
@Override
public void onCancel(DialogInterface dialogInterface) {
Toast.makeText(MainActivity.this, "Cancel choosing time", Toast.LENGTH_SHORT).show();
}
});
timepickerdialog.show(getFragmentManager(), "Timepickerdialog"); //show time picker dialog
Full project code
Activity must implement OnDateSetListener or OnTimeSetListener and overriding onDateSet() or onTimeSet() respectively. In these methods, we can show chosen date/time to TextView.
Full code for the main activity:
MainActivity.java
And it's layout:
package info.devexchanges.materialdesigndtpick;
import android.content.DialogInterface;
import android.graphics.Color;
import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;
import com.wdullaer.materialdatetimepicker.date.DatePickerDialog;
import com.wdullaer.materialdatetimepicker.time.RadialPickerLayout;
import com.wdullaer.materialdatetimepicker.time.TimePickerDialog;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity implements TimePickerDialog.OnTimeSetListener,
DatePickerDialog.OnDateSetListener {
private View btnPickDate;
private View btnPickTime;
private TextView textView;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
textView = (TextView) findViewById(R.id.text);
btnPickDate = findViewById(R.id.btn_date);
btnPickTime = findViewById(R.id.btn_time);
btnPickDate.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Calendar now = Calendar.getInstance();
DatePickerDialog datepickerdialog = DatePickerDialog.newInstance(
MainActivity.this,
now.get(Calendar.YEAR),
now.get(Calendar.MONTH),
now.get(Calendar.DAY_OF_MONTH)
);
datepickerdialog.setThemeDark(true); //set dark them for dialog?
datepickerdialog.vibrate(true); //vibrate on choosing date?
datepickerdialog.dismissOnPause(true); //dismiss dialog when onPause() called?
datepickerdialog.showYearPickerFirst(false); //choose year first?
datepickerdialog.setAccentColor(Color.parseColor("#9C27A0")); // custom accent color
datepickerdialog.setTitle("Please select a date"); //dialog title
datepickerdialog.show(getFragmentManager(), "Datepickerdialog"); //show dialog
}
});
btnPickTime.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Calendar now = Calendar.getInstance();
TimePickerDialog timepickerdialog = TimePickerDialog.newInstance(MainActivity.this,
now.get(Calendar.HOUR_OF_DAY), now.get(Calendar.MINUTE), true);
timepickerdialog.setThemeDark(false); //Dark Theme?
timepickerdialog.vibrate(false); //vibrate on choosing time?
timepickerdialog.dismissOnPause(false); //dismiss the dialog onPause() called?
timepickerdialog.enableSeconds(true); //show seconds?
//Handling cancel event
timepickerdialog.setOnCancelListener(new DialogInterface.OnCancelListener() {
@Override
public void onCancel(DialogInterface dialogInterface) {
Toast.makeText(MainActivity.this, "Cancel choosing time", Toast.LENGTH_SHORT).show();
}
});
timepickerdialog.show(getFragmentManager(), "Timepickerdialog"); //show time picker dialog
}
});
}
@Override
public void onTimeSet(RadialPickerLayout view, int hourOfDay, int minute, int second) {
String hourString = hourOfDay < 10 ? "0" + hourOfDay : "" + hourOfDay;
String minuteString = minute < 10 ? "0" + minute : "" + minute;
String secondString = second < 10 ? "0" + second : "" + second;
String time = "You picked the following time: " + hourString + "h" + minuteString + "m" + secondString + "s";
textView.setText(time);
}
@Override
public void onDateSet(DatePickerDialog view, int year, int monthOfYear, int dayOfMonth) {
String date = "You picked the following date: " + dayOfMonth + "/" + (++monthOfYear) + "/" + year;
textView.setText(date);
}
}
activity_main.xml
After choosing a date from dialog, it's will be displayed by the <?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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="info.devexchanges.materialdesigndtpick.MainActivity">
<TextView
android:id="@+id/text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Please choose Date or Time"
android:textStyle="bold" />
<Button
android:id="@+id/btn_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@+id/text"
android:text="Show Date Picker" />
<Button
android:id="@+id/btn_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="@id/btn_date"
android:text="Show Time Picker" />
</RelativeLayout>
TextView:
Toast:
