Android date time picker are used to select date and time in many android applications.In this tutorial we will see how to implement date picker and time picker to select date and time in android studio.
Android system provides DatePickerDialog and TimePickerDialog classes that are pre built in android os itself.We can use these classes and implement the date picker dialog and time picker dialog in our application.
Check this android UI controls tutorial to know more about UI controls.
Android Date Picker Dialog
Date picker code in XML
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:padding="20dp"
android:background="#ffffff"
android:id="@+id/main">
<DatePicker
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
</LinearLayout>
Output:
By default the date picker style is calendar.We can change the date picker style to spinner by setting datePickerMode attribute to Spinner.Lets see the code.
<DatePicker
android:id="@+id/date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:datePickerMode="spinner"
android:calendarViewShown="false"/>
Output:
To display a date picker dialog programatically we will use inbuilt DatePickerDialog class provided by android.This class has a constructor with 5 arguments.Lets see them
1.Context: Context of the current activity
2.Callback Function: OnDateSet() callback function which gets invoked when the user finished setting all the parameters date, month and year. This method returns the following 4 parameters
a. DatePicker object
b. Year selected by the user from the dialog.
c. Month selected by the user from the dialog.
d. Day selected by the user from the dialog.
3. Year: The year that is visible when the dialog pops up(we will set our desired year for this).
4. Month: The month that is visible when the dialog pops up(we will set our desired month for this).
5. Day: The day that is visible when the dialog pops up(we will set our desired day for this).
Android Time Picker Dialog
Time Picker Code in XML
<TimePicker android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content" />
By default the time picker style is clock.We can change the time picker style to spinner by setting timePickerMode to spinner.
<TimePicker
android:id="@+id/time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:timePickerMode="spinner"/>
We can change the time format of the time picker to 24 hours by setting setIs24HourView method to true.Lets see
TimePicker picker=(TimePicker)findViewById(R.id.time);
picker.setIs24HourView(true);
If we observe the above output the clock is changed to 24 hour format after setting setIs24HourView to true.
To display a time picker dialog programatically we will use inbuilt TimePickerDialog class provided by android.This class has a constructor with 5 arguments.Lets see them.
1.Context: Context of the current activity.
2.Callback Function: OnTimeSet() callback function which gets invoked when the user finished setting hours and minutes. This method returns the following 3 parameters
a. TimePicker object.
b. Hours selected from the dialog by the user.
c. Minutes selected from the dialog by the user.
3. Hour: The hour that is visible when the dialog pops up(we will set our desired hour for this).
4. Minute: The minute that is visible when the dialog pops up(we will set our desired minute for this).
5. Clock Format: The format of the clock that is visible when the dialog pops up.If we set this value to true it displays 24 hour format clock else it will display 12 hour format.
Android Date Time Picker Example
Lets see an example where we display two buttons (select date, select time) and when the user clicks the buttons we display corresponding dialog and when the user selects the date or time we will display it in a textview.
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:padding="20dp"
android:background="#ffffff"
android:id="@+id/main"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<Button
android:id="@+id/date"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="select date"
android:background="@color/colorAccent"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="18sp"
android:layout_margin="20dp"
android:padding="10dp"/>
<Button
android:id="@+id/time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="select date"
android:background="@color/colorAccent"
android:textColor="#ffffff"
android:textStyle="bold"
android:textSize="18sp"
android:layout_margin="20dp"
android:padding="10dp"/>
</LinearLayout>
<TextView
android:id="@+id/tv_date"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#000000"
android:text="Date"
android:gravity="center"
android:layout_marginTop="40dp"/>
<TextView
android:id="@+id/tv_time"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
android:textColor="#000000"
android:text="Time"
android:gravity="center"
android:layout_marginTop="20dp"/>
</LinearLayout>
MainActivity.java
package com.codesinsider;
import androidx.appcompat.app.AppCompatActivity;
import android.app.DatePickerDialog;
import android.app.TimePickerDialog;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity {
private int year, month, day, hour, minute;
TextView tv_date, tv_time;
Button date, time;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tv_date = findViewById(R.id.tv_date);
tv_time = findViewById(R.id.tv_time);
date = findViewById(R.id.date);
time = findViewById(R.id.time);
date.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final Calendar c = Calendar.getInstance();
year = c.get(Calendar.YEAR);
month = c.get(Calendar.MONTH);
day = c.get(Calendar.DAY_OF_MONTH);
DatePickerDialog picker = new DatePickerDialog(MainActivity.this, new DatePickerDialog.OnDateSetListener() {
@Override
public void onDateSet(DatePicker datePicker, int year, int month, int day) {
tv_date.setText(day+"/"+(month+1)+"/"+year);
}
}, year, month,day);
picker.show();
}
});
time.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
final Calendar c = Calendar.getInstance();
hour = c.get(Calendar.HOUR_OF_DAY);
minute = c.get(Calendar.MINUTE);
TimePickerDialog timePickerDialog = new TimePickerDialog(MainActivity.this, new TimePickerDialog.OnTimeSetListener()
{
@Override
public void onTimeSet(TimePicker timePicker, int hour, int min) {
tv_time.setText(hour+":"+min);
}
},hour,minute,false);
timePickerDialog.show();
}
});
}
}
That’s all about android date time picker dialog with example.I hope you got better understanding about date picker and time picker with this tutorial.We will see other concepts in the next tutorials.
Do like and share if you find this post helpful.Thank you!!
Reference: Official Android Documentation
Leave a Reply